vue比jq好处
1jq 频繁操作dom 增加了性能消耗 vue 模拟dom 从内存中拿
2jq 数据没有统一管理 vue 统一管理数据
3vue 组件开发可以提取出公共的html或js
mv*好处
mvc
m model 模型 操作数据
v view 视图 展示静态资源
c controller 控制器 逻辑
mvp
m model 模型 操作数据
v view 视图 展示静态资源
p 主持人(上面的mvc 中 mv可以互相调用所以改成 mvp让他不能互相调用)
mvvm
m model 模型 操作数据
v view 视图 展示静态资源
vm 监听m数据改变 同步到v
vue
插值 在HTML插入数据
文本 {{data 的建}}
v-html {{data的建}}可以解析html代码
指令 通过v-开头的命令显示数据
事件 v-on:事件类型 和 @事件类型
动态参数 动态标签的属性值 bind:属性=“data建” 和:属性=‘data建“
v-for 循环
v-for = “item in 建”
v-for = “(item,index) in 建”
v-if = “判断条件”不成立的删除
v-show = “判断条件“不成立的隐藏
v-if = “条件”
v-else-if = “条件”
v-else
v-on:事件类型=‘函数’
@事件类型=‘函数’
事件修饰符
stop阻止冒泡
prevent阻止默认动作
capture打乱冒泡
self阻止冒泡自身
once一次事件
passire 性能
键盘修饰符
enter 回车
delete 删除
space 空格
代码片段的好处
方便快捷搭建vue的mvvm模式的格式
输入绑定/双向绑定
比之jq的添加id属性在获取其内容方便了不少
他是让m的数据同步到v
v的数据同步到m
class和style绑定
字符串 :class=“classOne” classOne = "class名"
数组的 :class=“classArr” classArr =[‘class名1‘,‘class名2’]
对象的 :class=“classObj” classObj = {class名:布尓类型,class名:布尓类型}
todo 是待完成
todolist 是待完成清单
混入(mixin):减少代码冗余,提高代码复用性
语法
// 全局不用激活直接用
Vue.mixin({
data // 函数里面返回数据对象
methods
//..
})
// 局部需要在new Vue中通过mixins激活
let 变量名 = {
data // 函数里面返回数据对象
methods
//...
}
new Vue({
// ...
mixins: [变量名1,...,变量名n] // 脚下留心:变量名不加引号
})
什么是组件:就是一个文件,后期里面放HTML、CSS、JS 刚好是一个页面
组件好处:可以减少代码冗余,便于后期维护
// 全局(定义好了就可以调用)
Vue.component(标识,{
// 通过template键 来 声明HTML代码
template: 1直接写HTML(不推荐), 2写CSS选择器 视图里面通过template来定义选择器
data 是方法里面返回数据对象
methods
watch
//...
})
// 局部
new Vue({
// ...
// 声明组件 可以写多个 +s
components: {
标识: {
// 通过template键 来 声明HTML代码
template: 1直接写HTML(不推荐), 2写CSS选择器 视图里面通过template来定义选择器
data 是方法里面返回数据对象
methods
watch
//...
},
//....
}
})
最初ajax 瑕疵:1-异步回调地狱,2-语法麻烦,3-语法有兼容性问题
后来jq 明确:基于ajax封装
好处:语法更简单、解决兼容性问题
瑕疵:异步回调地狱
官方是如何解决异步回调地狱的:promise
最后:fetch 官方封装的 不需要导入库直接使用(fetch = XMLHttpRequest + promise)
明确:vue 以前 vue-resource(官方的 后来官方推荐别用 推荐你用axios 第三方的)
相同点:
1.都是项目用来发送异步请求的
2.都是基于XMLHttpRequest + promise
不同点:
1- axios是第三方封装的,fetch是官方封装的
2- axios更强(并发&拦截器 -> 写项目说)
3- fetch每次都需要then res.json()
axios({
url
method
headers
params get
data post
}).then().catch()
fetch(请求地址,{
method
headers
body
}).then(res=>res.json()).then().catch()
1计算属性(直接通过函数名调用) 侦听器(不能调用 借助模型调用)
2计算属性(有缓存) 侦听器(没有)
3计算属性(一个【键/函数名】监控【n个数据变化 用了几个就监控几个】)
侦听器 (一个【键/函数名】监控【一个数据变化】)
普通方法:1-事件触发用,2-减少视图冗余用
计算属性:普通方法单个调用影响性能,用计算属性
侦听器:监控模型数据变化,并且写其他逻辑 (一般网站搜索)
区别
相同点:都是为了优化项目
不同点:
1-计算属性(函数名不叫小括号) 侦听器(不能调用 需要借助模型)
2-计算属性(有缓存) 侦听器(没有)
3-计算属性(一个键可以监控n个模型数据) 侦听器(一个键只能监控一个)
vue基础api
原文:https://www.cnblogs.com/bahkkba/p/12359444.html