1. 模板的理解
动态html页面
包含了一些js语法代码
【插值语法】双大括号表达式 (“Mustache”语法)【一个】
【指令语法】指令(以v-开头的自定义标签属性)【很多】
插值语法:
功能:用于解析标签体内容
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)
举例:v-bind:href=“xxx” 或 简写为 :href=“xxx”,xxx同样要写js表达式,且可以直接读取到data中的所有属性
备注:Vue中有很多的指令,且形式都是:v-???
2. 插值语法:双大括号表达式
语法: {{exp}}
功能: 向页面输出数据
可以调用对象的方法
里面写js表达式:有返回值的js代码,而不是js语句
3. 指令语法:强制数据绑定 v-bind:
功能:指定变化的属性值
完整写法
v-bind:xxx='yyy' // yyy会作为表达式解析执行
1
简洁写法
:xxx='yyy'
1
单向数据绑定
语法:v-bind:href ="xxx" 或简写为 :href ="xxx"
特点:数据只能从 data 流向页面
双向数据绑定 指令 v-model
语法:v-mode:value="xxx" 或简写为 v-model="xxx"
特点:数据不仅能从 data 流向页面,还能从页面流向 data
4. 指令语法:绑定事件监听 v-on:
功能:绑定指定事件名的回调函数
完整写法
v-on:click='xxx'
v-on:keyup='xxx(参数)'
v-on:keyup.enter='xxx'
简洁写法
@click='xxx'
@keyup='xxx'
@keyup.enter='xxx'
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。