Vue总结

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

实例化对象
new Vue
    el:“#app"
选择目标标签
    data:{}
指定数据
data(){{return}}
一个函数返回一个对象
    mrthods定义对象
    watch监听
    computed计算

指令
    指令的值是可以是简单的javascript命令
    文本渲染指令
        {{}}
        v-text
        v-html
（渲染html文本）
    属性绑定指令
        V-bind：属性=”指令值“
        ：属性=”值“
    条件渲染
        v-show
css方式隐藏
        v-if
v-else-if
v-else
        频繁切换用v-show
一次性切换用v-if
v-show隐藏是通过css的方式隐藏节点
    列表渲染
        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 的值使用循环的索引
    事件指令
        v-on :事件类型=“响应函数‘
v-on:click="say()"
        @click="say()"
事件简写
        @click="num++”
行内事件响应
        事件对象
            $event
$event.key==="keydown"
        按键修饰符
            .up
.left
.down
.right
.delete
.enter
.space
.esc

    表单绑定指令
        v-mmodel
让表单的值与数据绑定在一起
        <input type="checkbox">
默认选中值是true
不选中值是false
        事件修饰符
.prevent阻止默认事件
.once只执行一次
.stop阻止事件冒泡
        <input type="checkbox"name="fruit"v-model="list>
如果是多个选中的值动态添加到list数组中
        修饰词
            number数字
            .trim移除两空白

computed计算
    从现有数据计算出新的数据
    conputed:{
r'm's'g（）{return this .,msg.split('').reverse().
join('')}
}

watch监听
    监听数据的变化并执行回调函数hander
    watch:{
"num":{
handler(nval,oval){}
deep:true
}
}

自定义指令
    bind绑定执行一次
inserted插入执行一次
updata每更新执行一次
    directives:{
"c-docus":{
update(el,binding){
if(binding,value){el.focus()}
}
}
    <input v-focus="flag">

样式绑定
    属性名去掉-下个字母大写
:style="{color:‘red’,'fontSize':'48px'}"

类绑定
    1.属性
：class="值“
    2.对象
当对象的属性值为真 该属性做为class绑定
：class="{"key1",true,"key2":false}"
key1的值为真key1绘=会被绑定key2不会
    3.数组方式
:class="[c1,c2,c3]"

过滤管道
    格式化数据
    使用
1{{num|fix}}
2.{{num|fix(2)}}
3.v-text="num|fix"
    filters:{
fix(value,arg){
return value.toFixed(arg)
}
}
//保留小数点两位

动画
    1.vue动画在内置组件transition中包裹
会自动在动画的进入过程与离开过程添加类名
    内置组件
        transition
            nmae名称
            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
离开后
    创建动画形式
        1动画类6个css创建
        2e=keyframes关键帧
.fade-enter-active{animated:fadeln ease 1s}
.fade-leave-active{animated:fadeln ease 1s}
        3 引用第三方动画库
指定进入的class与离开的class
<transition
enter-active-class="slideln animated"
leave-active-class="hinge animated"
>
    组件
        1一段可以重复利用的代码块
        全局组件
Vue.component("{组件名",{template:``}}
        局部组件
const steper={template：``}

        使用组件
<steper></steper>
        注册组件
new Vue（{
components;{steper}
}}