vue学习过程总结（03） - 菜鸟教程归纳
1.模板语法
1.1.文本插值，数据绑定。{{}}，如：
<p>{{ message }}</p>
1.2.输出HTML代码。v-html，如：
<div v-html="message"></div>
1.3.HTML属性值绑定。 v-bind，如：
<div id="app"> <pre><a v-bind:href="url">菜鸟教程</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.runoob.com' } }) </script>
缩写：
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>
1.4.判断指令。v-if，如：
<div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script> new Vue({ el: '#app', data: { seen: true } }) </script>
1.5.监听DOM事件。 v-on，如：
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
1.6.双向数据绑定。v-model，用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。如：
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' } }) </script>
1.7.if else指令：v-if, v-else； else if指令：v-if, v-else-if, v-else;
1.8.使用 v-show 指令来根据条件展示元素。如：
<h1 v-show="ok">Hello!</h1>
1.9.循环使用 v-for 指令。可以用来迭代数组，对象，整数如：
<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>
1.10.计算属性。computed，如：
<div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Runoob!' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) </script>
computed与methods的区别：我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
computed setter：computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
1.11.v-bind:class= 与 v-bind:style= https://www.runoob.com/vue2/vue-class-style.html
2.修饰符
2.1.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。. （半角句号）。如：
<!--event.preventDefault() 阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。--> <form v-on:submit.prevent="onSubmit"></form>
2.2.事件修饰符。
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。Vue.js通过由点(.)表示的指令后缀来调用修饰符。如：.stop/.prevent/.capture/.self/.once
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div> <!-- click 事件只能点击一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a>
2.3.按键修饰符。
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit">
Vue 为最常用的按键提供了别名：
<!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit">
.enter/.tab/.delete(捕获 "删除" 和 "退格" 键)/.esc/.up/.down/.left/.right/.ctrl/.alt/.shift/.meta
3.过滤器
3.1.过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：
<div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>
4.监听属性。
4.1.Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。如：
<div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click = "counter++" style = "font-size:25px;">点我</button> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#app', data: { counter: 1 } }); vm.$watch('counter', function(newval, oldval) { alert('计数器值的变化 :' + oldval + ' 变为 ' + newval + '!'); }); </script>
Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，监听数值counter，如果发生改变则弹出提示框。
