VUE02--{directive、filter、compute

VUE

案例：input自动获取焦点

1. DOM操作

    <!-- DOM版 -->
    <div id="app">
        <input type="text" vimodel="val" ref="focusinput">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            mounted () {
                this.$refs.focusinput.focus();
            }
        })
    </script>

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

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

    <!-- Vue.directive版 -->
    <div id="app">
        <input type="text" vimodel="val" v-focus>
    </div>
    <script>
        Vue.directive("focus", {
            inserted(el, binding) {
                el.focus();
            }
        })
        var vm = new Vue({
            el: "#app",
        })
    </script>

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

3. 过滤器 -- Vue.filter

    <div id="app">
        <!-- 使用：数据后 + 管道符| + 过滤器名(参数) -->
        <p>{{ctime | formatTime("/")}}</p>
    </div>
    <script>
        Vue.filter("formatTime", (ctime, sep) => {
            let y = ctime.getFullYear();
            let m = ctime.getMonth() + 1;
            let d = ctime.getDate();
            return y + sep + m + sep + d;
        })
        var vm = new Vue({
            el: "#app",
            data: {
                ctime: new Date(),
            }
        })
    </script>

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

4. 计算属性 -- computed

   <div id="app">
       谁： <input type="text" v-model="person"> <br>
       干嘛： <input type="text" v-model="motion"> <br>
       <p>{{ sentence }}</p>
   </div>
   <script>
       var vm = new Vue({
           el: "#app",
           data: {
               person: "",
               motion: "",
           },
           computed:  {
               sentence () {
                   return this.person + this.motion;
               }
           }
       })
   </script>

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

5. 侦听属性 -- watch

    <div id="app">
        谁： <input type="text" v-model="person"> <br>
        干嘛： <input type="text" v-model="motion"> <br>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                person: "",
                motion: "",
            },
            watch: {
                "person" (newVal, oldVal) {
                    console.log(newVal, oldVal);
                }
            }
        })
    </script>

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

    <div id="app">
        谁： <input type="text" v-model="user.person"> <br>
        干嘛： <input type="text" v-model="user.motion"> <br>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                user: {person: "", motion: ""}
            },
            watch: {
                "user.person": {
                    handler (newVal, oldVal) {
                        console.log(newVal, oldVal);
                    },
                    deep: true
                }
            }
        })
    </script>

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钩子函数