4. 绑定事件
2018-11-20 本文已影响0人
dwy_interesting
v-on:
v-on:change ---- 失去焦点
v-on:input ---- 输入
方法写入new Vue（{methods：{method1，method2，......}}）
例一：在input框输入后显示输入内容在输入框后
方法一：
<body>
<div id="app">
<!-- v-on: 可以缩写为@ -->
<input
type="text"
:value="inputValue"
v-on:input="handleInputChange"
>
{{inputValue}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
inputValue: ''
},
// 方法都写到这里来吧
methods: {
handleInputChange(e) {
console.log(e,e.data)
this.inputValue += e.data;
}
}
})
</script>
</body>
方法二：
<body>
<div id="app">
<!-- v-on: 可以缩写为@ -->
<input
type="text"
v-model="inputValue"
>
{{inputValue}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
inputValue: ''
}
})
</script>
</body>
例二：点击按钮实现数字加减
<body>
<div id="app">
<!-- v-on:XXXX 后面直接可以使用表达式 -->
<button
@click="number--"
>-</button>
{{number}}
<button
@click="number++"
>+</button>
<!-- 调用事件的时候，可以不加括号, 这时候Vue会自动把event参数传递过去 -->
<button
@click="reduce"
>-</button>
{{number1}}
<!-- 调用事件的时候，也可以加括号, 这时候已经没有event了, 必须必须必须传递$event为方法的参数 -->
<button
@click="add(5, $event)"
>+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
number: 10,
number1: 20
},
methods: {
// es6增强对象字面量
reduce(e) {
console.log(e)
this.number1--
},
add(count, e) {
console.log(e, count)
this.number1+=count
}
}
})
</script>
</body>
事件修饰符stop：点击b不会触发点击a
<body>
<div id="app">
<div class="a" @click="handleAClick">
<!-- 事件修饰符 -->
<!--.stop 阻止单击事件继续传播 (相当于阻止事件冒泡)-->
<div class="b" @click.stop="handleBClick">点一下试试</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
methods: {
handleAClick(e){
console.log('a被点击了', e)
},
handleBClick(e){
console.log('b被点击了', e)
}
}
})
</script>
</body>
按键事件keyup:
<body>
<div id="app">
<!-- keyup事件是按键触发事件，当按下且释放后才会触发 -->
<input type="text" v-model="inputValue" @keyup.f12="handleKeyup">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// f12的按键编码是123
//可以通过全局 config.keyCodes 对象自定义按键修饰符别名
Vue.config.keyCodes.f12 = 123;
const vm = new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
handleKeyup(e) {
console.log(e.keyCode)
alert('F12被按下又起来了')
}
}
})
</script>
</body>
键盘事件keyup链式调用
<body>
<div id="app">
按下ctrl+enter
<!-- vue的按键修饰符，可以链式调用 -->
<input type="text" v-model="inputValue" @keyup.ctrl.enter="handleKeyup">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
handleKeyup(e) {
alert('哈也没有啊，你按啥？')
}
}
})
</script>
</body>
例：输入框内输入数据点击按钮/按enter键可提交显示到有序列表中
<body>
<div id="todolist">
<!-- 键盘点击enter触发添加事件 -->
<input
v-model="inputTodo"
type="text"
@keyup.enter="handleAdd"
>
<!-- 鼠标点击触发添加事件 -->
<button @click="handleAdd">添加</button>
<!-- 添加元素区域 -->
<ol>
<li
v-for="todo of todos"
:key="todo.id"
>
<!-- 读取todos内的每个todo.text，渲染出来 -->
{{todo.text}}
</li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#todolist',
data: {
// inoutTodo----输入框内输入的值
inputTodo: '',
todos: [{
id: Math.random(),
text: '学习'
}, {
id: Math.random(),
text: '挂科'
}, {
id: Math.random(),
text: '打游戏'
}]
},
methods: {
handleAdd() {
// 输入为空时，不触发事件
if(this.inputTodo === '') {
return false;
};
//将输入的数据添加到todos中
this.todos.push({
id: Math.random(),
text: this.inputTodo
});
//最后初始化输入为空，也就是输入框置空
this.inputTodo = '';
}
}
})
</script>
</body>
html符号
computed:根据现有的状态计算出新的状态
数据有缓存（所依赖的属性不变化，值不变化）
根据现有的值，计算出新的值
可以直接使用其函数，无需再执行
有get（取值）和set（设置值）两种方法
例：在输入框输入姓名获取全名，在得知全名情况下分解出姓和名
<body>
<div id="app">
<label>姓<input type="text" v-model="xing"></label>
<label>名<input type="text" v-model="ming"></label>
<div>你好！{{fullname}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
xing: '',
ming: ''
},
computed: {
// computed里面的方法有两种写法
// 第一种，一个方法直接返回一个值
// fullname() {
// return this.xing + this.ming;
// }
// 第二种，定义为一个对象，里面分别有get和set两个方法
// 在调用的时候，自动执行get()
fullname: {
get() {
return this.xing + this.ming;
},
// 在赋值的时候，会自动执行set(value)
// 比如执行： this.fullname = '张三'
// 得到结果为
// this.xing = '张'
// this.ming = '三'
set(v) {
this.xing = v.slice(0, 1);
this.ming = v.slice(1);
}
}
}
})
</script>
</body>
methods：
需要重新执行才能渲染出结果
无缓存（在视图层执行）
watch：监听现有数据
例：无论是姓改变还是名改变，全名随之而变
<body>
<div id="app">
<label>姓<input type="text" v-model="xing"></label>
<label>名<input type="text" v-model="ming"></label>
<div>你好！{{fullname}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
xing: '',
ming: '',
fullname: '',
},
// 监听某个data-item的变化， 当此item的value发生改变的时候，就会自动执行某个方法
// 能不用尽量不用
watch: {
xing() {
this.fullname = this.xing + this.ming
},
ming() {
this.fullname = this.xing + this.ming
}
}
})
</script>
</body>
filters:多个地方需要用同一个方法处理数据时
例：对数据进行保留两位小数处理
<body>
<div id="app">
<!-- |后面直接跟filter -->
{{num | tofix}} {{num1 | tofix}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
num: 3.14159265,
num1: 6.42546456578
},
// filters用于处理某些同一类型的值，需要做一些格式化操作的时候
// 有点类似于咱们平常所用到的一个方法库的意思
filters: {
tofix(v) {
return v.toFixed(2);
}
}
})
</script>
</body>
moment.js:时间处理插件
<body>
<div id="app">
{{now | formatTime}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
now: new Date()
},
filters: {
formatTime(t) {
return moment(t).format('YYYY年MM月DD日 DDDo ddd Wo')
}
}
})
</script>
</body>
