Vue.js 模板语法笔记四

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

   

笔记

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

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

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

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

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

双向数据绑定

   

{{ message }}

   

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

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

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

字符串反转

   

{{ message }}

    反转字符串