先来张图,以最简单的方式分析VUE的工作流程,并提出两个问题。本文的重点就是对这两个问题进行分析。
问题1:什么是模板语法?怎么使用?
模板语法包括两个部分:指令和插值
插值表达式:{{}} 可以在视图中显示data中的数据,绑定的数据对象msg的值发生改变,插值的内容也会随之更新。
<div id="animal">
<p>{{msg}}</p> //str必须在data中存在,且{{}}中必须是一个表达式,而不是语句
</div>
<script>
const vm = new Vue({
el:'#app',//被称作挂载点
data:{
msg:'VUE'
}
})
</script>
指令:即带有v-前缀的特殊属性,其属性值是单一的js表达式。指令的职责是属性值发生变化时,在DOM中进行相应的操作。VUE提供了十几种指令,介绍几种最常见的指令:
1. v-bind 动态更新HTML元素上的属性
<body>
<div id="app">
<a v-bind:href="url">跳转到百度页面</a>
<a :href="url">跳转到百度页面</a> //简写形式--语法糖
</div>
<script src="./js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
url:'https://baidu.com'
}
})
</script>
</body>
链接的href属性被动态设置了,当数据变化时,就会重新渲染。
<body>
<div id="app">
<div v-bind:class="{'active':isActive}">你好呀</div>
<div v-bind:class="[color,emUpper]">小修狗</div>
</div>
<script src="./js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
isActive:true,
color:'zhonghua',
emUpper:false
}
})
</script>
</body>
类名active依赖于数据isActive的值,当其值为true时,div会拥有类名active,为false则没有。当需要应用多个class时,可以使用数组语法,给v-bind:class绑定一个数组。也可以直接给元素绑定内联样式。
2. 条件渲染指令:v-if、v-else-if、v-else 可以根据表达式的值在DOM中渲染或销毁元素/组件。
<body>
<div id="app">
<p v-if="status === 1">当status为1时显示该行</p>
<p v-else-if="status === 2">当status为2时显示改行</p>
<p v-else>否则显示该行</p>
</div>
<script src="./js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
status: 1
}
})
</script>
</body>
3. v-show 用法和v-if用法基本一致,只不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时,元素会隐藏,查看DOM结构会看到元素上加载了内联样式 display:none。
<body>
<div id="app">
<p v-show="status === 1">当status为1时显示该行</p>
</div>
<script src="./js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
status:2
}
})
</script>
</body>
4. v-for 当需要将一个数组遍历或枚举一个对象循环显示时,就会用到列表渲染指令v-for。
<body>
<div id="app">
<ul>
<li v-for="one in person">{{one.name + '-' + one.age}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
person:[
{name:'yuran1',age:23},
{name:'yuran2',age:18},
{name:'yuran3',age:29}
]
}
})
</script>
</body>
还有一些常见的指令:v-htm、v-text、v-cloak、v-once、v-pre。推荐B站上的一个视频,讲得十分详细,当然这个视频集包括VUE2+VUE3的全面知识点,很不错的学习资源~
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili
问题2:什么是数据代理?原理是什么?
简单地说,数据代理就是通过一个对象对另一个对象中的数据进行操作。
const vm = new Vue({
el:'#app',
data:{
msg:'你好呀~'
}
})
从代码中可以看到Vue()中包含一个对象,这个对象称为配置对象。那么vm对象和配置对象是不是同一个东东?答案:NO
vm代理了配置对象中data的数据,因而vm身上也有和data当中同名的属性。在模板中访问的都是vm身上的属性,修改vm的属性数据其实就是在修改配置对象中data的数据。
学校的小猫咪太治愈了~