2.①computed计算属性和watch监视中deep:true深度监视对象内的数据②实现数据双向绑定并实时拼接还有methods③vue的内置指令v-text、v-html、ref

目录

①computed是计算属性：一般是没有这个值的但是想要用这个值，那么要根据已有的去做计算

②watch 是监视属性：一般监视属性，监视的数据一定是已经存在并且可以改变的

③能用computed的 都能用watch,但是能用watch解决的computed不一定能解决

④区别： computed函数当中只能使用同步，而watch当中可以是同步也可以是异步

一：computed计算属性

二：watch监视属性

1.原始写法

2.简写

三：watch深度监视属性deep:true

四：实现数据双向绑定并实时拼接的四种方法

五：vue的内置指令

①v-text和v-html的区别

②v-cloak     防止因网络延迟数据没加载，用户看到代码 

③ v-once

​

④ref：

只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册

---

①computed是计算属性：一般是没有这个值的但是想要用这个值，那么要根据已有的去做计算

②watch 是监视属性：一般监视属性，监视的数据一定是已经存在并且可以改变的

③能用computed的 都能用watch,但是能用watch解决的computed不一定能解决

④区别： computed函数当中只能使用同步，而watch当中可以是同步也可以是异步

一：computed计算属性

    <div id="app">
        姓：<input type="text" v-model='firstName'>
        名：<input type="text" v-model='lastName'>
        <p>{{getFullName}}</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstName: '杨',
                lastName: '秀秀',
                fullName: '',
            },
            computed: {
                getFullName() {
                    return this.firstName + '~' + this.lastName
                }
            }
        })
    </script>

二：watch监视属性

1.原始写法

    <div id="app">
        姓：<input type="text" v-model='firstName'>
        名：<input type="text" v-model='lastName'>
        <p>{{fullName}}</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstName: '杨',
                lastName: '秀秀',
                fullName: '',
            },
            watch: {
                firstName: {
                    handler(newVal, oldVal) {
                        this.fullName = newVal + this.lastName
                    }
                }
            }
        })
    </script>

2.简写

            watch: {
                firstName(newVal, oldVal) {
                    this.fullName2 = newVal + ' *' + this.lastName
                },
            }

三：watch深度监视属性deep:true

    <div id="app">
        <button @click="num.a++">点我a+1</button>
        <button @click="num.b++">点我b+1</button>
        <button @click="C">彻底换掉num</button>
        <p>A={{num.a}}</p>
        <p>B={{num.b}}</p>
    </div>
    <script>
        /* Vue中的watch默认不监测对象内部值的改变，只能检测本身的改变
        配置 deep:true可以检测对象内部属性值改变（深层）         */
        new Vue({
            el: '#app',
            data: {
                num: {
                    a: 1,
                    b: 1,
                }
            },
            methods: {
                C() {
                    this.num = { c: 5 }
                }
            },
            watch: {
                // 平时我们不带引号的是简写的形式，正确写法是带引号的
                // 1.单独监听a的改变
                'num.a': {
                    handler() {
                        console.log('a改变了')
                    }
                },
                //这个不可以，这是监控num被重新赋值的
                // 2.监视num只要有值改变就输出
                num: {
                    deep: true,  //加上以后可以检测内部值的改变，没加的时候是监视num本身
                    handler() {
                        console.log('num内部某个属性改变了')
                    }
                }
            }
        })
    </script>

四：实现数据双向绑定并实时拼接的四种方法

    <script src="js/vue.js"></script>
    <div id="app">
        姓：<input type="text" v-model='firstName'>
        名：<input type="text" v-model='lastName'>
        <!-- 第一种不用 使用js的拼接 数据在模板当中  this全部指向的是vm 只不过模板当中的this可以省略-->
        <p>{{firstName+'-'+lastName}}</p>

        <!-- 第二种方法不用，使用封装函数去写 多次调用多次输出 效率低-->
        <p>{{getFullName()}}</p>

        <!-- 第三种方法重点：计算属性 computed 计算属性有缓存，多次调用只输出一次， 效率高-->
        <p>{{fullName}}</p>

        <!-- 第四种方法重要： watch监视(监视的数据一定是已经声明存在的，而且是可以变化的) -->
        <p>{{fullName2}}</p>

    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstName: 'Yang',
                lastName: 'Xiunan',
                fullName2: ''
            },
            methods: {
                getFullName() {
                    //在vue中所有的函数内部的this都指向vm,因为这些方法或者函数都会被vm代理
                    return this.firstName + '+' + this.lastName   //this必须加
                }
            },

            //当我需要一个数据，但是这个数据我又没有，并且这个数据由目前我有的数据计算而来的。那就要用计算属性
            computed: {
                // 如下是计算属性的完整写法
                // fullName: {
                //     get() {
                //         return this.firstName + '~' + this.lastName
                //     }
                //     set(){
                //         // 目前不用
                //     }
                // }

                // 如下是只用get方法是的简写情况
                fullName() {
                    return this.firstName + '~' + this.lastName   //this必须加
                }
            },
            // watch可以在内部写
            watch: {
                // 可以监视多个数据，数据一定是存在的并且是可变的，只有数据改变的时候才会输出
                firstName: {
                    // 这个对象是一个配置对象
                    handler(newVal, oldVal) {
                        this.fullName2 = newVal + ' *' + this.lastName
                    },
                    immediate:true  //配置这个配置项的作用是无论监视的属性发不发生变化，都要强制的执行一次回调
                },

            }
            //computed是计算属性：一般是没有这个值的但是想要用这个值，那么要根据已有的去做计算
            //   watch   是监视属性：一般监视属性，监视的属性以及后期要更改的属性都必须已经存在
            // 能用computed的 都能用watch,但是能用watch解决的computed不一定能解决

            // 区别：   computed函数当中只能使用同步，而watch当中可以是同步也可以是异步
        })

    </script>

五：vue的内置指令

    v-text
    v-html
    v-on       //绑定事件   简写@
    v-bind       //单向数据绑定  ：
    v-for       //列表渲染    
    v-if       //条件渲染
    v-else        
    v-show       //条件渲染
    v-model                                                                                                                                      v-cloak     //防止因网络延迟数据没加载，用户看到代码                                                            v-once                                                                                                                                        v-pre    //跳过其所在节点的编译过程，可以利用其跳过没有使用指令语法的节点，加快编译速度
    ref       //为特定的元素添加引用标识，实例的$refs内部可以获取到

①v-text和v-html的区别

    <div id="app">
        <p v-text="msg"></p> <!-- <h2>杨杨1</h2> -->
        <p v-html="msg"></p> <!-- 杨杨1 -->
        <!-- v-html 可以解析 html 代码 -->
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '<h2>杨杨1</h2>',
            },
        })
    </script>

②v-cloak     防止因网络延迟数据没加载，用户看到代码 

可以先设置隐藏

③ v-once

    <!-- v-once的用法 -->
    <div id="yy">
        <p v-once>初始化a的值：{{a}}</p>
        <button @click="a++">点我a+1</button>
        <p>更改后a的值:{{a}}</p>
    </div>

        new Vue({
            el: '#yy',
            data: {
                a: 1
            }
        })

④ref：

在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。

通俗的讲：  ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例

只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册

    <div id="app">
        <!-- ref是vue当中给我们提供的一个标识数据， 可以理解为id 可用原生js对该元素进行操作-->
        <p ref='hh'>我是最后一个p</p>
        <button @click="test">点击获取最后一个p</button>
    </div>

            methods: {
                test() {
                    console.log(this.$refs.hh)
                    // 用原生操作
                    this.$refs.hh.innerHTML = "我被修改了"

                }
            }