VUE的基础操作

一.mustache
1.{{ msg }}是{{ this.msg }}的缩写
2.mustache语法糖对支持大部分数据类型如：
基础数据类型： number string boolean
复杂数据类型: Object( array function )
特殊数据类型: null undefined
但是mustache不支持console.log和alert
3.指令：
写法：v-xxx
v-html：文本渲染
v-text：文本渲染
v-html与v-text的区别：v-text不能识别标签

二.vue上的类名操作
1.vue中如何给dom添加类名:
1. 直接在dom上绑定类名
2. vue中类名绑定 - 对象形式
目的： dom身上属性class 要和 数据绑定
解决：v-bind
数据中key，我们起的和绑定的对象中的key一样，但是你得
知道这两个东西不一样

          <p :class = "{ size,bg_color }"></p>
              size是自定义的属性， 它的属性值是undefined， 相当于是false
          <p :class = "{ size: true, bg_color: true }"></p>
              size也是自定义属性，他的属性是true,那么就会加上去
          <p :class = "{ [s]: true, [bg_color]: true }"></p>
            
      格式： v-bind:class = "{ 属性： boolean }"
      格式： v-bind:class = "{ [data]： boolean }"

3.vue中类名绑定的形式 - 数组的形式 【 推荐 】
格式： v-bind:class = “[ 数据 ]”

4.类名绑定不会覆盖原先的类名

5.为什么要绑定类名
指令是用来操作dom
目的： 为了将来通过数据来操作类名，类名操作dom

三.样式绑定
格式：v-bind: style = " "
样式可以用数组或对象的形式

四.事件绑定
1.事件绑定格式dom.onclick = function () {}
dom: 事件源
on: 绑定事件的形式
click: 事件类型
function（）{} 事件处理函数

2.事件监听 ： addeventListener

3.直接在标签中绑定事件

vue采用了第三种，也是通过属性的形式绑定在dom身上

          <div v-on:click = "事件名称"></div>

4.vue事件绑定的使用
1.v-on的格式：v-on:eventType = " handlerName "
2.“ v-on: ”可以简写成“@”

五.计算属性（computed）
1.如果业务功能增加，我们会发现mustache 语法中的js逻辑有点多了，不方便阅读，并且视图的功能是展示界面，如果有太多js逻辑，会导致V的负担增加
如果我们写在methods中写一个方法，然后运行这个方法，又有点觉得和我们认为的methods里面最好放事件处理程序不符，
解决方法：
Vue提出了一个新的解决方案： 计算属性 computed
计算属性中存放的是函数（ 书写逻辑 ）
计算属性可以直接像全局变量一样使用，直接将方法名当做全局变量一样使用

六.阻止事件冒泡
阻止事件冒泡我们只要使用e.stopPropagation()，但是我们发现，在vue中e.stopPropagation()往往需要多次书写，会导致代码重复，浪费性能。
解决方法： @eventType.self = “事件处理程序”

七.Vue的底层原理
Vue利用了数据劫持和事件的发布订阅来实现双向数据绑定，当我们在vue data选项中定义数据时，vue会通过观察者对象（ observer ）将data选项中的所有key，经过Object.defineProperty 的getter 和setter进行设置，当我们通过 v-model指令绑定元素是， 自动触发getter,getter会返回一个初始值，这样我们在视图中就可以看到数据了，当视图中内容改变时，会触发setter,setter会通知vue，视图已经进行了更新，vue会重新生成 虚拟DOM , 继而通过 新旧 虚拟DOM 对比， 生成patch对象，再将patch对应渲染到视图中