#博学谷IT学习技术支持#
目录
1.vue指令
1.1vue指令 v-text和v-html
1.2vue指令 v-show和v-if
1.3vue指令-v-for
2.vue基础_虚拟dom
1.vue指令
1.1vue指令 v-text和v-html
目的: 更新DOM对象的innerText/innerHTML
语法:
v-text="vue数据变量"
v-html="vue数据变量"
注意: 会覆盖插值表达式
1.2vue指令 v-show和v-if
目标: 控制标签的隐藏或出现
语法:
v-show="vue变量"
v-if="vue变量"
原理
v-show 用的display:none隐藏 (频繁切换使用)
v-if 直接从DOM树上移除
高级
v-else使用
1.3vue指令-v-for
目标: 列表渲染, 所在标签结构, 按照数据数量, 循环生成
语法
v-for="(值, 索引) in 目标结构"
v-for="值 in 目标结构"
目标结构:
可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
注意:
v-for的临时变量名不能用到v-for范围外
<template>
<div id="app">
<div id="app">
<!-- v-for 把一组数据, 渲染成一组DOM -->
<!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
<p>学生姓名</p>
<ul>
<li v-for="(item, index) in arr" :key="item">
{{ index }} - {{ item }}
</li>
</ul>
<p>学生详细信息</p>
<ul>
<li v-for="obj in stuArr" :key="obj.id">
<span>{{ obj.name }}</span>
<span>{{ obj.sex }}</span>
<span>{{ obj.hobby }}</span>
</li>
</ul>
<!-- v-for遍历对象(了解) -->
<p>老师信息</p>
<div v-for="(value, key) in tObj" :key="value">
{{ key }} -- {{ value }}
</div>
<!-- v-for遍历整数(了解) - 从1开始 -->
<p>序号</p>
<div v-for="i in count" :key="i">{{ i }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
arr: ["小明", "小欢欢", "大黄"],
stuArr: [
{
id: 1001,
name: "孙悟空",
sex: "男",
hobby: "吃桃子",
},
{
id: 1002,
name: "猪八戒",
sex: "男",
hobby: "背媳妇",
},
],
tObj: {
name: "小黑",
age: 18,
class: "1期",
},
count: 10,
};
},
};
</script>
总结: vue最常用指令, 铺设页面利器, 快速把数据赋予到相同的dom结构上循环生成
2.vue基础_虚拟dom
目标: 了解虚拟DOM的概念
.vue文件中的template里写的标签, 都是模板, 都要被vue处理成虚拟DOM对象, 才会渲染显示到真实DOM页面上
内存中生成一样的虚拟DOM结构(==本质是个JS对象==)
因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了
比如template里标签结构
对应的虚拟DOM结构
以后vue数据更新
生成新的虚拟DOM结构
和旧的虚拟DOM结构对比
利用diff算法, 找不不同, 只更新变化的部分(重绘/回流)到页面 - 也叫打补丁
==好处1: 提高了更新DOM的性能(不用把页面全删除重新渲染)==
==好处2: 虚拟DOM只包含必要的属性(没有真实DOM上百个属性)==
总结: 虚拟DOM保存在内存中, 只记录dom关键信息, 配合diff算法提高DOM更新的性能
在内存中比较差异, 然后给真实DOM打补丁更新上
1vue指令
