一、插值
- 文本：数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值。
<div id="app"> <p>{{ message }}</p> </div>
- v-html：使用 v-html 指令用于输出 html 代码。
<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>HELLO VUE!</h1>' } }) </script>
- 属性：HTML 属性中的值应使用 v-bind 指令。
需求：判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类。
.class1 { background:#444; color: #eee; } <div id='app'> <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"> <br><br> <div v-bind:class="{'class1': use}"> v-bind:class指令 </div> </div> <script> var vm = new Vue({ el: '#app', data:{ use: false }, }) </script>
二、指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
参数：在指令后以冒号 : 声明 。
v-bind 指令被用来响应的更新 HTML 属性。在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
<div id="app"> <a v-bind:href="url">百度</a> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.runoob.com' } }) </script>
- 修饰符：以 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
<form v-on:submit.prevent="onSubmit"></form>
三、用户输入
- 在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定。
<div id='app'> <p>{{msg}}</p> <input v-model='msg'> </div> var vm = new Vue({ el: '#app', data:{ msg: 'Hello vue.' } })
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定元素的值。
按钮的事件可以使用 v-on 监听事件，并对用户的输入进行响应。
需求：在用户点击按钮后对字符串进行反转操作。
<div id='app'> <p>{{msg}}</p> // 参数是监听的事件名 <button v-on:click="reverseMessage">反转字符串</button> </div> var vm = new Vue({ el: '#app', data:{ msg: 'Hello vue.' }, methods:{ reverseMessage: function(){ // `this` 指向 vm 实例 this.msg = this.msg.split('').reverse().join('') } } })
四、过滤器
Vue.js 允许自定义过滤器，被用作一些常见的文本格式化。由 ‘管道符’ 指示。
格式：
在两个大括号中 {{ msg1 | msg2 }}
在 v-bind 指令中 <div v-bind:id="ID1 | ID2"> </div>
对输入的字符串第一个字母转为大写
<div id='app'> {{msg | capitalize}} </div> var vm = new Vue({ el: '#app', data:{ msg: 'hello vue.' }, filters:{ capitalize: function(value){ if(!value) return '' // 转为字符串 value = value.toString() // 返回 第一个字符转为大写 + 后面的字符 return value.charAt(0).toUpperCase() + value.slice(1) } } })
过滤器是 JavaScript 函数，因此可以接受参数：{{ message | filterA('arg1', arg2) }}
- 第一个参数是 message
- 字符串 ‘arg1’ 将传给过滤器作为第二个参数
- arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
五、缩写
- v-bind 缩写
<!-- 完整语法 --> <a v-bind:href="url"></a>
<!-- 缩写 --> <a :href="url"></a>
- v-on 缩写
<!-- 完整语法 --> <a v-on:click="doSomething"></a>
<!-- 缩写 --> <a @click="doSomething"></a>
不积跬步无以至千里 不积小流无以成江海
