Vue学习01

个人github地址https://github.com/zhangl-w/VueDemo/tree/master/VueDemo

1、基本代码

1.导入Vue包，导包后浏览器内存中会产生一个Vue的构造函数

2.建立一个Vue实例

3.el 表示，当前咱们new的这个Vue实例，要控制页面上的哪一个区域

4.date属性中存放的是el中要用到的数据

5.传递内容插值表达式{{msg}}

 经过Vue提供的指令很方便的就能把数据渲染到页面，程序员不在手动操做DOM元素

2、v-cloak指令

1.使用v-clock指令设置样式能够解决插值表达式闪烁的问题

2.默认v-text没有闪烁问题
   v-text会覆盖元素中本来的内容，可是插值表达式只会替换本身的这个占位符不会把整个元素的内容清空

3.v-html会以html形式传递内容，会覆盖元素中本来的内容

3、v-bind

v-bind: 是Vue中提供用于绑定属性的指令
v-bind： 指令能够被简写为 :要绑定的属性
v-bind 中能够写合法的JS表达式

4、Vue中提供了 v-on: 事件绑定机制 简写是@

5、事件修饰符

    使用.stop阻止冒泡

    使用 .prevent 阻止默认行为

    使用 .capture 实现捕获事件的机制

    使用 .self 实现只有点击当前元素的时候才会触发事件处理函数

    使用 .once 只触发一次事件处理函数

     .self和.stop 的区别：.self 只会阻止本身身上冒泡的触发，并不会真正阻止冒泡的行为

6、v-model

    v-bind 只能实现数据的单向绑定，从m自动绑定到v，没法实现数据双向绑定

    v-model 指令，能够实现表单元素和 Model中数据的双向绑定
    注意： v-model 只能运用在 表单元素中

7、Vue中样式

    第一种使用方式，直接传递一个数组，注意：这里的class须要使用v-bind作数据绑定

    第二种方式，在数组中使用三元表达式

    第三种方式，在数组中使用对象来代替三元表达式

    第四种方式，在为class使用v-bind 绑定对象的时候，对象的属性是类名属性的值是一个标识符