Vue3全家桶 - Vue3 - 【3】模板语法（指令+修饰符 + v-model语法糖）

一、模板语法

• 主要还是记录一些指令的使用和vue2的区别；
• vue3指令导航；

1.1 v-text 和 v-html

• 指令的区别：
  • v-text：
    • 更新元素的文本内容；
    • v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分，应该使用 mustache interpolations 代替。
    • 不能解析标签；
  • v-html：
    • 更新元素的innerHTML；
    • v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。
    • 可以解析标签；
    • 在单文件组件，scoped 样式将不会作用于 v-html 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。如果你想让 v-html 的内容也支持 scoped CSS，你可以使用 CSS modules 或使用一个额外的全局 <style> 元素，手动设置类似 BEM 的作用域策略。
• vue2：这两个指令的使用的时候，没什么需要注意的地方，即使标签里面有内容，也可以正常使用和在浏览器中正常显示内容；
• vue3：绑定指令的元素必须是空标签，如果该标签里面有内容或其他标签，都会报错；
  • 相比vue2，vue3源码在这两个指令绑定的时候去做了进一步的处理；
    

1.2 v-model

• 注意：
  • 一般情况下，v-model指令用在表单元素中；
  • 文本类型的 input、textarea 会绑定元素的 value 属性并侦听 input 事件；
  • 单选和复选 radio、checkbox 会绑定元素的 checked 属性，并侦听 change 事件；
  • 下拉菜单 select 会绑定元素的 value 属性，并侦听 change 事件；
    • 指令绑定在 select元素 上，给 子元素option 设置 value属性；
• 示例展示：

  <script setup>import { ref, reactive, toRef, toRefs, onMounted } from 'vue';let text = ref('111')let textarea = ref('222')let radio = ref('man')let open = ref(true)let determine = ref('确定')let checkbox = ref(['YMQ'])let select = ref('B')let selects = ref(['苏C', '苏B'])onMounted(() => {});
  </script><template><h4>单行文本框</h4><input type="text" v-model="text"><hr><h4>多行文本框</h4><input type="textarea" v-model="textarea"><hr><h4>单选框</h4><input type="radio" value="man" v-model="radio"> 男<input type="radio" value="woman" v-model="radio"> 女<hr><h4>默认复选框</h4><input type="checkbox" name="" id="" v-model="open"> 灯<h4>自定义复选框的值</h4><!-- 默认状态下，复选框的值是 true / false ，既 open 的值为 true / false--><input type="checkbox" true-value="确定" false-value="不确定" v-model="determine"> 是否确定<!-- true-value - 表示选中状态下，既 determine 的值false-value - 表示未选中状态下，表示选中状态下，既 determine 的值--><hr><h4>复选框</h4><input type="checkbox" value="LQ" v-model="checkbox"> 篮球<input type="checkbox" value="ZQ" v-model="checkbox"> 足球<input type="checkbox" value="YMQ" v-model="checkbox"> 羽毛球<input type="checkbox" value="PPQ" v-model="checkbox"> 乒乓球<hr><h4>单选下拉菜单</h4>证书等级：<select v-model="select"><option value="C">初级</option><option value="B">中级</option><option value="A">高级</option></select><hr><h4>多选下拉菜单</h4>去过的城市：<select multiple v-model="selects"><!--NOTEmultiple - 规定可同时选择多个选项值 - 布尔值（写该属性表示true，不写表示false）--><option value="苏A">南京</option><option value="苏B">无锡</option><option value="苏C">徐州</option><option value="苏D">常州</option></select>
  </template>
  

1.3 v-if 和 v-for 的 优先级

• vue2：
  • v-for > v-if；
• vue3：
  • v-if > v-for；

1.4 v-for 循环 数组 和 对象

• 这块和 vue2 没啥区别，主要是我自己在 vue2 里面主要是配合数组使用（很少循环对象）；
• 使用 v-for 的时候，记得添加 key；
• 循环数组：
  • 写法一：
    • v-for = "item in arr"；
    • item：数组的每一项元素；
    • arr：需要循环的数组；
  • 写法二：
    • v-for = "(item, index) in arr"；
    • item：数组的每一项元素；
    • index：每一项元素对应的索引；
    • arr：需要循环的数组；
