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                去除首尾空格