可参考官网
九、按钮修饰符 <!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit"> 全部的按键别名： .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 可以通过全局 config.keyCodes 对象自定义按键修饰符别名： // 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112可通过keyup事件来查看按钮对应的数字是多少,
如下: k字母对应的数字是75.
<input type="text" @keyup="getKeyNum"> getKeyNum (event){ console.log(event); }可参考官网
十、数组更新检测data中的数据改变，会引起视图的改变。
变异方法Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push() pop() shift() unshift() splice() sort() reverse()push()
<button @click="adddata">插入数据</button> export default { data() { return { users: ["zhangsan","lisi","wangwu'"] } }, methods: { getUserData(data,event) { console.log(this.users[data]); console.log(event); }, getKeyNum (event){ console.log(event); }, adddata() { this.users.push("这是添加的数据"); } } } 替换数组不会引起视图更新
注意：
filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
可参考
显示过滤与排序结果 nums: [1,2,34,5,6,8,54,31,34,4,2] <button @click="getJishu">显示奇数</button> getJishu() { this.nums.filter(function(num){ if(num % 2 ==0){ console.log(num); } }); } 十一、计算属性与观察者模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
所以，对于任何复杂逻辑，你都应当使用计算属性。
computed()计算属性与data()同级
{{msg}} <br> {{newmsg}} msg: 'abcde' computed: { newmsg(){ return this.msg.split('').reverse().join(''); } }这样在很多需要翻转的地方直接调用newmsg就可以，不用在每个调用中在单独写翻转了。
计算属性与methods区别不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 msg 还没有发生改变，多次访问 newmsg
计算属性会立即返回之前的计算结果，而不必再次执行函数。
methods则每次都会重新执行。
十二、表单输入绑定 v-model:双向数据绑定 {{msg}} <br> <input type="text" v-model="msg"> return { msg: 'test' } watch（） 监听数据 watch: { msg(data){ console.log(data); } }注意：watch监听数据必须和data中名字一样。
多行文本，单选框，复选框都可以使用v-model、watch
watch一般在input中使用。
十三、修饰符 .lazy <!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" >在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change事件进行同步.
.number <input v-model.number="age" type="number">如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
.trim <input v-model.trim="msg">如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
延迟操作,减轻服务器负担。
<template> <div> {{msg}} <br> <input type="text" v-model="msg"> {{msg1}} </div> </template> <script> export default { name: 'formdata', data() { return { msg: 'test', msg1:'' } }, watch: { msg(data){ setTimeout(() =>{ this.msg1=data; },1000) } } } </script> <style> </style> 十四、Class与Style绑定 对象语法绑定单个
<template> <div> <p v-bind:class="{active:isActive,'demo':Demo}">{{msg}}</p> </div> </template> <script> export default { data() { return { msg: 'test', isActive: true, Demo: true } } } </script> <style> .active{ color: aqua; } .demo{ font-size: 200px; } </style>或者绑定一个对象
<p v-bind:class="styleObj">{{msg}}</p> styleObj: { active: true, demo: true }, msg: 'test' <style> .active{ color: aqua; } .demo{ font-size: 200px; } </style> 数组语法 msg: 'test', demo1: 'demo11', demo2: 'demo22' <span v-bind:class="[demo1,demo2]">{{msg}}</span> <ul> <li v-bind:class="[{active:index%2 == 0}]" v-for="(user,index) in all">{{user.name}}----{{user.age}}-----{{user.sex}} </li> </ul> all: [{name:"zhangsan",age:10,sex: '男'}, {name:"zhaoliu",age:23,sex: '女'}, {name:"wangwu",age:19,sex: '女'}, {name:"lisi",age:12,sex: '男'}] .active{ color: aqua; }更多绑定可参考官网
绑定内联样式对象语法
更多绑定可参考官网