Vue复习 其一

Vue模板语法

　　1.插值语法 ：用于解析标签体内容 

　　　　写法：{{xx}}，xx为js表达式，且可以直接读取到data中的所有属性

　　　　例如：<p> hello，{{name}} </p>

　　2.指令语法：用于解析标签（包括：标签属性、标签体内容、绑定事件等等）

　　　　写法：v-bind:标签 ="xx" ,也可以简写为  :标签 = "xx" ,  xx为js表达式，同样可以直接读取到data中的所有属性

　　3.「object.defineProperty」

　　　　let person = {

　　　　　　name : "张三"，

　　　　　　nickname : "法外狂徒"，

　　　　}

　　　　Object.defineProperty(person,'age'

　　　　value:17.5,

　　　　enumerable:true, // 可枚举的

　　　　writable:true, // 可编辑的

　　　　configurable:true, // 可删除的

　　　　})

　　4.数据代理 : 通过一个对象，实现对另一个对象中的属性进行操作

　　　　例如： let obj1 = {a:10}

　　　　　　　 let obj2 = {b:20}

　　　　　　　 object.defineProperty(obj2 , 'a' , {

　　　　　　　　  get(){

　　　　　　　　　　return obj.a

　　　　　　　　  }

　　　　　　　　})

　　5.事件绑定

　　　　①使用 v-on : ?? 或 @?? 绑定事件，?? 为事件名；

　　　　②事件的回调配置在vm的methods对象中；

　　　　③ @?? ="demo" 和  @?? = "demo($event,a,b...)"，如果传参需要一一对应。

　　

　　6.事件修饰符

　　   常用：

　　　　① prevent：阻止默认事件；(例如阻止标签的默认跳转)

　　　　② stop：阻止事件冒泡；

　　　　③ once：事件只触发一次；

　　  非常用；

　　　　① capture：使用事件的捕获模式；(事件在捕获阶段触发，冒泡阶段不触发)

　　　　② self：只有当event.target为当前正在操作的元素时才能触发；

　　　　③ passive：事件默认行为立即执行，无需等待事件回调执行完毕；

 　　　　注：事件修饰符能连写，并且没有顺序限制