Vue day02 Computed和Watch

1.事件綁定
可以用 v-on 指令監聽DOM 事件，并在觸發時運行一些 JavaScript 代碼。v-on 還可以接收一個需要調用的方法名稱。
<button v-on:click="handler">good</button>
methods: {
handler: function (event) {
if (event) { alert(event.target.tagName) } // event 是原生 DOM 事件
}
}
除了直接綁定到一個方法，也可以在內聯 JavaScript 語句中調用方法，通過$event傳遞原生事件對象：
<button v-on:click="say('hi',$event)">Say hi</button>
methods: { say: function (message,event) { alert(message) } }
由于事件綁定在vue中使用概率較大，所以這里提供了簡寫形式
<button @click=“say(‘hi’,$event)”>Say hi

事件參數
在事件調用時，可以進行參數的傳遞 :
### html代碼
<div id="app"><el-button @click="toAdd" type="primary" size="small">新增</el-button><div><el-table type="index" size="small" :data="tableData" style="width: 50%"><el-table-column  prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="small" @click="toEdit(scope.row)" type="primary">編輯</el-button><el-button size="small" type="danger" @click="toDelete(scope.row.id)">刪除</el-button></template></el-table-column></el-table></div><el-dialog :title="title" :visible.sync="dialogFormVisible"><el-form :model="form"><el-form-item  label="時間" :label-width="formLabelWidth"><el-input v-model="form.date" autocomplete="off"></el-input></el-form-item><el-form-item label="姓名" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="地址" :label-width="formLabelWidth"><el-input v-model="form.address" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">確 定</el-button></div></el-dialog></div>
### js代碼
<script>new Vue({el: "#app",data: {dialogFormVisible: false,formLabelWidth: "120px",form: {},title: '',tableData: [{id: 1,date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {id: 2,date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1517 弄'}, {id: 3,date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1519 弄'}, {id: 4,date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1516 弄'}]},methods: {toAdd() {this.dialogFormVisible = true;this.form = {};this.title = '新增數據'},toEdit(row) {this.form = { ...row };this.dialogFormVisible = true;this.title = '修改數據';},toDelete(id) {this.$confirm('此操作將永久刪除該文件, 是否繼續?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.tableData.splice(id,1)this.$message({type: 'success',message: '刪除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消刪除'});});}}})</script>

進行事件綁定時，可以將v-on:事件名縮寫為**@事件名**，此方式經常使用 :

事件修飾符

事件修飾符
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。Vue提供了更好的方式：事件處理函數只有純粹的數據邏輯，而不是去處理 DOM 事件細節，通過事件修飾符來完成這些細節。

<button v-on:click.prevent="handler">點我點我</button>

常見修飾符如下
.stop 停止事件冒泡
.prevent 阻止事件默認行為
.capture 在事件捕獲階段執行事件處理函數
.self 只當在 event.target 是當前元素自身時觸發處理函數
.once 事件處理函數執行一次后解綁
.passive 滾動事件的默認行為 (即滾動行為) 將會立即觸發，一般與scroll連用，能夠提升移動端的性能
按鍵修飾符
一般與keyup事件類型配合使用
.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right
.ctrl、.alt、.shift、.meta
鼠標修飾符mouseup事件
.left、.right、.middle

