Vue.js 模板语法笔记四

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<div id="app">

    <pre><a v-bind:href="url">笔记</a></pre>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    url: 'http://www.stu.com'

  }

})

</script>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">

在这里参数是监听的事件名。

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

双向数据绑定

<div id="app">

    <p>{{ message }}</p>

    <input v-model="message">

</div>

<script>

new Vue({

  el: '#app',

  data: {

    message: 'Run!'

  }

})

</script>

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

按钮的事件可以使用 v-on 监听事件，并对用户的输入进行响应。

以下实例在用户点击按钮后对字符串进行反转操作：

字符串反转

<div id="app">

    <p>{{ message }}</p>

    <button v-on:click="reverseMessage">反转字符串</button>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    message: 'Run!'

  },

  methods: {

    reverseMessage: function () {

      this.message = this.message.split('').reverse().join('')

    }

  }

})

</script>