Web前端学习 第7章 Vue基础教程3 模板语法
原创
一、指令
指令 (Directives) 是带有 v- 前缀的特殊属性，在此之前我们学习过的指令如下所示：
- v-bind
- v-on
本节我们将会介绍更多的vue指令。
二、条件判断
通过v-if和v-show指令可以控制元素的显示与隐藏，区别如下：
v-if='false'：不会渲染DOM，查看元素不可见。v-show='false'：会渲染DOM，查看元素可见，但是样式为display:none;
下面我们通过事件来控制元素的可见性。
1 <div>
2 <button @click="showOrNot">显示与隐藏</button>
3 <h2 v-if="isShow">hello world</h2>
4 <h2 v-show="isShow">hello world</h2>
5 </div>
6
7 export default {
8 data(){
9 return {
10 isShow:true
11 }
12 },
13 methods:{
14 showOrNot(){
15 this.isShow = !this.isShow;
16 }
17 }
18 }三、显示列表
显示列表的功能在web应用中是非常常见的，例如文章列表、博客列表，学生列表等等，可以使用v-for指令将数据绑定在列表中，实例代码如下所示：
1 <template>
2 <ul>
3 <li v-for="fruit in fruits">{{fruit}}</li>
4 </ul>
5 </template>
6
7 <script>
8 export default {
9 data(){
10 return {
11 fruits:["香蕉","苹果","鸭梨"]
12 }
13 }
14 }
15 </script>v-for="fruit in fruits中的fruit是fruits中的元素，fruits是data中的数据，此数据是一个数组，fruit则是数组中的元素。
可以通过下面的方式获取索引值
1 <li v-for="fruit,index in fruits">
2 <p>名称：{{fruit}}</p>
3 <p>索引：{{index}}</p>
4 </li>在开发的过程中，经常会遇到这种情况，数据集合的每一个元素并不是简单的字符串，而是对象，我们同样可以使用v-for执行遍历所以元素以及元素的属性。
示例代码如下所示：
1 export default {
2 data(){
3 return {
4 students:[
5 {name:"小明",age:2},
6 {name:"小亮",age:3},
7 {name:"小红",age:4},
8 ]
9 }
10 }
11 }
12
13 <table>
14 <thead>
15 <th>序号</th>
16 <th>姓名</th>
17 <th>年龄</th>
18 </thead>
19 <tbody>
20 <tr v-for="student,index in students">
21 <td>{{index + 1}}</td>
22 <td>{{student.name}}</td>
23 <td>{{student.age}}</td>
24 </tr>
25 </tbody>
26 </table>上述代码将一个学生列表数据放在了表格元素内。
四、组件嵌套
组件命名
自定义组件一般在components目录中创建，命名用大驼峰的方式。
接下来我们创建两个组件，分别命名如下：
- Hello
- HelloWorld
如果首字母小写切与html标签重名，程序会报错。
注册组件
通过下面的代码，可以将外部组件引入到当前组件
1 import Hello from "@/components/Hello"
2 import HelloWorld from "@/components/HelloWorld"
3 export default {
4 components:{
5 Hello,
6 HelloWorld
7 }
8 }在template中，组件的标签不区分大小写，切驼峰命名的组件可以使用 - 链接。
1 <div>
2 <hello></hello>
3 <Hello></hello>
4 <HelloWorld></HelloWorld>
5 <Hello-world></Hello-World>
6 </div>一个项目中，推荐使用统一的写法，本教程主要使用小写，并且用 - 链接单词。
组件传值
组件在嵌套的过程中，经常会遇到互相传递数据的情况，我们会在下一节讲解如何实现组件之间的数据传递。
五、课后练习
- 在单文件组件中实现一个图片切换效果，图片与数字列表都要使用列表展示。
- 用组件化的开发方式制作融职教育手机端的首页，组件名称如下所示：
- Search
- Swiper
- Container
- Menu
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。