vue学习（2）——计算、监听、事件、表单和组件

一、vue.js计算属性

计算属性关键词: computed。 计算属性在处理一些复杂逻辑时是很有用的。

可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

使用 computed 性能会更好，如果不希望缓存可以使用 methods 属性。

关于缓存（点击参考，感谢原作者）：JS浏览器根据请求会去判断是否有缓存，内容（相关依赖）是否更新，再去下载。所以，如果computed属性所指对象在第一次缓存，第二次调用时没有更新，将用原来的缓存，不再重复执行代码。

例如：

var cnt=1; var vm = new Vue({ el: '#app', data: { message: 'Runoob!' }, computed: { //只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。 //计算属性的 getter reversedMessage: function () { //`this` 指向 vm 实例 cnt+=1; //第二次因为 vm 对象没有发生改变，于是界面渲染就直接用cnt=2这个值，不再重复执行代码。 return cnt+this.message.split('').reverse().join('') } }, methods: { //methods没有这个缓存，只要用一次，函数代码就执行一次，于是每次返回值都不一样。 reversedMessage2: function () { cnt+=1; return cnt+this.message.split('').reverse().join('') } } })

computed 属性默认只有 getter ，不过在需要时可以提供一个 setter 。 setter重新设置了data里属性值，所有有调用这个属性的，都会更新。

var vm = new Vue({ el: '#app', data: { name: 'Google', url: 'http://www.google.com' }, computed: { site: { //site里俩个函数get和set // getter get: function () { //return就是getter函数标志 return this.name + ' ' + this.url }, // setter set: function (newValue) { //改变对象值就是setter函数 var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } }) // 调用 setter， vm.name 和 vm.url 也会被对应更新 vm.site = '百度 http://www.baidu.com'; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url); 运行结果： 百度 http://www.baidu.com name:百度 url:http://www.baidu.com

二、vue.js监听

1.监听属性 watch

Vue.js 监听属性 watch：响应数据的变化。

<div id = "computed_props"> 千米 : <input type = "text" v-model = "kilometers"> 米 : <input type = "text" v-model = "meters"> </div> <p id="info"></p> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { kilometers : 0, meters:0 }, watch : { kilometers:function(val) { this.kilometers = val; this.meters = this.kilometers * 1000 }, meters : function (val) { this.kilometers = val/ 1000; this.meters = val; } } }); // $watch 是一个实例方法 vm.$watch('kilometers', function (newValue, oldValue) { // 这个回调将在 vm.kilometers 改变后调用 document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue; }) </script>

2.事件监听 v-on

（1）v-on指令

<div id="app"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div> <script> new Vue({ el: '#app', data: { counter: 0 } }) </script>

（2）接受方法

<div id="app"> <button v-on:click="greet">Greet</button> // `greet` 是在下面定义的方法名 </div> <script> var app = new Vue({ el: '#app', data: { name: 'Vue.js' }, methods: { #在 `methods` 对象中定义方法 greet: function (event) { #`this` 在方法里指当前 Vue 实例 alert('Hello ' + this.name + '!') #`event` 是原生 DOM 事件,event.target返回源对象 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接调用方法 app.greet() // -> 'Hello Vue.js!' </script>

（3）内联JS语句

<div id="app"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> <script> new Vue({ el: '#app', methods: { say: function (message) { alert(message) } } }) </script>

3.修饰符

（1）事件修饰符

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

事件修饰符：

.stop：就是js中的event.stopPropagation()的缩写,它是用来阻止冒泡的 <!-- 阻止单击事件冒泡，不会一直传递，运行结束就是结束--> <a v-on:click.stop="doThis"></a> .prevent:就是js中event.preventDefault()的缩写,它是用来阻止默认行为的 <!-- 提交事件不再重载页面 ，submit不会提交--> <form v-on:submit.prevent="onSubmit"></form> .capture:捕获优先权——在传递的父子事件中，加了这个，无论先点哪个，都先执行这个。 <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> .self：就是防止父元素（设置了该修饰符）的子元素的事件冒泡到父元素上，只有本身触发时才会执行事件处理程序（函数） <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div> .once：每次页面重载后只会执行一次。 <!-- click 事件只能点击一次 --> <a v-on:click.once="doThis"></a>

修饰符可以串联 ：

<a v-on:click.stop.prevent="doThat"></a>

只有修饰符 ：

<form v-on:submit.prevent></form>

捕获事件和冒泡事件(默认)是两种事件流,事件捕获是从document到触发事件的那个元素;冒泡事件是从下向上的触发事件

（2）按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit">

Vue 为最常用的按键提供了别名:

.enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta

例子：

<p><!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>

三、vue.js表单

v-model 指令在表单控件元素上创建双向数据绑定。

1.输入框input

<input v-model="message" placeholder="编辑我……">

2.文本区域框

<textarea v-model="message2" placeholder="多行文本输入……"></textarea>

3.复选框

<div id="app"> <p>单个复选框：</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多个复选框：</p> <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"> <label for="runoob">Runoob</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>选择的值为: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script>

4.单选按钮

<input type="radio" id="runoob" value="Runoob" v-model="picked"> <label for="runoob">Runoob</label>

5.select列表

<div id="app"> <select v-model="selected" name="fruit"> <option value="">选择一个网站</option> <option value="www.runoob.com">Runoob</option> <option value="www.google.com">Google</option> </select> <div id="output"> 选择的网站是: {{selected}} </div> </div> <script> new Vue({ el: '#app', data: { selected: '' } }) </script>

6.修饰符

（1）.lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >

（2）.number 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

（3）.trim 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

四、vue.js组件

组件（Component）可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

1.全局组件

所有实例都能用全局组件。

<div id="app"> <runoob></runoob> </div> <script> // 注册 Vue.component('runoob', { template: '<h1>自定义组件!</h1>' }) // 创建根实例 new Vue({ el: '#app' }) </script>

2.局部组件

在实例选项中注册局部组件，这样组件只能在这个实例中使用。

<div id="app"> <runoob></runoob> </div> <script> var Child = { template: '<h1>自定义组件!</h1>' } // 创建根实例 new Vue({ el: '#app', components: { // <runoob> 将只在父模板可用 'runoob': Child } }) </script>

3.Prop

prop 是父组件用来传递数据的一个自定义属性。 父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”。

<div id="app"> <child message="hello!"></child> </div> <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 "this.message" 这样使用 template: '<span>{{ message }}</span>' }) // 创建根实例 new Vue({ el: '#app' }) </script>

待思考！

五、vue.js自定义指令

注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

<div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus> </div> <script> // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } }) // 创建根实例 new Vue({ el: '#app' }) </script>

使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用：

<div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus> </div> <script> // 创建根实例 new Vue({ el: '#app', directives: { // 注册一个局部的自定义指令 v-focus focus: { // 指令的定义 inserted: function (el) { // 聚焦元素 el.focus() } } } }) </script>

钩子

1.钩子函数

●bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

●inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

●update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

●componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

●unbind: 只调用一次， 指令与元素解绑时调用。

2.钩子函数参数

●el: 指令所绑定的元素，可以用来直接操作 DOM 。

●binding: 一个对象，包含以下属性： ●name: 指令名，不包括 v- 前缀。 ●value: 指令的绑定值， 例如： v-my-directive=“1 + 1”, value 的值是 2。 ●oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 ●expression: 绑定值的表达式或变量名。 例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。 ●arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。 ●modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

●vnode: Vue 编译生成的虚拟节点。 ●oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

有时候不需要其他钩子函数，可以简写函数，如下格式：

Vue.directive('runoob', function (el, binding) { // 设置指令的背景颜色 el.style.backgroundColor = binding.value.color })

指令函数可接受所有合法的 JavaScript 表达式，以下实例传入了 JavaScript 对象：

<div id="app"> <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div> </div> <script> Vue.directive('runoob', function (el, binding) { // 简写方式设置文本及背景颜色 el.innerHTML = binding.value.text el.style.backgroundColor = binding.value.color }) new Vue({ el: '#app' }) </script>