模板语法(插值表达式)
数据绑定的最常见的形式是文本插值 {{ }}
指令
指令的作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM,一些指令能够接收一个参数,在指令名称之后以( : )形式去表示
v-bind
动态地绑定一个或多个属性,或一个组件prop到表达式
v-bind缩写为 ‘ :’
在绑定prop时,prop必须在子组件中声明
可以用修饰符指定不同地绑定类型
data属性
data必须声明为返回一个初始数据对象的函数(注意函数内返回的数据对象不要直接引用函数外的对象);否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次的数据。
v-for
通过v-for来遍历一个对象的property,可以循环一个数组,也可以是遍历一个对象,第一个参数value是被迭代的数组元素的别名,第二个参数为property名称(也称键名),第三个参数作为索引
key
当vue正在更新使用v-for渲染的元素列表时,默认使用“就地更新”的策略,如果数据项的顺序被改变,Vue将不会移动DOM元素来匹配数据项的顺序,而是就地更新每个元素,并且确保他们在每个索引位置正确渲染。
当数据改变触发渲染层重新渲染的时候,会校正带有key的组件,框架会确保它们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
如不提供:key,就会报一个warning,如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
计算属性computed
每一个计算属性都包含getter和一个setter,默认是利用getter来读取,所有getter和setter的this上下文自动地绑定vue实例
计算属性地getter
在模板中绑定表达式是非常便利地,但是它们实际上只用于简单地操作,在模板中放入太多地逻辑会让模板过重且难以维护,所以,对于任何复杂地逻辑,都应当使用计算属性。
v-text和v-html
v-html: 等价于innerHtml, 更新元素的 innerHTML。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
v-text: 等价于innerText, 用于渲染普通文本,无论何时,绑定的数据对象上 msg属性发生了改变,插值处的内容都会更新。
v-if与v-else
v-if 指令将根据表达式 isShow的值(true 或 false )来决定是否显示h4 元素。
v-if根据表达式的值的truthiness来条件地渲染元素,通过创建或销毁元素节点,来达到元素地显示与隐藏。
v-show
v-show不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS进行切换。
v-on
绑定事件监听器
v-model
在表单控件或者组件上创建双向绑定
v-pre
跳过这个元素和它的子元素的编译过程
v-cloak
这个指令保持在元素上直到关联实例结束编译