vue入门 vue基础之简单使用5--created,directive,computed,watch及dom对象

dom对象

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。我们常用的window对象就是BOM，所有以window-开头的都是bom(即所有window对象都是bom对象)

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。所有以doucment开头的都是dom，(记得有window.document，所有dom对象本身是dom对象)
具体

在vue里面，可以用$符号来操作dom对象
在vue中操作dom对象

PS:
dom和bom的区别
https://www.cnblogs.com/bs2019/p/12130112.html
所有以window-开头的都是bom(即所有window对象都是bom对象)
所有以doucment开头的都是dom，(记得有window.document，所有dom对象本身是dom对象)

 <div id="app">
        <div class="dom-test" ref="vuedomtest">操作Dom</div>
        <button @click="clickMe">操作Dom</button>
    </div>
    <script>
        var vm= new Vue({
            el:"app",
            methods:{
                clickMe(){
                    // vue里面，都是使用$来操作dom对象
                    //使用document对象
                    document.querySelector(".dom-test").innerHTML("<b>粗一点</b>");
                    //使用vue操作dom对象，this.refs.vuedomtest与document.querySelector(".dom-test")等价
                    //其实refs得主要作用是组件间得调用
                    this.refs.vuedomtest.innerHTML="<b>粗一点</b>";
                }
            }
        })

    </script>

备注：directive，computed，watch都可以写在vue对象以内以局部产生作用

自定义指令集 directive

vue除了自有的指令集，例如v-text，v-html等，也允许自己设置自定义指令集

Vue.directive(“指令集名称”,{自定义指令动作});
操作里面会指定在特定时期内会有特定的操作

//全局指令集
        //自定义指令 第一个是自定义指令名称 ，第二个是自定义指令动作
        Vue.directive("yu", {
            //数据插入时触发
            //此处dom为当前标签对象(包含下级) 例如此处是div
            inserted(dom) {
                // console.log(dom);
            },
            //绑定时触发
            //el为当前得标签信息，binding为当前之定义指令得信息
            bind(el, binding) {
                console.log(el);
                console.log(binding);
            },
            //数据更新时触发
            update() {
            },
            //数据销毁时触发
            unbind() {
            }
        });

简写

        //简写
        Vue.directive("focus", (el, binding) => {
            dom.focus();
        })

局部自定义指令
所谓局部，就是在当前vue可以使用。其实就是在当前vue对象中定义directive

 var vm = new Vue({
            el: "#app",
            //局部指令集
            directive: {
                "yu": {
                    //数据插入时触发
                    //此处dom为当前标签对象(包含下级) 例如此处是div
                    inserted(dom) {
                        // console.log(dom);
                    },
                    //绑定时触发
                    //el为当前得标签信息，binding为当前之定义指令得信息
                    bind(el, binding) {
                        console.log(el);
                        console.log(binding);
                    },
                    //数据更新时触发
                    update() {

                    },
                    //数据销毁时触发
                    unbind() {

                    }

                }
            }
        });

计算属性 computed

定义：当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值
其实就是为了在某些值变化后，对应的值需要相应的变更

其实可以简单的将计算属性与方法进行对比：
方法：没有缓存
手动执行

计算属性：有缓存机制(类似于属性+方法)
自动执行：当执行一次方法属性后，会将计算后的值进行缓存，第二次访问将直接返回结果 。若是数据已经变化，则将计算并重新缓存

使用方法：在vue对象中，使用computed属性即可

 computed:{
                numCom(){
                    return this.num++;
                    // return that.num++;                     
                },
                numCom2(){
                    return function(parm){
                        console.log(parm); 
                    }
                }
            }

注意：
1.计算属性，一定要return值
2.计算属性建议不使用lambda表达式，因为此时的this已经被重新定向到了window，所以使用split会报错
理就与执行回调函数类似，计算属性在使用委托时，this代表的是window。
当然，也可以在created/beforeMount中将this赋值给that，作为一个解决方法

revmsg:function (){
       //将数据倒置
         var res=this.msg.split("").reverse().join("");
                    return res;
                },
revmsg2:()=>{
		return that.msg.split("").reverse().join(""); },

监听 watch

