vue基础2

1.自定义指令 directive

        作用：操作dom，或操作第三方基于dom的插件

html代码

<div id="app">
    <input type="text" v-focus="flag">
    <button @click="flag=!flag">更换</button>
</div>

js代码

var vm=new Vue({
    el:"#app",
    data(){
        return{
            flag:false
        }
    },
    directives:{
    //自定义v-focus指令
        "focus":{
        //当被插入的时候用inserted
        //只绑定一次 bind
        //更新时候运行update
            update(el,binding){
                //el对应的节点
                //binding.value指令的值
                console.log(el,binding);
                if(binding.value){
                    el.focus();
                }
            }
        }
    }
})

2. 管道或过滤 filter

        作用：格式化数据。

html代码

<div id="app">
    <p>{{pi|tofilter(3)}}</p>
</div>
//输出3.142

js代码：

var vm=new Vue({
    el:"#app",
    data(){
        return{
            pi:3.1415926
        }
    },
    fliters:{
        //val是|左边的值
        tofilter(val,len=2){
            //返回要显示的内容
            return Number(val).toFixed(len);
        }
    }
})

3. 组件 components

        作用：

        ◆ 组件就是定义好的一功能模块，建议：多用props，少在组件中使用data（降低组件的耦合

           性，

        ◆ 组件是vue的一个重要的特点

        ◆ 实现多人协作开发

        ◆ 通过组件划分降低开发的难度

        ◆ 实现复用，降低重复劳动

3.1 定义组件  子组件

3.2 注册组件  父组件

3.3 使用组件  父组件

  3.4组件传参

父传子

子传父

 4.插槽

即组件的嵌套内容

定义组件

 在组件中使用插槽

5.动画

动画即两个状态形成过渡，有进入与离开两个状态

① transition 单个动画元素

        属性

        name名称

        enter-active-class=“fadeIn animated” 指定进入class

        leave-active-class=“” 指定离开class

② 产生状态与类

        .v-enter-active

                v-enter 进入开始状态

                v-enter-to进入结束状态

        .v-leave-active

                v-leave

                v-leave-to

③ transition-group 动画组

        属性 tag 用标签包裹所有的动画组元素

        产生的状态与类

                transition

                v-move正在移动中的元素