【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 
我的github地址https://github.com/zhangl-w/VueDemo/tree/master/VueDemo
一、基本代码
1.导入Vue包，导包后浏览器内存中会产生一个Vue的构造函数
2.创建一个Vue实例
3.el 表示，当前我们new的这个Vue实例，要控制页面上的哪个区域
4.date属性中存放的是el中要用到的数据
5.传递内容插值表达式{{msg}}
通过Vue提供的指令很方便的就能把数据渲染到页面，程序员不在手动操作DOM元素
二、v-cloak指令
1.使用v-clock指令设置样式可以解决插值表达式闪烁的问题
2.默认v-text没有闪烁问题
v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符不会把整个元素的内容清空
3.v-html会以html形式传递内容，会覆盖元素中原本的内容
三、v-bind
v-bind: 是Vue中提供用于绑定属性的指令
v-bind： 指令可以被简写为 :要绑定的属性
v-bind 中可以写合法的JS表达式
四、Vue中提供了 v-on: 事件绑定机制 简写是@
五、事件修饰符
使用.stop阻止冒泡
使用 .prevent 阻止默认行为
使用 .capture 实现捕获事件的机制
使用 .self 实现只有点击当前元素的时候才会触发事件处理函数
使用 .once 只触发一次事件处理函数
.self和.stop 的区别：.self 只会阻止自己身上冒泡的触发，并不会真正阻止冒泡的行为
六、v-model
v-bind 只能实现数据的单向绑定，从m自动绑定到v，无法实现数据双向绑定
v-model 指令，可以实现表单元素和 Model中数据的双向绑定
注意： v-model 只能运用在 表单元素中
七、Vue中样式-class 注意：这里的class需要使用v-bind做数据绑定
第一种使用方式，直接传递一个数组
第二种方式，在数组中使用三元表达式
第三种方式，在数组中使用对象来代替三元表达式
第四种方式，直接使用对象，在为class使用v-bind 绑定对象的时候，对象的属性是类名属性的值是一个标识符
八、Vue中样式-style
第一种方式：直接在元素上通过 :style 的形式书写样式对象 <h1 :style="{ color:'red','font-weight':200 }">这是一个h1</h1>
//属性中如果有横线要将属性加单引号
第二种方式：1.将样式对象直接定义到data中，2.直接引用到 :style 中
1.
data:{
styleObj1:{ color:'red','font-weight':200 }
}
2.<h1 :style="styleObj1">这是一个h1</h1>
第三种方式：在 :style 中通过数组，引用多个data中的样式对象
<h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>
data:{
styleObj1:{ color:'red','font-weight':200 },
styleObj2:{ 'font-style':'italic' }
}