• 循环对象：
  • 使用 v-for 来遍历一个对象的所有属性，遍历的顺序 会基于该对象调用 Object.keys() 的 返回值 来决定；
  • 写法一：
    • v-for = "value in object"；
    • value：属性值；
    • object：需要循环的对象；
  • 写法二：
    • v-for = "(value, name) in object"；
    • value：属性值；
    • name：属性名；
    • object：需要循环的对象；
  • 写法三：
    • v-for = "(value, name, index) in object"；
    • value：属性值；
    • name：属性名；
    • index：索引（Object.keys()的返回值中 name 对应的索引）；
    • object：需要循环的对象；
  • 示例展示：

    <script setup>import { reactive } from 'vue'let student = reactive({styNum: '007', // 学号name: 'Jack', // 名字age: 18 //年龄})
    </script><template><h6>Object.keys() 的 返回值</h6><span>{{ Object.keys(student) }}</span><!-- value in objectvalue：属性值object：循环的对象--><h6>v-for 渲染对象， v-for="value in object"</h6><ul><li v-for="value in student" :key="value">{{ value }}</li></ul><hr><!-- (value, name) in objectvalue：属性值name：属性名object：循环的对象--><h6>v-for 渲染对象， v-for="(value, name) in object"</h6><ul><li v-for="(value, name) in student" :key="name">属性名：{{ name }} --- 属性值： {{ value }}</li></ul><hr><!-- (value, name, index) in objectvalue：属性值name：属性名index: 索引object：循环的对象--><h6>v-for 渲染对象， v-for="(value, name, index) in object"</h6><ul><li v-for="(value, name, index) in student" :key="name">属性名：{{ name }} --- 属性值： {{ value }} --- 索引：{{ index }}</li></ul>
    </template>
    

  • 效果展示：
    
• 通过 key 提高更新性能：
  • 当列表的数据变化时，默认情况下，vue会尽可能的复用已存在的DOM元素，从而提升渲染的性能；但这种默认的性能优化策略，会导致有状态的列表无法被正确更新；
  • 为了给vue一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能；此时，需要为每项提供一个唯一的key属性：
  • key的注意事项：
    • key的类型 只能 是 Number/String；
    • key值必须具有 唯一性；
    • 建议循环的列表有一个属性当 key（该属性的值在此列表中唯一）；
    • 不使用 索引 当 key；
    • 🔺 使用 v-for 指令时一定要指定 key 的值；
  • 示例展示：

    <script setup>import { ref } from 'vue'// 课程let subject = ref([{ id: 1, name: 'Vue' },{ id: 2, name: 'Java' },{ id: 3, name: 'Hadoop' }])// 添加课程function addSubject() {// （数组最前面）添加subject.value.unshift({ id: 4, name: 'Python' })}
    </script><template><button @click.once="addSubject">添加课程（数组最前面）</button><h3>不使用key值</h3><ul><li v-for="sub in subject"><input type="checkbox">{{ sub }}</li></ul><hr><h3>使用索引当key值</h3><ul><li v-for="(sub, index) in subject" :key="index"><input type="checkbox">{{ sub }}</li></ul><hr><h3>使用列表属性当key值（该属性必须再此列表中唯一）</h3><ul><li v-for="sub in subject" :key="sub.id"><input type="checkbox">{{ sub }}</li></ul>
    </template>
    

  • 效果展示：
    • 观察 不使用key + 使用索引作为key 的变化（会导致有状态的列表无法被正确的更新）；
      

1.5 键盘按键修饰符

• 这块和 vue2 没啥区别，主要是我自己在 vue2 里面就知道那么几个修饰符，所以在这里记录了一下；
• 按键别名：.enter、.tab、.esc、.space、.up、.down、.left、.right、.delete (捕获Delete和Backspace两个按键)；
• 系统修饰符：.ctrl、.alt、.shift、.meta；
• 准确的修饰符：.exact（添加了对应键位的修饰符，就必须按下对应的键位，否则事件不生效）（见【示例展示】）；
• 示例展示：

  <script setup>// 弹出消息function showMessage(message) {window.alert(message)}
  </script><template>按下的键中包含 Enter 键事件： <input type="text" @keydown.enter="showMessage('你按下了 Enter 键')"><hr>按下的键中包含 Shift Enter 键事件：<input type="text" @keydown.enter.shift="showMessage('你按下了 Shift + Enter 键')"/><hr>按下的键只有 Shift Enter 键事件：<input type="text" @keydown.enter.shift.exact="showMessage('你只有按下了 Shift + Enter 键，这个事件才会触发')"/>
  </template>
  

1.6 鼠标按键修饰符

• 这块和 vue2 没啥区别，主要是我自己在 vue2 里面基本没遇到过，所以在这里记录了一下；
• 鼠标按键修饰符：
  • .left：鼠标左键；
  • .middle：鼠标中键（滚轮键）；
  • .right：鼠标右键；
• 示例展示：

  <!-- 脚本区域 -->
  <script setup>function showTest(text) {window.alert(text)}
  </script><!-- 视图区域 -->
  <template><!-- 鼠标右键按下 --><button @mousedown.right="showTest('按下的是鼠标右键')">鼠标右键按下</button><hr><!-- 点击时，采用的是鼠标中键 --><button @click.middle="showTest('按下的是鼠标中键')">点击时，采用的是鼠标中键</button><hr><!-- 鼠标左键按下 --><button @mousedown.left="showTest('按下的是鼠标左键')">鼠标左键按下</button>
  </template><!-- 样式区域 -->
  <style>button {border: none;padding: 15px 20px;}button:active {box-shadow: 0 0 5px grey;}
  </style>
  

二、vue2 和 vue3 v-model语法糖 区别

• vue3官网（组件 v-model）；
• 在 vue2 中 v-mode 语法糖 简写的代码：
  • text 和 textarea：<Son :value="msg" @input="msg=$event.target.value" />；
  • radio 和 checkbox：<Son :checked="msg" @change="msg=$event.target.checked" />；
• 在 vue3 中 v-model 语法糖 有所调整：
  • <Son :modelValue="msg" @update:modelValue="msg=$event" />；
• 示例展示：
  • 父组件：

    <script setup>import { ref } from 'vue'// NOTE 在使用 setup 语法糖的 单文件 里面导入组件的时候，无需注册，直接使用即可// TODO 导入组件import SonComponent from '@/components/SonComponent.vue'let searchText = ref('禁止摆烂-才浅')
    </script><template><!-- <son-component :modelValue="searchText" @update:modelValue="newVal => searchText = newVal"></son-component> --><son-component v-model="searchText"></son-component>
    </template>
    

  • 子组件：

    <script setup>// NOTE 接受父组件传递的数据 - 接收数据有两种形式（数组 + 对象）defineProps({modelValue: {type: String,required:  true}})
    </script><template><input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
    </template>
    

• 总结：
  • vue3封装组件支持 v-model 的时候：
    • 父传子 :modelValue 传递数据；
    • 子传父 @update:modelValue 触发事件，更新数据；
  • vue2的 xxx.sync 语法糖解析：
    • 父传子:xxx；
    • 子传父 @update:xxx 在vue3.0 使用 v-model:xxx 代替。