Vue.js 模板化

模板允许将模型中的值绑定到视图中,在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在所有封面中,因为在将该值发送到视图之前应用过滤器。

See on JSFiddle

Published At
Categories with 技术
Tagged with
comments powered by Disqus