vue指令
- 解释：指令 (Directives) 是带有
v-前缀的特殊属性，可以在html标签中使用，可以看成特殊的html属性 - 作用：指令提供了一些特殊的功能，当指向绑定到标签上时，可以给标签增加一些特殊的行为
v-text指令
- 解释：更新元素的
textContent。如果要更新部分的textContent，需要使用{{ Mustache }}插值。
<h1 v-text="msg"></h1>v-html指令
- 解释：更新DOM对象的 innerHTML,html标签会生效
<h1 v-html="msg"></h1>在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
v-if 和 v-show
- 条件渲染
v-if：根据表达式的值的真假条件，销毁或重建元素v-show：根据表达式之真假值，切换元素的 display CSS 属性
<body>
<div id="app">
<!--
v-show: 用于控制元素显示或者隐藏
v-show="值" 如果这个值是true，表示显示 如果是false隐藏
v-show:通过样式 display属性控制显示和隐藏
v-if: 用于控制元素的显示和隐藏
v-if="值" 如果这个值是true，表示显示 如果是false隐藏
v-if通过删除或者创建一个元素来控制显示和隐藏的
以后用哪个？？？？？
如果一个盒子需要频繁的显示和隐藏，应该用 v-show
如果一个盒子要么显示要么隐藏 应该用 v-if
共同点：都能控制显示和隐藏
区别： v-show适合频繁切换 v-if适合要么显示要么隐藏
-->
<h1 v-show="isShow">v-show的盒子</h1>
<h1 v-if="isShow">v-if的盒子</h1>
</div>
<script src="./node_modules/vue/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
// data 提供了vue中使用的数据
data() {
return {
isShow: true
}
},
// methods 对象: 提供vue中使用到的方法
methods: {
}
})
const vm = app.mount('#app')
window.vm = vm
</script>
</body>v-else与v-else-if指令
注意：v-if,v-else-if,v-else 标签中间，不能夹有其他标签内容
v-for指令
- 作用：v-for用于遍历一个数组或者一个对象
- 语法：v-for是一个属性， 谁需要重复的渲染，就给谁加
遍历数组
v-for="item in 数组"item表示每次遍历出来的值，item的名字是可以随意起v-for="(item,index) in 数组"item表示值 index:下标遍历对象
v-for="value in 对象"v-for="(value, key) in 对象"<body> <div id="app"> <h1>pp的爱好</h1> <ul> <li v-for="item in hobby">{{ item }}</li> </ul> <ul> <li v-for="(item,index) in hobby">{{ index }}-----{{ item }}</li> </ul> <ul> <li v-for="(v, k) in girlFriend">{{ k }}------{{ v }}</li> </ul> </div> <script src="./node_modules/vue/dist/vue.global.js"></script> <script> const app = Vue.createApp({ // data 提供了vue中使用的数据 data() { return { hobby: ['唱歌', '跳舞', '打篮球'], girlFriend: { name: 'Cherish', age: 18, height: 170, weight: 100 } } }, // methods 对象: 提供vue中使用到的方法 methods: {} }) const vm = app.mount('#app') window.vm = vm </script> </body>
key属性
- 推荐：使用
v-for的时候提供key属性，能够提升列表渲染的性能 - 说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
- vue key
- vue key属性的说明
当 Vue 正在更新使用 v-for 渲染的元素列表时，如果不加key，它默认使用“就地更新”的策略。
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素
解释：
如果在列表尾部添加一个数据，其余数据保持位置不变，直接在列表尾部新增一个数据；
如果在列表头部添加一个数据，则原来第一个数据位置直接被更新成新增的数据，第二个位置被更新成原列表第一个数据，依此类推，效率低)
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key 属性
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>提升性能：v-pre
- 说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<span v-pre>{{ this will not be compiled }}</span>提升性能：v-once
- 说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<span v-once>This will never change: {{msg}}</span>v-bind 对于class和style的增强
https://v3.cn.vuejs.org/guide/class-and-style.html#绑定-html-class
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。
因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。
不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组
- 使用方式：
v-bind:class="expression"or:class="expression" - 表达式的类型：字符串、数组、对象（重点）
- 语法：
--- class ---
<!-- 1 表达式类型为对象，:class="{类名:布尔条件}" -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>
<!-- 2 表达式类型为数值，:class="[类名或对象,]"-->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>
<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>
--- style ---
<!-- 1 表达式类型为对象，:class="{属性名:属性值}" -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>第二天学习总结
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。