### js代碼
new Vue({el: "#app",data: {msg: '事件修飾符'},methods: {keyupHandle() {console.log('按下某些特殊鍵');},toJump() {console.log('跳轉');alert(1);},outer(e) {// e.target是觸發事件的源頭元素，目標元素// e.currentTarget 當前執行事件處理程序的元素，當前目標元素// console.log('outer', e.target, e.currentTarget);console.log('outer')for (let i = 0; i < 100; i++) {console.log(i);}},inner(e) {// e.stopPropagation();// console.log('inner', e.target, e.currentTarget);console.log('inner');}}})
### html代碼
<div id="app"><!-- <input type="text" @keyup.enter="keyupHandle"> --><input type="text" @keyup.13="keyupHandle"><!-- <input type="text" @mouseup.left="keyupHandle"> -->{{msg}}<a @click.prevent="toJump" href="http://www.baidu.com">百度一下</a><!-- 點擊inner   event.target   --><!-- <div class="outer" @click.self.once="outer"> --><!-- <div class="outer" @click.self="outer"> --><!-- <div class="outer" @click.capture="outer"> --><div class="outer" @scroll.passive="outer">outer<div class="inner" @click="inner"><!-- <div class="inner" @click.stop="inner"> -->inner</div></div></div>

表單

可以用 v-model 指令在表單 <input>、<textarea>及 <select>元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，并對一些極端場景進行一些特殊處理。使用v-model綁定了值，那么name屬性就可以不用寫了。

### html代碼
<div id="app">{{msg}}<br>{{stu}}<br><!-- 用戶名：<input type="text" v-model.lazy="stu.username"> -->用戶名：<input type="text" v-model.trim="stu.username"><br><!-- .number修飾符，可以將采集到的數據轉為number類型，然后再存儲到數據模型中 -->年齡：<input type="text" v-model.number="stu.age"><br><!-- 性別 -->性別：<input type="radio" value="male" v-model="stu.gender">男<input type="radio" value="female" v-model="stu.gender">女<br><!-- 愛好 -->愛好：<input type="checkbox" value="basketball" v-model="stu.hobby">籃球<input type="checkbox" value="swimming" v-model="stu.hobby">游泳<input type="checkbox" value="dancing" v-model="stu.hobby">跳舞<br><!-- 城市 -->城市：<!-- <select multiple v-model="stu.city"> --><select v-model="stu.city"><option value="shanghai">上海</option><option value="beijing">北京</option><option value="guangzhou">廣州</option></select><br><!-- 簡介 -->簡介：<textarea v-model="stu.info" cols="30" rows="10"></textarea></div>
### js代碼new Vue({el: '#app',data: {msg: 'hello',stu: {// 復選框hobby: []}},methods: {}})

watch(監聽器監聽屬性)

當需要在數據變化時執行異步或開銷較大的操作時，使用監聽器是最有用的

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過 watch 選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。

### html代碼
<div id="app">{{msg}}<br>a：<input type="text" v-model.number="a"><br>+<br>b：<input type="text" v-model.number="b"><br>=<br><output>{{total}}</output></div>
### js代碼new Vue({el: '#app',data: {msg: 'hello',a: 0,b: 0,total: 0},methods: {},// 監聽  偵聽watch: {a(newValue, oldValue) {this.total = this.a + this.b;},b(newValue, oldValue) {this.total = this.b + this.a;}}})

### 深度監聽
### js代碼new Vue({el: '#app',data: {msg: 'hello',a: 1,obj: {name: 'zhangsan',age: 12},},watch: {a(newValue, oldValue) {console.log('a數據發生變化...');},/* obj(newValue, oldValue) {console.log('obj數據發生變化...');} */// 深度監聽obj: {handler(newValue, oldValue) {console.log('obj數據發生變化...');},// 深度監聽deep: true}},methods: {changeObj() {// 更改內部數據this.obj.name = 'lisi';}}})
### html代碼<div id="app">{{msg}}<br>{{obj}}<button @click="changeObj">更改obj</button></div>

computed（計算屬性）

計算屬性有依賴關系的數據

我們希望一個變量是經過某種計算然后輸出而不是直接輸出的時候可以使用到計算屬性
計算屬性是基于它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。而每次調用函數都會導致函數的重新執行。

 ### html代碼
<div id="app">{{msg}}<br>a：<input type="text" v-model.number="a"><br>+<br>b：<input type="text" v-model.number="b"><br>=<br>{{total}}</div>	
### js代碼new Vue({el: '#app',data: {msg: 'hello',a: 0,b: 0,// total: 0},// 計算屬性computed: {total(){console.log('計算屬性');// return 111return this.a+this.b}},methods: {}})

面試題
*** watch和computed的區別 computed1. 具有緩存性，頁面重新渲染值不變化,計算屬性會立即返回之前的計算結果，而不必再次執行函數2.計算屬性計算某一個屬性得變化,如果某一個值改變了，計算屬性會見監聽到進行返回watch1. 監聽值的變化，執行異步操作【axios請求】’$route.query‘:{this.loadArticle()}2. 無緩存性，只有當當前值發生變化時才會執行/響應

console.log('計算屬性');// return 111return this.a+this.b}},methods: {}
})


```javascript
面試題
*** watch和computed的區別 computed1. 具有緩存性，頁面重新渲染值不變化,計算屬性會立即返回之前的計算結果，而不必再次執行函數2.計算屬性計算某一個屬性得變化,如果某一個值改變了，計算屬性會見監聽到進行返回watch1. 監聽值的變化，執行異步操作【axios請求】’$route.query‘:{this.loadArticle()}2. 無緩存性，只有當當前值發生變化時才會執行/響應