vue模板语法

模板的理解

1动态的 html 页面

2包含了一些 JS 语法代码

a.双大括号表达式

b.指令(以 v-开头的自定义标签属性)

双大括号表达式

1语法: {{exp}}

2功能: 向页面输出数据

3可以调用对象的方法

指令一: 强制数据绑定

1功能: 指定变化的属性值

2完整写法:

v-bind:xxx='yyy' //yyy 会作为表达式解析执行

3简洁写法:

:xxx='yyy'

 指令二: 绑定事件监听

1功能: 绑定指定事件名的回调函数

2完整写法:

v-on:keyup='xxx'

v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'

3简洁写法:

@keyup='xxx' @keyup.enter='xxx'

计算属性和监视

计算属性

1在 computed 属性对象中定义计算属性的方法

2在页面中使用{{方法名}}来显示计算的结果

监视属性

1通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性

2当属性变化时, 回调函数自动调用, 在函数内部进行计算

计算属性高级

1通过 getter/setter 实现对属性数据的显示和监视

2计算属性存在缓存, 多次读取只执行一次 getter 计算

class 与 style 绑定

理解

1在应用界面中, 某个(些)元素的样式是变化的

2class/style 绑定就是专门用来实现动态样式效果的技术

class 绑定

1:class='xxx'

2表达式是字符串: 'classA'

3表达式是对象: {classA:isA, classB: isB}

4表达式是数组: ['classA', 'classB']

style 绑定

1:style="{ color: activeColor, fontSize: fontSize + 'px' }"

2其中 activeColor/fontSize 是 data 属性

条件渲染

条件渲染指令

1v-if 与 v-else

2v-show