[JavaScript知识库]Vue课堂笔记知识总结（1）

vue：渐进式js前段框架。

作者：尤雨溪

前段三大框架：Vue、React、Angular

MVVM模型
? ? ? 1.M:模型(Model) : data中的数据
? ? ? 2.V:视图(View）:模板代码
? ? ? 3.VM:视图模型(ViewModel): Vue实例

观察发现:
? 1.data中所有的属性,最后都出现在了vm身上。
? 2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。

实例化参数：

new Vue({
el:"" ? ? ? ?选择目标标签

data:{} ? ? ? ?传入数据

methods:{} ? ? ? ?绑定事件

computed:{} ? ? ? ?计算

watch:{} ? ? ? ?监听

})

computed和watch之间的区别：

1.computed能完成的功能，watch都可以完成

2.watch能完成的功能，computed不一定能完成，列如：watch可以进行异步操作

区别：

两个重要的小原则:
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数，这样this的指向才是vm或组件实例对象。

属性绑定：

v-bind:属性="指令值"

v-model="x" ? ? ? ?表单绑定指令

文本渲染指令：

{{}}????????v-text????????v-html

条件渲染指令：

v-show

v-if

区别：
?? ??? ?去隐藏一个节点的时候，
? ? ? ? v-show通过css方式隐藏
? ? ? ? v-if是通过移除dom来实现
?? ??? ?v-show适合频繁切换显示与隐藏
? ? ? ? v-if 适合少量切换显示与隐藏

v-else-if????????v-else

遍历

v-for="item in list"????????遍历元素

v-for="(item,index) in list"?????????遍历元素和下标

v-for="item in 10"?????????遍历数字

事件指令

stop阻止事件冒泡

prevent阻止默认事件

once只执行一次

capyure 使用事件的捕获模式

done是否完成

unshift添加到头部

scroll ?滚动条滚动触发

wheel ?鼠标滚轮滚动触发

passive ? 事件的默认行为立即执行

键盘指令

.up上 ? ? ? ?.down下 ? ? ? ?.right右 ? ? ? ?.left左 ? ? ? ?.entet回车 ? ?tab换行（特殊，必须配合keydown使用）

.delete删除 ? ? ? ?.space空格 ? ? ? ?.esc退出

事件对象

$event? ? ? ? ? ?当前事件的对象

@keyup????????监听键盘的抬起

trim????????????????去除输入框两端的空格

表单绑定指令
?? ?v-model?????????表单的值与数据绑定在一起
?? ?<input type="checkbox">????????默认选中true或者不选中false
?? ?<input type="checkbox" name="x" v-model="list">???????如果是多个把选中的值动态添加到lis组中
?? ?表单修饰符
?? ??? ?.lazy????????????????懒加载
?? ??? ?.number? ? ? ? ? ?字符串转数字类型
?? ??? ?.trim????????????????去除首尾空格