watch作用：可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态
Vue.js中 watch(深度监听)的最易懂的解释
白话：就是一直看着你，你一变化，我就执行某些动作
比如我定义了某些变量,用于输出数据：

    <div id="app">
        <p><input type="checkbox" name="" id="" v-model="allChecked">全选</p>
        <p v-for="item in list" :key="item.id" >
            <input type="checkbox" name="" id=""v-model="item.isChecked">
            {{item.name}}
        </p>
        <input type="text" v-model="user.userName">
    </div>
  -----------------------------
 var vm= new Vue({
            el:"#app",
            data:{
                list:[
                    {id:1,name:"a",isChecked:false},
                    {id:2,name:"b",isChecked:true},
                    {id:3,name:"c",isChecked:false}

                ],
                allChecked:false,
                user:{
                    id:1,
                    userName:"牛逼"
                }
            },
            }

此时，我需要监听allChecked的属性，一旦被选中，则执行全选效果
则可以：

  //监听
            watch:{
                //监听方法名必须和变量名相同
                allChecked(newVal,oldVal){
                    //通过监听属性实现全选功能
                    this.list.forEach(element => {
                        element.isChecked=newVal;
                    });
                },

当然，也可以开启深度监听

  //深度监听--会更消耗性能
                //需要设置deep属性为true，开启深度监听
                //一般需要监听子项目数据，开启才有意义
                list:{
                    // handler:function(newVal,oldVal){
                    //     console.log(newVal);
                    //     console.log(oldVal);
                    // }
                    //handler名称固定,可简写成一下
                    handler(newVal,oldVal){
                        console.log(newVal);
                        console.log(oldVal);
                    },
                    deep:true
                },

其实普通监听编译后也是深度监听这个样子，只是默认属性deep为false；

监听最好是写在vue对象里面，这样页面跳转后，就不会有资源溢出。不然就要手动销毁监听

全代码

directive 自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <!-- <script src="timeTranslate10.js"></script> -->
    <script src="glFilter10.js"></script>
    <title>自定义指令 directive</title>
</head>

<body>
    <div id="app">
        <div v-yu>
            <div></div>
        </div>
        <input type="text">
        <input type="text" v-focus>

    </div>
    <script>
        //全局指令集
        //自定义指令 第一个是自定义指令名称 ，第二个是自定义指令动作
        Vue.directive("yu", {
            //数据插入时触发
            //此处dom为当前标签对象(包含下级) 例如此处是div
            inserted(dom) {
                // console.log(dom);
            },
            //绑定时触发
            //el为当前得标签信息，binding为当前之定义指令得信息
            bind(el, binding) {
                console.log(el);
                console.log(binding);
            },
            //数据更新时触发
            update() {

            },
            //数据销毁时触发
            unbind() {

            }
        });


        Vue.directive("focus", {
            inserted(dom) {
                dom.focus();
            }
        })
        //简写
        Vue.directive("focus", (el, binding) => {
            dom.focus();
        })
        var vm = new Vue({
            el: "#app",
            //局部指令集
            directive: {
                "yu": {
                    //数据插入时触发
                    //此处dom为当前标签对象(包含下级) 例如此处是div
                    inserted(dom) {
                        // console.log(dom);
                    },
                    //绑定时触发
                    //el为当前得标签信息，binding为当前之定义指令得信息
                    bind(el, binding) {
                        console.log(el);
                        console.log(binding);
                    },
                    //数据更新时触发
                    update() {

                    },
                    //数据销毁时触发
                    unbind() {

                    }

                }
            }
        });
    </script>
</body>

</html>

computed全代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <title>计算属性 computed</title>
</head>
<body>
    <div id="app">
        <!-- {{revmsg}}
        {{revmsg2}} -->
        {{num}}
        <button  @click="addNum">clickMe</button>
        <button  @click="numAdd">clickMeComp</button>

        {{this.numCom2(1)}}
    </div>
    <script>
        // var that;
        // 计算属性， 主要作用是对data中的数据进行处理
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"helloworld",
                num:1
            },
            created(){
                // that=this;
            },
            methods:{ 
                addNum(){
                    console.log(this);
                    this.num++;
                    // console.log(res);
                },
                numAdd(){
                    that.numCom;
                }
            },
            computed:{
                //计算属性，一定要return值
                //另外，计算属性建议不使用lambda表达式，因为此时的this已经被重新定向到了window，所以使用split会报错
                //原理就与执行回调函数类似，计算属性在使用委托时，this代表的是window。
                //当然，也可以在created/beforeMount中将this赋值给that，作为一个解决方法
                // revmsg:function (){
                //     //将数据倒置
                //     var res=this.msg.split("").reverse().join("");
                //     return res;
                // },
                // revmsg2:()=>{return that.msg.split("").reverse().join(""); },
                
                //计算属性与方法不同之处，计算属性有缓存机制：
                //  当执行一次方法属性后，会将计算后得值，进行缓存，第二次访问将直接返回结果
                //  若是数据已经变化，则将计算并重新缓存
                numCom(){
                    return this.num++;
                    // return that.num++;                     
                },

                //正常来讲，直接看vue对象，numCom是一个属性，但是可以通过其他方法将其转换会function
                //但是无意义(鸡肋)，因为我们有方法得定义了-_-
                numCom2(){
                    return function(parm){
                        console.log(parm); 
                    }
                }
            }
        })
    </script>
</body>
</html>

watch全代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>监听 watch</title>
</head>
<body>
    <div id="app">
        <p><input type="checkbox" name="" id="" v-model="allChecked">全选</p>
        <p v-for="item in list" :key="item.id" >
            <input type="checkbox" name="" id="" v-model="item.isChecked">
            {{item.name}}
        </p>
        <input type="text" v-model="user.userName">
    </div>
    <script>
        var vm= new Vue({
            el:"#app",
            data:{
                list:[
                    {id:1,name:"a",isChecked:false},
                    {id:2,name:"b",isChecked:true},
                    {id:3,name:"c",isChecked:false}

                ],
                allChecked:false,
                user:{
                    id:1,
                    userName:"牛逼"
                }
            },
            created(){
                that=this;
            },
            methods:{

            },
            //监听
            watch:{
                //监听方法名必须和变量名相同
                allChecked(newVal,oldVal){
                    //通过监听属性实现全选功能
                    this.list.forEach(element => {
                        element.isChecked=newVal;
                    });
                },
                //深度监听--会更消耗性能
                //需要设置deep属性为true，开启深度监听
                //一般需要监听子项目数据，开启才有意义
                list:{
                    // handler:function(newVal,oldVal){
                    //     console.log(newVal);
                    //     console.log(oldVal);
                    // }
                    //handler名称固定,可简写成一下
                    handler(newVal,oldVal){
                        console.log(newVal);
                        console.log(oldVal);
                    },
                    deep:true
                },
                // "user":{
                //     handler(newVal,oldVal){
                //         console.log("value is changed");
                //     },
                //     deep:true
                // },
                // //监听子属性
                // "user.userName":{
                //     handler(newVal,oldVal){
                //         console.log("value is changed");
                //     }
                // }
            }
        });
    </script>
</body>
</html>