VUE内置指令

VUE内部的一些内置指令

（1）. v-text 
                用于文本替换，会替换标签内原本的所有文本
（2）. v-html
                也是用于文本替换，能够认识文本中的html 和 css 但是不推荐使用
（3）. v-show
                通过css 控制标签展示还是隐藏              
（4）. v-if/v-else/v-else-if
                通过是否加载标签，来控制标签展示还是隐藏
（5）. v-for
                遍历一组数据, 循环渲染一些标签
（6）. v-on/@
                绑定一些事件
（7）. v-bind/:
                绑定一些属性
（8）. v-model
                双向绑定数据
（9）. v-slot
                插槽内需要使用的指令
（10）. v-prv
                跳过 vue 的编译
（11）. v-once
                只会被编译一次, 后续的编译与当前标签没有关系
（12）. v-memo
                只有绑定的依赖发生变化的时候, 才会重新渲染标签
（13）. v-cloak
                用于隐藏尚未完成编译的 DOM 模板。

侦听器和计算属性的区别

    侦听器
 *          1. 页面打开的时候不回立即执行, 除非添加配置项
 *          2. 没有缓存性
 *          3. 内部可以书写 异步代码
 *          4. 内部不需要书写 return
 *          5. 一个值(监听的值)的变化可能会导致 多个值发生变化  一对多
     计算属性的
 *          1. 只要使用了计算属性, 那么页面一打开计算属性就会立即执行一次
 *          2. 具有缓存性
 *          3. 内部不能书写异步代码
 *          4. 内部必须书写 return
 *          5. 多个值(计算属性内书写的所有响应式数据)的变化, 可能会导致 一个值 发生变化   多对一
 

v-model

<template>
    <h1>VUE v-model</h1>
    
    <!-- <input type="text" v-model="msg"> -->
    <!-- <input type="text" :value="msg" @input="setMsg"> -->

    <!-- .number 将输入的字符串类型的数字，转换为 数字类型 -->
    <!-- <input type="text" v-model.number="msg"> -->

    <!-- .lazy 将默认的 input 事件 更改为 change -->
    <!-- <input type="text" v-model.lazy="msg"> -->

    <!-- .trim 去掉左右两边的空格 -->
    <!-- <input type="text" v-model.trim="msg"> -->
    <h1>{{ msg }}</h1>
    
</template>

<script>
export default {
    data() {
        return {
            msg: '默认初始值'
        }
    },
    methods: {
        setMsg (e) {
            this.msg = e.target.value                     
        }
    }

}
</script>

• 组件上使用v-model

<template>
    <h1>VUE v-model</h1>
    <QFInp v-model="msg"/>
    <h1>{{ msg }}</h1>
</template>

<script>
import QFInp from "./components/pro.vue"
export default {
    data() {
        return {
            msg: '默认初始值'
        }
    },
    components: {
        QFInp,
    }

}
</script>

• 子:

<template>
    <input type="text" :value="modelValue" @input="setMValue">
</template>

<script>
export default {
    props: ['modelValue'],
    methods: {
        setMValue(e) {
            this.$emit('update:modelValue', e.target.value);
        }
    }
}
</script>