Vue模板语法

最新推荐文章于 2019-07-03 10:04:08 发布

weixin_30715523

最新推荐文章于 2019-07-03 10:04:08 发布

阅读量61

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qixidi/p/10126284.html

本文深入探讨Vue.js的模板语法，包括文本插值、原始HTML处理、特性绑定及JavaScript表达式支持。详解如何利用v-once、v-html、v-bind指令及事件修饰符优化前端开发，提升DOM操作效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue使用基于HTML的模板语法，允许开发者声明式的将DOM绑定至底层Vue实例的数据。

在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够智能的计算出最少需要重新渲染多少组件，并把DOM操作次数减少到最少。

(1)文本插值：


&lt;span&gt;Message: {{ message }}&lt;/span&gt;

使用v-once指令，可以执行一次性插值。当数据改变时，插值处的内容不会更新。


&lt;span v-once&gt;这个将不会改变：{{ message }}&lt;/span&gt;

(2)原始HTML
双大括号会将数据解释为普通文本，而非HTML代码，为输出正确的HTML，需要使用v-html指令：


&lt;p v-html="rawHtml"&gt;&lt;/p&gt;

这个p元素的内容会被替换成rawHtml属性值。直接作为HTML会忽略解析属性中的数据绑定。

(3)特性
Mustache语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令。


&lt;div v-bind:id="dynamicId"&gt;&lt;/div&gt;

在布尔特性的情况下，它们的存在即暗示为true，v-bind工作起来略有不同，在这个例子中：


&lt;button v-bind:disabled="isBtn"&gt;&lt;/button&gt;

如果isBtn的值为null，undefined或者false，则disabled属性甚至不会包含在渲染出来的<button>元素。

(4)使用JavaScript表达式
实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。


{{ number + 1 }}
{{ ok ? 'yes' : 'no' }}
{{ message.splite('').reverse().join('') }}
&lt;div v-bind:id="'list-' + id"&gt;&lt;/div&gt;

指令特性的值预期是单个 JavaScript 表达式。指令的职责是当表达式的值发生改变时，将其产生的连带影响，响应式的作用于DOM.
(1)参数
一些指令能够接受一个"参数"，在指令名称之后以冒号表示。


&lt;a v-bind:href="url"&gt;...&lt;/url&gt;

修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊的形式绑定。例如：


&lt;form v-on:submit.prevent="onSubmit"&gt;&lt;/form&gt;

上述修饰符告诉v-on指令对于触发事件调用event.preventDefault()

v-bind ---> :
v-on ---> @

来源：https://segmentfault.com/a/1190000016839229

转载于:https://www.cnblogs.com/qixidi/p/10126284.html