再见Vue

• 实例化参数（new Vue）

• 过滤（管道）

• 指令

• 动画

实例化参数（new Vue）：

• 选择目标文件：

el:"#app",

•  指定数据：

data:{}，

data(){return(){}}

• 定义事件：

methods:{
                say(n){
                    alert("你好啊，小可爱");
                    //this当前new Vue出来的实例
                    this.num+=n;
             }
  }

• 计算：

从现有数据计算出新的数据

computed：{
rmsg(){
reture this.msg.split('').reverse('').join('')
    }
}

• 监听：

监听数据的变化，并执行回调函数handler

watch:{
        "num":{
        headler(nval,oval){},
        deep:true
    }
}

---

过滤（管道）：

过滤：格式化数据

使用方法：

1.{{num|fix}}
2.{{num|fix(2)}}
3.v-text="num|fix"

filters:{
	fix(value,arg=2){
	return value.toFixed(arg)//保留小数点两位
    }
}

---

指令：

指令：指令的值是可以是简单的javascript命令

文本渲染指令：

{{}}

v-text

v-html

属性绑定：

v-bind:属性="指令值"

:属性="值"

条件渲染：

v-show

v-if

v-else-if

v-else

v-show和v-if区别：

频繁切换用v-show                                               一次性切换用v-if
v-show隐藏是通过css的方式隐藏节点                 v-if隐藏是注释的方法隐藏节点

列表渲染（遍历）：

v-for="(item,index) in list" :key="item"
item	遍历后的值
index	遍历后的下标
:key="值"	添加key属性可以优化v-for的渲染（值必须是唯一）

事件指令：

举个例子：

v-on:click="say()"

v-on:事件类型="响应函数"

事件修饰符：

.stop	阻止事件冒泡
.prevent	阻止默认事件
.once	只执行一次

@click.stop.once.prevent="num++"//事件的修饰符可以同时写多个

按键修饰符：

.up	上
.down	下
.left	左
.right	右
.delete	删除键
.enter	enter键
.space	空格键
.esc	取消键

表单绑定指令：

v-model//让表单的值与数据绑定在一起

<input type="checkbox">//默认选中值是true,不选中值是false

<input type="checkbox" name="fruit" v-model="list">//如果是多个把选中的值动态添加到list数组中

表单修饰符：

.number	数字
.trim	去除两端空白

类绑定：

:class="值"

:class="{'key1':true,'key2':false}"

:class="[c1,c2,c3]"

样式绑定：

：style="{color:'red','fontSize':'48px'}"

---

动画：

动画：vue动画在内置组件transition包裹，会自动在动画的进入过程与离开过程添加类名

内置组件：

transition
name	名称
mode	模式
enter-active-class	指定进入类名
leave-active-class	指定离开类名

mode进入模式：

in-out	先进后出
out-in	先出后进

动画类：

动画类分为进入过程（v-enter-active）和离开过程（v-leave-active）

v-enter-active
v-enter	进入前
v-enter-to	进入后

v-leave-active
v-leave	离开前
v-leave-to	离开后

创建动画形式：