模版: 基于html,能够声明式地将其组件实例的数据绑定到呈现的 DOM 上
文本插值: {{msg}}
双大括号标签会被替换为相应组件实例中 msg
属性的值。同时每次 msg
属性更改时它也会同步更新。
v-html: 能够将数据解释为Html,在当前组件实例上,将此元素的 innerHTML 与 响应式变量 属性保持同步,不能用于拼接组合模版,存在xss漏洞。
v-bind: attribute属性绑定,v-bind
可以简写为:
,开头为 :
的 attribute 和一般的 HTML attribute 看起来不太一样,但它的确是合法的 attribute 名称字符,并且所有支持 Vue 的浏览器都能正确解析它。此外,他们不会出现在最终渲染的 DOM 中。
同名简写:<div :id></div> <!-- 与 :id="id" 相同 -->
布尔型 attribute: 依据 true / false 值来决定 attribute 是否应该存在于该元素上; 为真值或一个空字符串 (即 <button disabled="">
) 时,元素会包含这个 disabled
attribute。而当其为其他假值时 attribute 将被忽略。
(即所有除 false
、0
、-0
、0n
、""
、null
、undefined
和 NaN
以外的皆为真值)这个是js的定义,但是在vue中空字符串是会判定为真的。
绑定多个属性: v-bind="{id:"id",class:"class"}"
能够绑定一个对象作为元素的属性,key对应属性,value对应属性值。
使用 JavaScript 表达式: 只能支持单一的表达式,就是能够计算出一个明确的值的表达式,可以在{{}}, 属性中使用js表达式,还可以调用函数,绑定在表达式中的方法在组件每次更新时都会被重新调用,因此不应该产生任何副作用(依赖型响应式变量),比如改变数据或触发异步操作。
受限的全局访问 模板中的表达式将被沙盒化,仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象,比如 Math
和 Date
。
没有显式包含在列表中的全局对象将不能在模板内表达式中访问,例如用户附加在 window
上的属性。然而,你也可以自行在 app.config.globalProperties
上显式地添加它们,供所有的 Vue 表达式使用。
指令参数: 如 v-bind:href、v-on:click ,v-开头的事指令,后面携带的是参数,它表示着对属性或事件的操作
动态指令: :[attributeName],attributeName可以一个js表达式,表达式的结果应当是字符串或null(移除绑定)
动态参数表达式因为某些字符的缘故有一些语法限制,比如空格和引号,在 HTML attribute 名称中都是不合法的。例如这个是不合法的<a :['foo' + bar]="value">,如果需要可以使用computed
指令修饰符: 修饰符是以点开头的特殊后缀,表明指令需要以一些特殊的方式被绑定。例如 .prevent
修饰符会告知 v-on
指令对触发的事件调用 event.preventDefault()
:<form @submit.prevent="onSubmit">...</form>