《循序渐进Vue.js前端开发实战》电子书学习-第2章-Vue模板应用
模板是vue框架的主要组成部分，vue采用了基于html的模板语句。在vue的分层设计思想中，模板属于视图层，有了模板功，开发者可以方便的将项目组件化，也可以方便的封装定制化的通用组件。在编写组件的时候，模板的作用是让开发者把重心放在页面布局渲染上，而不需要关心数据逻辑。
目录
模板是vue框架的主要组成部分，vue采用了基于html的模板语句。在vue的分层设计思想中，模板属于视图层，有了模板功，开发者可以方便的将项目组件化，也可以方便的封装定制化的通用组件。在编写组件的时候，模板的作用是让开发者把重心放在页面布局渲染上，而不需要关心数据逻辑。
模板基础
模板的最直接用途就是帮助我们通过数据来驱动视图的渲染。
学习模板，先从学习插值开始。
模板插值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="Application" style="text-align: center;">
<h1>这里是模板的内容：{{count}}此点击</h1>
<button v-on:click="click">按钮</button>
</div>
<script>
const App={
data() {
return {
count:0
}
},
methods: {
click(){
this.count++
}
},
}
Vue.createApp(App).mount("#Application")
</script>
</body>
</html>运行上面的代码，点击按钮，上面的数字就能够实习变化。在HTML的标签里面使用{{}}就能够进行遍历插值，这是vue中基础的模板语法，可以将当前组件定义的变量插入指定的位置，这种插值会默认实现绑定的效果，当我们修改了变量的值时，其可以同步反馈到页面的渲染上。
要想设置渲染后就不能在修改了，可以在标签体里面加v-once
如果我们想通过双括号将HTML代码插入，最终会以文本的形式渲染出来。我们需要使用v-html指令来完成。
<h1 v-once>这里是模板的内容：<span v-html="counthtml"></span>此点击</h1>
data() {
return {
counthtml:"<span style='color:red;'>0</span>"
}
上面介绍了如何在标签内部进行内容的插值，标签除了这个，本身的属性设置也非常重要，例如需要动态修改标签的style属性，我们可以利用属性插值的方式实现标签属性和变量的绑定。
对于标签属性的插值，不再使用双括号，而是使用v-bind指令，
<h1 v-bind:id="id1">这里是模板的内容：{{count}}此点击</h1>
#h1{
color: red;
}
data() {
return {
count:0,
counthtml:"<span style='color:red;'>0</span>",
id1:"h1"
}
},
我们将di属性动态绑定到了指定的标签中，当vue组件中id1的属性的值发生变化，也会动态反映到h1标签上，我们可以通过这种方式灵活得改变标签的css。v-bind也可以使用在其他html属性，需要使用冒号加属性名的形式指定。
模板指令
vue的模板指令也是HTML标签属性，通常由前缀v-来开头，例如v-bind和v-once都是指令。
大部分指令可以直接设置为JavaScript变量或者单个的js表达式。
<div id="Application" style="text-align: center;">
<h1 v-if="show">title</h1>
</div>
<script>
const App={
data() {
return {
show:false
}
},
methods: {
},
}
Vue.createApp(App).mount("#Application")
</script>上述代码，v-if是一个简单的选择渲染指令，当其为true时，当前标签的元素才会被渲染。
某些特殊的vue指令也可以指定参数，例如v-bind和v-on指令，对于可以添加参数的指令，参数和指令之间使用冒号：来分隔。
指令的参数本身也可以是动态的，例如我们可以定义区分id选择器和类选择器来定义不同的组件样式，之后动态切换组件的属性。
v-bind缩写：，v-on缩写@
条件渲染
条件渲染很多时候是用来控制HTML元素的显示和隐藏。v-if和v-show。
使用v-if指令进行条件渲染
v-if可以有条件的选择是否渲染一个HTML元素。v-if可以设置为一个js遍历或者表达式，当变量或者表达式为真值时，指定元素才会被渲染。
v-if和v-else是互斥出现的，且必须紧随着，中间不能插入其他代码，不然影响识别，但可以在中间插入v-else-if来进行多分支渲染逻辑。
v-if指令的使用必须添加到一个HTML元素上去，如果我们需要使用条件同时控制多个标签元素的渲染，有两种方式实现：
1.使用div对要进行控制的元素进行包装
2.使用template标签对元素进行分组
更加推荐的是下一个，因为HTML渲染元素的时候，使用div包装组件后，div元素本身会被渲染出来，而使用template进行分组的组件渲染后并不会渲染template标签本身。
使用v-show指令进行条件渲染
使用和v-id类似，也是设置条件的值的真假来决定元素的渲染情况。与v-if不一样的是，v-show不支持使用template模板，也不可以和v-else混合使用。
用法虽然相似，两者的渲染逻辑却完全不同。
从元素本身的存在性来说，v-if是真正意义上的条件渲染，其在条件变换的过程中，组件内部的事件监听器都会正常地执行，子组件也会正常销毁或重建。v-if采取的是懒加载的方式进行渲染，如果初始条件为假，这个组件的任何渲染工作都不会进行，直到绑定的条件为真时，才会真正开始渲染此元素。
v-show指令的渲染逻辑只是一种视觉上的田间渲染，实际上无论它的值是true还是FALSE，当前元素都会被渲染，v-show是通过简单切换元素css样式的diaplay来实现展示效果。
v-if有更高的切换性能消耗，v-show有更高的初始渲染性能消耗。在实际开发中，如果组件的渲染条件会比较频繁的切换，建议使用v-show，如果组件的渲染条件在初始指定后很少变化，建议使用v-if指令控制
循环渲染
在网页中，列表是非常常见的一种组件，在列表中，每一行元素都有相似的UI，只是其填充的数据有所不同，使用vue里面的循环渲染，我们可以轻松完成列表试图的构建
v-for指令的使用方法
在vue中，v-for指令可以将一个数组中的数据渲染为列表视图，v-for指令需要设置为一种特殊的语法，为item in list
在上面的格式里，in可以替换为of，都是语法关键字
其中的item是一个临时变量，其为列表中被迭代出的元素名，list则是列表变量本身。
下面是一个渲染五个div里面有数字的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="Application">
<div v-for="item in list">
{{item}}
</div>
</div>
<script>
const App={
data() {
return {
list:[1,2,3,4,5]
}
},
}
Vue.createApp(App).mount('#Application')
</script>
</body>
</html>更多时候，我们需要渲染的数据都是对象数据，使用对象来对列表元素进行填充
例如下面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="Application">
<div v-for="item in list">
{{item.name}}
{{item.num}}
</div>
</div>
<script>
const App={
data() {
return {
list:[
{
name:"1",
num:"111111"
},
{
name:"2",
num:"22222"
},
{
name:"3",
num:"33333"
},
{
name:"4",
num:"44444"
}
]
}
},
}
Vue.createApp(App).mount('#Application')
</script>
</body>
</html>在v-for指令中，我们也可以获取到当前遍历项的索引，index索引是从0开始的
在上面的代码里，v-for指令遍历的是列表，实际我们也可以对一个js对象进行v-for遍历。在js中，列表本身也是一种特殊的对象，我们使用v-for对对象进行遍历的时候，指令中的第一个参数为遍历的对象中的属性的值，第二个参数为遍历的对象中的属性的名字，第三个参数为遍历的索引。
<ol>
<li v-for="(value,key,index) in person">
{{key}}:{{value}}
</li>
</ol>
person:{
name:"1",
age:"18",
num:"111111",
email:"284173081731"
}效果是这样的
需要注意的是，使用v-for进行循环渲染的时候，为了更好对列表项进行重用，我们可以将key绑定为一个唯一的值
<ol>
<li v-for="(value,key,index) in person" :key="index">
{{key}}:{{value}}
</li>
</ol>v-for指令的高级用法
当我们使用v-for对列表进行循环渲染后，实际上也就实现了对数据对象的绑定。当我们调用下面这些函数对列表对象进行更新时，视图也会对应的更新：
push（），pop（），shift（），unshift（），splice（），sort（），reverser（）
这些都是js中数组的一些基本方法。
实际开发中，原始的列表数据往往并不适合直接渲染到页面中，v-for指令支持在渲染前对数据进行额外的处理。
案例：代办任务呀列表应用todolist
步骤一：使用HTML搭建应用框架结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="Application">
<!-- 输入框 -->
<form action="" @submit.prevent="addTask">
<span>新任务</span>
<input type="text" v-model="taskText" placeholder="请输入任务...">
<button>添加</button>
</form>
<!-- 有序列表，使用v-for -->
<ol>
<li v-for="(item,index)in todos">
{{item}}
<button @click="remove(index)">删除任务</button>
<hr>
</li>
</ol>
</div>
</body>
</html>
主要定义了两部分，第一部分是表单输入框，用来新建任务，第二部分有序列表用来展示当前任务。
还需要后续的js代码来实现代码逻辑
实现代办任务列表的逻辑开发
<script>
const App={
data() {
return {
todos:[],
taskText:""
}
},
methods: {
addTask(){
if(this.taskText.length==0){
alert("请输入任务")
return
}
this.todos.push(this.taskText)
this.taskText=""
},
remove(index){
this.todos.splice(index,1)
}
},
}
Vue.createApp(App).mount("#Application")
</script>
技术共进，成长同行——讯飞AI开发者社区
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)