-
事件修饰符
v-on:once,本次事件只执行一次
一般的点击事件可以点击多次，而采用v-once的只能点击一次有效
<button v-on:click.once=clickFun>点击只执行一次</button>
v-on:stop,事件阻止执行，并且执行此次事件，阻止冒泡事件
比如v-on:submit=“alert（“阻止成功）”;就是关于提交表单时，阻止跳转，执行自己的函数，大概思想。
v-on:prevtent事件执行，阻止其他的跳转之类，阻止默认事件，比如a标签的额默认跳转。
键盘事件和键盘修饰符
-
keyup键盘绑定
- KeyDown：用户摁下摁键时发生
- KeyPress：用户摁下摁键，并且产生一个字符时发生
- KeyUp： 用户释放某一个摁键时触发
后面。enter就是enter键盘事件才会触动
在哪里输入，就在那个上面绑定键盘事件
-
双向数据绑定
双向数据绑定的意思就是将输入内容，输出内容都绑定在一个上面。
实例1：input实时输入内容打印出来。
第一种老方法
方法二：使用v-model绑定输出的属性，可以将属性值绑上去，还可以将绑定的输入内容实时绑定进来。就是将v-model是将input,select,textarea绑定在上面，后面=就是vue对象创建的data，然后绑定这个值，这样双向绑定后，实时使用输入框中的实时选择值
计算属性computed
就以加一减一来看，只要执行了事件方法，方法里面都要执行一遍，dom执行了消耗资源，Vue里面是采用虚拟Dom来操作，计算属性就不会这么消耗资源。
打印两次，dom耗资源
改成computed属性
但是将方法改为computed后，造成了add不是方法，必须改成属性add()-----add
重点：只要在页面引入的方法，每次执行改变页面都会执行方法，都会检查一边方法，都要执行
vue使用虚拟dom，将真实dom拷贝过来，computed就是采用看真实dom和虚拟dom是否一样，不一样才触发这个computed属性。
-
动态绑定css样式
vue绑定操纵css的内容就是操纵类的值，
v-bind:class="{类名：true}"，采用对象的方式
v-bind:class="{类名：true，类名2：false}"
技巧：可以通过执行一个返回对象的方法来执行多各类。
实例1：点击一个内容变颜色
<style> #vue-app div{ width: 100px; height: 40px; background-color: red; } #vue-app .changecolor{ background-color: blue; } #vue-app .changelength{ width: 200px; } </style> </head> <body> <div class="" id="vue-app"> <button v-on:click="changecolor=!changecolor">改变颜色</button> <button v-on:click="changelength=!changelength">改变长度</button> <div v-bind:class="changeFun ()"> </div> </div> <script src="app.js"></script> </body>
app.js
new Vue({ el:"#vue-app", err:"", data:{ changecolor:false, changelength:false }, methods: { changeFun(){ return { changecolor:this.changecolor, changelength:this.changelength } } }, })