目录
[3.使用JavaScript 表达式](#3.使用JavaScript 表达式)
[3. 布尔型Attribute](#3. 布尔型Attribute)
[4. 动态绑定多个值](#4. 动态绑定多个值)
[5.v-if VS v-show](#5.v-if VS v-show)
[2.v-for 与对象](#2.v-for 与对象)
Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
一、Vue的模板语法
1.学会使用VsCode
- Ctrl + ~（波浪线键） 打开终端
- 执行npm run dev ,运行程序
- 将以下两个模块中的内容删除掉
- 将App.vue文件改成如下
2.文本插值
最基本的数据绑定形式是文本插值，它使用的是"Mustache"语法(即双大括号):
javascript
<script>
export default{
data(){
return{
msg:"This is massa",
hello:"hello world"
}
}
}
</script>
<template>
<h3>模版语法</h3>
<p>{{ msg }}</p>
<p>{{ hello }}</p>
</template>3.使用JavaScript 表达式
每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面 (一般不建议这样做)
javascript
<script>
export default{
data(){
return{
number:10,
ok:true,
message:"hello"
}
}
}
</script>
<template>
<p> {{ number + 1 }} </p>
<p> {{ ok?'Yes':'No' }} </p>
<p> {{ message.split('').reverse().join('') }} </p>
</template>无效
javascript
<script>
</script>
<template>
<!-- 这是一个语句，而非表达式 (错误) -->
<p> {{ var a = 1}} </p>
<!-- 条件控制也不支持，请使用三元表达式 -->
<p> {{if(ok) {return message} }} </p>
</template>原始HTML
双大括号将会将数据插值为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：
javascript
<script>
export default{
data(){
return{
rawHtml:"<a href='https://www.boyatop.cn/'>青城博雅</a>"
}
}
}
</script>
<template>
<p> 纯文本: {{ rawHtml }} </p>
<p> 属性:<span v-html="rawHtml"></span> </p>
</template>二、属性绑定
1.建立一个新项目
App.vue
main.js
HelloWorld.vue
2.属性绑定
双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令
javascript
<template>
<div v-bind:id="dynamicId" v-bind:class="dynamicClass">测试</div>
</template>
<script>
export default{
data(){
return{
dynamicClass:"appClass",
dynamicId:"appid"
}
}
}
</script>
<style>
.appClass{
color: red;
font-size: 30px;
}
</style>v-bind 指令 指示 Vue 将元素的 idattribute 与组件的 dynamicid 属性保持一致。如果绑定的值是 null 或者undefined,那么该 attribute 将会从渲染的元素上移除
比如：
浏览器元素上边不显示
简写方案
因为 v-bind 非常常用，我们提供了特定的简写语法
3. 布尔型Attribute
布尔型 attribute 依据 true /false 值来决定 attribute 是否应该存在于该元素上,disabled 就是最常见的例子之一。
4. 动态绑定多个值
如果你有像这样的一个包含多个 attribute 的JavaScript 对象
javascript
<template>
<div v-bind="ObjectofAttrs">AAAA</div>
</template>
<script>
export default{
data(){
return{
ObjectofAttrs:{
class:"appClass",
id:"appid"
}
}
}
}
</script>
<style>
.appClass{
color: red;
font-size: 30px;
}
</style>三、条件渲染
在 Vue 中，提供了条件渲染，这类似于 Javascript 中的条件语句
- v-if
- v-else
- v-else-if
- v-show
1.v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染
javascript
<template>
<div v-if="flag">你能看到我吗</div>
</template>
<script>
export default{
data(){
return{
flag:true
// flag:false
}
}
}
</script>2.v-else
你也可以使用v-else为v-if添加一个"else区块"
javascript
<template>
<div v-if="flag">你能看到我吗？</div>
<div v-else>你还能看到我吗？</div>
</template>
<script>
export default{
data(){
return{
//flag:true
flag:false
}
}
}
</script>3.v-else-if
顾名思义，v-else-if提供的是相应于v-if的"else if区块"。它可以连续多次重复使用
javascript
<template>
<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else>
Not A/B/C
</div>
</template>
<script>
export default{
data(){
return{
type:"D"
}
}
}
</script>4.v-show
另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样
javascript
<template>
<div v-show="flag">你能看到我吗</div>
</template>
<script>
export default{
data(){
return{
flag:false
}
}
}
</script>5.v-if VS v-show
v-if 是"真实的"按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
**v-if也是惰性的：**如果在初次渲染时条件值为false，则不会做任何事。条件区块只有当条件首次变为true时才被渲染。
相比之下，v-show简单许多，元素无论初始条件如何，始终会被渲染，只有CSS display属性会被切换。
总的来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。
因此，如果需要频繁切换，则使用v-show较好；如果在运行时绑定条件很少改变，则v-if会更合适。
四、循环遍历指令
我们可以使用v-for指令****基于一个数组来渲染一个列表。v-for指令的值需要使用 item in items形式的特殊语法，
其中 items 是源数据的数组，而 item 是迭代项的别名。
javascript
<template>
<h1>列表渲染</h1>
<p v-for="item in names"> {{ item }} </p>
</template>
<script>
export default{
data(){
return{
names:["计算机网络","计算机组成原理",'数据结构与算法','操作系统']
}
}
}
</script> 1.复杂数据
大多数情况，我们渲染的数据源来源于网络请求，也就是JSON格式
javascript
<template>
<h1>列表渲染</h1>
<div v-for="item in result">
<p> {{ item.title }} </p>
<p> {{ item.url }} </p>
</div>
</template>
<script>
export default{
data(){
return{
result:[{
id:"1",
title:"河北大学成功获批国家社会科学基金重大项目",
url:"https://www.hbu.edu.cn/info/1167/20000.htm"
},{
id:"2",
title:"2024年河北省高校图书馆年会在河北大学举办",
url:"https://www.hbu.edu.cn/info/1167/20015.htm"
},{
id:"3",
title:"河北大学举办2025年研究生元旦晚会",
url:"https://www.hbu.edu.cn/info/1167/20023.htm"
}
]
}
}
}
</script>v-for 也支持使用可选的第二个参数表示当前项的位置索引
javascript
<template>
<h1>列表渲染</h1>
<p v-for="(item,index) in names">{{ index }}-{{ item }} </p>
</template>
<script>
export default{
data(){
return{
names:["计算机网络","计算机组成原理",'数据结构与算法','操作系统']
}
}
}
</script>你也可以使用 of 作为分隔符来替代 in 这更接近JavaScript的迭代器语法
2.v-for 与对象
你也可以使用v-for来遍历一个对象的所有属性
javascript
<template>
<h1>列表渲染</h1>
<p v-for="(value,key,index) of userInfo">{{ value }} - {{ key }} -{{ index }}</p>
</template>
<script>
export default{
data(){
return{
userInfo:{
name:"张三",
age:20
}
}
}
}
</script>3.通过key管理状态
Vue默认按照"就地更新"的策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时，Vue不会随之移动DOM元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。
为了给Vue一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的key：
javascript
<template>
<h1>key属性添加到v-for当中</h1>
<p v-for="(item,index) in names" :key="index">{{ item }}</p>
</template>
<script>
export default{
data(){
return{
names:["计算机网络","计算机组成原理",'数据结构与算法','操作系统']
}
}
}
</script>温馨提示：
key在这里是一个通过v-bind绑定的特殊attribute
推荐在任何可行的时候为 v-for 提供一个key
key绑定的值期望是一个基础类型的值，例如字符串或number类型
4.Key的来源
请不要使用index作为key的值，我们要确保每一条数据的唯一索引不会发生变化
javascript
<template>
<h1>列表渲染</h1>
<div v-for="(item,index) in result" :key="item.id" >
<p> {{ item.title }} </p>
<p> {{ item.url }} </p>
</div>
</template>
<script>
export default{
data(){
return{
result:[{
id:"1",
title:"河北大学成功获批国家社会科学基金重大项目",
url:"https://www.hbu.edu.cn/info/1167/20000.htm"
},{
id:"2",
title:"2024年河北省高校图书馆年会在河北大学举办",
url:"https://www.hbu.edu.cn/info/1167/20015.htm"
},{
id:"3",
title:"河北大学举办2025年研究生元旦晚会",
url:"https://www.hbu.edu.cn/info/1167/20023.htm"
}
]
}
}
}
</script>