Vue的指令和事件处理

今天我学习了Vue的指令和事件处理。Vue的指令可以让我们在DOM中添加一些逻辑处理，例如v-if可以根据表达式的值决定是否显示元素，v-for可以根据数组的内容创建多个元素：

<ul>

  <li v-for="item in items">{{ item }}</li>

</ul>

 

<p v-if="show">This is shown if show is true.</p>

 

除了指令，Vue还提供了事件处理，可以像普通的JavaScript事件一样添加回调函数：

<button v-on:click="handleClick">Click me</button>

 

然后在Vue实例定义相应的方法：

var app = new Vue({

  el: '#app',

  data: {

    show: false,

    items: ['item1', 'item2', 'item3']

  },

  methods: {

    handleClick: function(event) {

      console.log('button clicked!')

    }

  }

})

 

明天我将继续学习Vue的组件和父子组件的通信。