模板允许将模型中的值绑定到视图中,在Vue中,可以使用简单的HTML绑定来实现这一点。
从版本2开始,Vue.js允许原始JavaScript模板(React-style)除了HTML模板。
从这个 Vue.js Hello World 示例开始,让我们使用以下数据模型:
1data() {
2 return {
3 text: 'Hello world',
4 htmlContent: 'Hello bold new world!',
5 isDisabledAttr: true
6 }
7}
介入
Interpolation 是指采取一个或多个变量,评估其值,并在模板中显示结果的行为,它可以像一个Hello World字符串一样简单,但也可以是更复杂的表达式的结果。
文本
最基本的版本是使用双弯曲的轴承,通常被称为胡须语法,这将创建一个单向的数据连接从模型到模板,显示模板中的原始值。
一种方式绑定是指将数据从模型发送到视图的绑定方法,而不是相反的方式。
1<span>Text binding: {{ text }}</span><br>
上面的示例将简单地从数据模型中取出相应的文本值,并显示其值,而不是标签。
一次强制性
我们可以使用v-once指令来绑定一次并停止跟踪项目。
使用 v-once 意味着稍后对模型中的值进行更改不会影响模板中显示的值。
1<span v-once>Text binding: {{ text }}</span><br>
在这种约束中使用v-once 意味着如果后来更改了文本值,则范围标签中的值仍然显示了初始值。
原始HTML
使用先前讨论的方法绑定包含 HTML 标签的字符串将以简单的字符串形式打印表达式。
如果我们需要评估HTML中的标签,并且我们信任HTML的来源,我们可以使用v-html来要求Vue评估字符串为HTML。
1<span v-html="htmlContent"></span>
htmlContent中的内容将被评估为html,并在使用v-html指令时插入到 span。
属性
除了值之外,我们可以使用 Vue 模板添加属性到元素,而不是胡须语法,我们可以使用 v-bind 指令将模型中的值绑定为属性。
1<button v-bind:disabled="isDisabledAttr">
2 Disabled
3</button>
4
5<button :disabled="isDisabledAttr">
6 Disabled
7</button>
上面的示例从模型中取出isDisabledAttr,并将其设置为按钮标签上的禁用属性。
而不是使用v-bind:attr=modelValue语法,我们可以简单地使用更短的 :attr=modelValue语法来实现相同的效果。
JS 表达式
Vue 支持在数据绑定中评估简单表达式。
1<span>{{ text + ' ' + isDisabledAttr }}</span>
该示例打印了连接的字符串:Hello world true。
Vue 语法允许我们在双弯曲的内有一个表达式,而这不能包括控制流或多个表达式。
指令
Vue 提供了一组嵌入式指令,前缀为 v-,允许在模板内部进行 DOM 操作,以响应模型更改。
例如,v-if 指令会显示/隐藏基于模型值的元素。
我们可以创建自定义指令以及根据输入进行自定义 DOM 操作。
过滤器
可以与模型值一起使用过滤器来修改显示在视图中所给定的值。
例如,您可能希望在所有封面中显示一些文本,而不是修改或重复原始模型值,我们可以应用一个过滤器,该过滤器将动态转换显示值。
要做到这一点,我们需要创建一个过滤器:
1filters: {
2 allCaps: function (value) {
3 if (!value) return '';
4 value = value.toString();
5 return value.toUpperCase();
6 }
7}
allCaps函数简单地采取一个字符串并返回所有字符串的字符串。
在视图中,我们可以使用过滤器将显示值转换为升级,而不改变初始模型值。
1<span>{{ text | allCaps }}</span>
在这里,而不是在模型中存储的Hello World值,Vue 将显示HELLO WORLD在所有封面中,因为在将该值发送到视图之前应用过滤器。