Vue day02 Computed和Watch
1.事件绑定
可以用 v-on 指令监听DOM 事件，并在触发时运行一些 JavaScript 代码。v-on 还可以接收一个需要调用的方法名称。
methods: {
handler: function (event) {
if (event) { alert(event.target.tagName) } //event是原生 DOM 事件
}
}
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法，通过$event传递原生事件对象：
methods: { say: function (message,event) { alert(message) } }
由于事件绑定在vue中使用概率较大，所以这里提供了简写形式
事件参数
在事件调用时，可以进行参数的传递 :
### 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 事件细节，通过事件修饰符来完成这些细节。
常见修饰符如下
.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 指令在表单
、