Vue.js 模板语法

Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

文本

数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:

<div id="app">
  <p>{{ message }}</p>
</div>
			

例:

<!DOCTYPE html>
<html>
  <head>
    <title>MyWeb</title>
    <meta charset="utf-8">
    <script src="/js/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Word!'
        }
      })
    </script>
  </body>
</html>
			

html

使用 v-html (vue-html)指令用于输出 html 代码:

<!DOCTYPE html>
<html>
  <head>
    <title>MyWeb</title>
    <meta charset="utf-8">
    <script src="/js/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-html="message"</div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: '<h1>Hello World!</h1>'
        }
      })
    </script>
  </body>
</html>
			

属性

HTML 属性中的值应使用 v-bind (vue bind[baɪnd]绑定)指令。

<!DOCTYPE html>
<html>
  <head>
    <title>MyWeb</title>
    <meta charset="utf-8">
    <script src="/js/vue.min.js"></script>
    <l;style>
      .class1 {
        color: red;
        background: 1px solid black;  
      }
    </style>
  </head>
  <body>
    <div id="app">
      <label for="isCheck">选择</label>
      <input type="checkbox" v-model="use" id="isCheck">
      <div v-bind:class="{'class1': use}">
        看我变化
      </div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          use: false
        }
      })
    </script>
  </body>
</html>