模板语法

vue学习

Vue.js 使用基于 HTML 的模板语法，允许声明式地将要渲染的 DOM 和 Vue 实例中的 data 数据绑定。所有 Vue.js 的模板都是有效的 HTML，能够被遵循规范的浏览器和 HTML 解析器解析。

• 1. 插值的方法

     • 1.1 值为文本

  数据绑定最基本的形式，就是使用 “mustache” 语法（双花括号）的文本插值(text interpolation)：

  <span>Message: {{ msg }}</span>

  mustache 标签将会被替换为 data 对象上对应的 msg 属性的值。只要绑定的数据对象上的 msg 属性发生改变，插值内容也会随之更新。
  也可以通过使用 v-once 指令，执行一次性插值，也就是说，在数据改变时，插值内容不会随之更新。d但这也将影响到同一节点上的其他所有绑定：

  <span v-once>这里的值永远不会改变：{{ msg }}</span>

  • 1.2 值为原始HTML

  双花括号语法，会将数据中的 HTML 转为纯文本后再进行插值。为了输出真正的 HTML，你需要使用 v-html 指令：

  <p>使用双花括号语法：{{ rawHtml }}</p>
  <p>使用 v-html 指令：<span v-html="rawHtml"></span></p>

  输出结果：

  使用双花括号语法：<span>this is message</span>
  使用 v-html 指令：this is message

  如果不使用v-html指令，则会直接输出rawHtml中的内容，而不是将rawHtml中的html转换后输出，使用v-html指令后，span 中的内容，将会被替换为 rawHtml 属性的值，并且作为原始 HTML 插入。

  • 插的值在html属性中

  不能在 Vue 模板中的 HTML 属性上使用双花括号语法(mustache)。而是使用 v-bind 指令：

  <div v-bind:id="dynamicId"></div>

  <a v-bind:href="url"> ... </a>
  <a :href="url"> ... </a>

  <a v-on:click="doSomething"> ... </a>
  <a @click="doSomething"> ... </a>

  -