VUE02--{directive、filter、computed、watch、axios、动画}

VUE

案例：input自动获取焦点

1. DOM操作

（1）ref属性表示对dom的引用，ref值自定义，但不能重复

2. 自定义指令 -- Vue.directive

（1） Vue.directive（param1,param2）
param1 -- 1)自定义指令的名字 。2)全部小写，不能驼峰命名，可使用_或-
param2 -- 对象，表示配置项
（2） 命名不加v，focus | 使用要加v，v-focus
（3）inserted
自定义指令对象提供的钩子函数之一。绑定元素插入父节点时调用。

3. 过滤器 -- Vue.filter

    

        
        
{{ctime | formatTime("/")}}
    
    

（1） Vue.filter（param1,param2）
param1 -- 过滤器名
param2 -- 处理函数（参数1-即数据，参数2-自己设置）
（2） 使用：数据 + 管道符 | + 过滤器名（参数）

4. 计算属性 -- computed

   

       谁：  

       干嘛：  

       
{{ sentence }}
   
   

（1） 计算属性的结果被缓存，只有相关依赖改变，计算属性才会改变。

5. 侦听属性 -- watch

    

        谁：  

        干嘛：  

    
    

（1）watch监听data中的数据，data数据变化，对应的监听函数立即执行
（2）watch会一直监听数据，性能消耗大。开发时，能用computed就不要用watch
（3）异步请求用watch
（4）监听数据为对象，要用深度监听，示例如下

    

        谁：  

        干嘛：  

    
    

6. 异步请求 -- axios

            mounted() {
                // axios的get请求
                axios.get("GET接口")
                .then(res => {
                    console.log(res.data);
                })
                .catch(err => {
                    console.log(err);
                })

                // axios的post请求
                axios.post("POST接口", {
                    name: "McNeil", // post传参
                })
                .then(res => {
                    console.log(res.data);
                })
                .catch(err => {
                    console.log(err);
                })
            }

7. 动画

1.css类名
2.animate动画库
2.js钩子函数