Vue.js 模板语法

在Vue.js中，模板语法是非常重要的一部分，它允许我们将数据绑定到DOM元素上，实现动态渲染页面的效果。Vue.js模板语法主要包括插值、指令和事件处理等内容。

插值

插值是Vue.js中最基本的模板语法，通过双大括号{{}}来插入数据。例如：

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

在上面的例子中，message是一个在Vue实例中定义的数据，当数据发生变化时，页面上的内容也会实时更新。

指令

指令是Vue.js中用来操作DOM元素的特殊属性，以v-开头。常用的指令包括v-if、v-for、v-bind和v-on等。

<div id="app">
  <p v-if="isShow">这是一个显示的段落</p>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
  <img v-bind:src="imageUrl">
  <button v-on:click="handleClick">点击我</button>
</div>

在上面的例子中，v-if根据条件来控制元素的显示与隐藏，v-for用来循环渲染列表，v-bind用来绑定元素属性，v-on用来绑定事件处理函数。

事件处理

Vue.js提供了丰富的事件处理功能，可以通过v-on指令来绑定事件处理函数。

// www.javascriptcn.com code example
<div id="app">
  <button v-on:click="handleClick">点击我</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    handleClick() {
      alert('按钮被点击了');
    }
  }
});
</script>

在上面的例子中，当按钮被点击时，会弹出一个提示框显示"按钮被点击了"。

以上就是Vue.js模板语法的基本介绍，下一章节我们将介绍Vue.js的组件化开发。