Vue-模板语法

模板语法

        Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue模板因而从实际上不同于基于字符串的模板。

        Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

        结合响应系统，在应用状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

一、插入值

1、文本

        数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

        Mustache 标签将会被替代为对应数据对象上 msg 属性的值。绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

        通过使用v-once 指令（指令将在后续章节介绍），执行一次性地插值，当数据改变时，插值处的内容不会更新。但这会影响到该节点上的其它数据绑定或者在花括号中使用*也可以做到一次性插值。

2、原始HTML

        双大括号会将数据解释为普通文本，而非HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令或使用三花括号{{{ rawHtml }}}：

        结果：

3、HTML特性

        Mustache标签也可以用在Html的属性内：

        但是在一些特殊特性内和Vue.js指令中不能使用插值，如果用错地方Vue.js会给出警告。

4、JavaScript表达式

        对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

        这些表达式会在所属Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子将不会生效。

二、指令

        指令(Directives) 是带有 v- 前缀的特殊特性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。指令特性的值预期是单个JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。

        这里v-if 指令将根据表达式 seen 的值的真假来插入/移除元素。当v-if的值为true时也没初始化渲染时将会插入元素否则会被移除。

1、参数

        参数在指令后以冒号指明。例如，v-bind指令被用来响应地更新 HTML 属性：

     在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

2、修饰符

        修饰符(Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

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

3、缩写

        v-前缀是一种标识模板中特定的Vue特性的视觉按时。

        在构建单页应用时，Vue.js会管理所有的模板此时v-前缀就没那么重要。

        Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写。

三、用户输入

        在input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

        这样，就将input与p标签进行了绑定，input的值改变，p标签的文本也会被改变。