Vue.js 2.0 使用一种基于模板的语法，通过这种语法你可以轻松地将数据渲染到 DOM 中，并实现条件渲染、循环渲染等功能。以下是 Vue.js 2.0 中常用的模板语法：

1. 插值

使用双花括号 {{}} 进行数据插值，将数据渲染到模板中：
<div id="app">
  <p>{{ message }}</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

2. 指令

Vue.js 使用指令来添加特殊的行为。常见的指令有：

  •  v-bind：用于动态绑定 HTML 属性。

  <a v-bind:href="url">Visit my website</a>
  var app = new Vue({
    el: '#app',
    data: {
      url: 'https://example.com'
    }
  });

  •  v-model：用于实现表单元素与数据的双向绑定。

  <input v-model="message">
  var app = new Vue({
    el: '#app',
    data: {
      message: ''
    }
  });

  •  v-if 和 v-else：用于条件性地渲染元素。

  <p v-if="seen">Now you see me</p>
  <p v-else>Now you don't</p>
  var app = new Vue({
    el: '#app',
    data: {
      seen: true
    }
  });

  •  v-for：用于循环渲染数组或对象。

  <ul>
    <li v-for="item in items">{{ item.text }}</li>
  </ul>
  var app = new Vue({
    el: '#app',
    data: {
      items: [
        { text: 'Item 1' },
        { text: 'Item 2' },
        { text: 'Item 3' }
      ]
    }
  });

3. 事件处理

使用 v-on 指令来监听 DOM 事件，执行相应的方法。
<button v-on:click="doSomething">Click me</button>
var app = new Vue({
  el: '#app',
  methods: {
    doSomething: function () {
      // 处理点击事件的逻辑
    }
  }
});

4. 计算属性

使用 computed 属性来定义计算属性，这些属性的值会根据依赖的数据动态计算而来。
<p>{{ reversedMessage }}</p>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
});

这些是 Vue.js 2.0 中常见的模板语法和指令。你可以根据具体的需求和场景灵活运用这些语法，通过数据驱动视图，构建交互丰富的前端应用。


转载请注明出处：http://www.zyzy.cn/article/detail/4797/Vue