Vue2.0 修饰符、绑定样式、计算属性以及侦听属性
一、修饰符
1.事件修饰符：事件修饰符是对事件捕获以及目标进行了处理（语法：@事件名.修饰符）
（1）stop：阻止了事件冒泡，相当于调用了event.stopPropagation方法
（2）prevent：阻止了事件默认行为，相当于调用了event.preventDefault方法
（3）self：只有在event.target是当前元素自身时触发
（4）once：绑定的事件只能触发一次
（5）capture：让事件触发从包含这个元素的顶层开发往下依次触发（也就是捕获模式）
（6）passive：事件的默认行为立即执行，无需等待事件回调
（7）native：让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用v-on只会监听自定义事件
注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击
2.键盘修饰符：键盘修饰符用来修饰键盘的事件（如：onkeyup、onkeydown等），键盘的事件触发需要相对应的keyCode。然而keyCode存在很多，因此为了使用方便Vue给我们提供了别名的修饰符
（1）普通按键（enter、delete、space、tab、esc…）
（2）系统修饰键（ctrl、shift、alt…）
（3）也可以直接用按键的代码来做修饰符（如：enter为13）
3.表单修饰符：这个修饰符主要是用在表单常用的指令上,v-model对表单的输入内容进行修饰。
（1）lazy：lazy跟懒加载类似，在表单上我们填写信息的时候不会触发v-model值的变化，只有光标离开的时候才会赋值
（2）trim：过滤掉输入内容的前后空格
（3）number： 会将输入的值转换为数值类型
二、绑定样式
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
代码示例：
html>
<html>
<head>
<meta charset="UTF-8" />
<title>绑定样式title>
<style>
.basic{
width: 300px;
height: 50px;
border: 1px solid black;
}
.happy{
border: 3px solid red;;
background-color: rgba(215, 235, 0, 0.54);
background: linear-gradient(30deg,yellow,pink,orange,yellow);
}
.sad{
border: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}
.atguigu1{
background-color: yellowgreen;
}
.atguigu2{
font-size: 30px;
text-shadow:2px 2px 10px red;
}
.atguigu3{
border-radius: 20px;
}
style>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{{name}}div> <br/><br/>
<div class="basic" :class="classArr">{{name}}div> <br/><br/>
<div class="basic" :class="classObj">{{name}}div> <br/><br/>
<div class="basic" :style="styleObj">{{name}}div> <br/><br/>
<div class="basic" :style="styleArr">{{name}}div>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'VUE',
mood:'normal',
classArr:['atguigu1','atguigu2','atguigu3'],
classObj:{
atguigu1:false,
atguigu2:false,
},
styleObj:{
fontSize: '40px',
color:'red',
},
styleObj2:{
backgroundColor:'orange'
},
styleArr:[
{
fontSize: '40px',
color:'blue',
},
{
backgroundColor:'gray'
}
]
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
script>
html>1.class样式写法 :class="xxx" xxx可以是字符串、对象、数组。
（1）字符串写法适用于：类名不确 定，要动态获取。
（2）对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
（3）数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2.style样式写法 :style="{fontSize: xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。
三、计算属性（computed）
1.语法
（1）正常写法：
computde: {
fullName: {
get() {
//依赖数据发生改变执行代码
}
set() {
//计算属性值被修改执行代码
}
}
}（2）简写：只使用getter不使用setter才能使用简写方法
computde: {
fullName() {
//依赖数据发生改变执行代码
}
}2.computed 阐述
（1）监听值未在data中定义，以return返回值形式；
（2）计算属性变量在computed中定义，属性监听在data中定义。
（3）计算属性默认只有get来读取，手动修改计算属性时，会触发手写的set函数。
（4）计算属性的值会被缓存，只有实例中相关依赖值改变时，才重新计算，性能好但不适合做异步请求。
（5）计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。
3.computed 使用阐述
（1）在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。
（2）计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
4.computed 【getter和setter】
（1）计算属性拥有的两个方法：getter setter 用来实现数据的双向绑定
（2）每一个计算属性都包含一个 getter 和一个 setter，在你需要时，也可以提供一个 setter 函数 ， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发 setter函数，执行一些自定义的操作
（3）计算属性还经常用于动态地设置元素的样式名称 class 和内联样式 style
四、侦听属性（watch）
1. watch 的定义：watch是一个观察动作.可以侦听指定名称属性值(data/computed)的变化,属性值一旦发生变化时就会触发侦听器,然后侦听器执行相应的业务代码
（1）侦听器一般来说是用来监听数据的变化，默认是在数据发生变化时执行。
（2）监听的数据名放到这里面作为函数名，这个函数里面有两个参数，一个是新值，一个是旧值。
（3）在vue中，使用watch来响应数据的变化
2. 简单侦听(主要针对变量和简单数据类型)
（1）watch在vue中是一个单独的配置项
（2）watch中的函数名称必须和属性名称一致,且不能人为调用
（3）没有返回值,如需使用处理结果,必须将结果赋值给data中的成员再进行使用
3. 深度侦听(主要针对复杂数据类型或者需要立即执行的侦听函数)
（1）handler: 固定方法触发. 侦听函数必须叫handler(必写)
（2）deep: 开启深度侦听(必写)
（3）immediate: 立即侦听(页面初始化时handler立即执行一次)