VUE（1）知识总结

1、概述

前端框架三驾马车：
VUE
React
Angular
vue 是一款渐进式javascript前端框架
作者：尤雨溪
官网：cn.vuejs.org
插件案例：https://github.com/opendigg/awesome-github-vue
特点：
1、简单，上手方便
2、结合Angular指令与react组件思维
3、生态丰富（插件多）API文档完善

2、实例化参数

选择性标签：el:"#app"
指定数据 ：data：{}
data(){
return{}}
一个函数返回一个对象
computed 计算
watch监听

 3、computer  计算

　computed: {undefined
　　 　　mydata:function(){undefined
　　 　　　　／＊函数主体＊／
　　 　　　　return data; //需要输出的数据 此时data就等于mydata
　　　　}
　　 }

注意：mydata不能在data中声明，否则会出错。

4、watch监听

一、浅监听
它可以监听字符串、普通数组的变化
watch:{
    val(newVal,oldVal){
        //实时监控数据的变化
    }
}

<input type="text" v-model='food[1]'>{{food[1]}}
​
                watch:{
                    food(newVal,oldVal){
                        console.log(newVal,'new')
                        console.log(oldVal,'old')
                    },
                    }

二、深度监听
可以监听到对象的变化，还可以复杂数组
watch:{
    对象：{
        deep:true,//深度
        handler(新值newVal){
            //可以实时监听到新值newVal的变化
        }
    }
}

<input type="text" v-model='obj.name'>{{obj.name}}
        <hr>
        <input type="text" v-model='songList[0].name'>{{songList[0].name}}
        watch:{
                        obj:{
                    deep:true,//deep 深度
                    handler(newVal){
                        console.log(newVal,'new')
                        console.log(newVal.name,'new')
                    }
                },
                songList:{
                   deep:true,
                   handler(newVal){
                    console.log(newVal[0].name,'new')
                   }
                },
            }

5、文本渲染指令指令

指令的值可以使简单的JavaScript命令
文件渲染指令
    {{}}
    v-text
    v-html
（渲染html文本）

6、条件渲染

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

7、列表渲染

v-for=“item in list"
list 是要遍历的数组
item 当前便利的项目
v-for=“（item，index） in list”
index   当前遍历项的索引从0开始
使用v-for务必
v-bind：key=""
：key=“值”
值必需是唯一的
添加key属性可以优化v-for的渲染
让vue更好的识别当前渲染的节点
特别是在排序，过滤等操作的时候

不建议key的值使用循环的索引

8、事件指令

v-on:事件类型=“响应函数”
v-on：click=“say()"
@click="say()"
事件的简写
事件修饰符
.stop阻止事件冒泡
.prevent阻止默认事件
.once只执行一次
@click.stop.once.prevent="num++"
事件的修饰符可以同时写多个
按键修饰符
    .down
    .left
    .up
    .right
    .delete
    .enter
事件对象
    $event

9、表单绑定指令事件

v-model
让表单的值与数据绑定在一起
<input type="checkbox">
默认选中值是true
不选中值是false
<input type="checkbox" name="fruit" v-model="list">
如果是多个把选中的值动态添加到list数组中
修饰符
    .number数字
    .trim移除两端空白

10、类绑定

1、属性
：class=“值”
2、对象
当对象的属性值为真，该属性作为class绑定：class="{'key1':trye,'key2':false}"
key1的值为真，key1会被绑定，key2不会
3、数组方式
：class=“[cl,c2,c3]”

11、动画

1、vue动画在内置组件transition包裹
会自动在动画的进入过程与离开过程添加类名
内置组件
    transition
        name名称
        mode:模式
in-out先进再出
out-in先出再进
        enter-active-class
指定进入类名
        leave-active-class
指定离开类名
    transition-group
动画类
    v-enter-active
进入过程
        v-enter
进入前
        v-enter-to
进入后
    v-leave-active
离开过程
        v-leave
离开前
        v-leave-to
离开后
创建动画形式

    2、keyframes关键帧
.fade-enter-active{animate:fadein  ease 1s}
.fade-leave-active{animate:fadeOut  ease 1s}
    3、引入第三方动画库
指定进入的class与离开的class
 <transition name='fade1' enter-active-class='bounceInRight animated' leave-active-class='hinge animated'>
        <div class="img" v-if='flg1'></div>
    </transition>