【融职培训】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

2显示与隐藏 3

hello world

4

hello world

5

6 7exportdefault { 8    data(){ 9return {10isShow:true11        }12    },13    methods:{14        showOrNot(){15this.isShow = !this.isShow;16        }17    }18}

三、显示列表

显示列表的功能在web应用中是非常常见的，例如文章列表、博客列表，学生列表等等，可以使用v-for指令将数据绑定在列表中，实例代码如下所示：

1 2

3
• {{fruit}}
4

5 6 7 8exportdefault { 9    data(){10return {11fruits:["香蕉","苹果","鸭梨"]12        }13    }14}15

v-for="fruit in fruits中的fruit是fruits中的元素，fruits是data中的数据，此数据是一个数组，fruit则是数组中的元素。

可以通过下面的方式获取索引值

1

2

名称：{{fruit}}

3

索引：{{index}}

4

在开发的过程中，经常会遇到这种情况，数据集合的每一个元素并不是简单的字符串，而是对象，我们同样可以使用v-for执行遍历所以元素以及元素的属性。

示例代码如下所示：

1export default { 2    data(){ 3        return { 4            students:[ 5                {name:"小明",age:2}, 6                {name:"小亮",age:3}, 7                {name:"小红",age:4}, 8            ] 9        }10    }11}1213

14151617181920212223242526

序号	姓名	年龄
{{index + 1}}	{{student.name}}	{{student.age}}

上述代码将一个学生列表数据放在了表格元素内。

四、组件嵌套

组件命名

自定义组件一般在components目录中创建，命名用大驼峰的方式。

接下来我们创建两个组件，分别命名如下：

Hello

HelloWorld

如果首字母小写切与html标签重名，程序会报错。

注册组件

通过下面的代码，可以将外部组件引入到当前组件

1import Hello from "@/components/Hello"2import HelloWorld from "@/components/HelloWorld"3exportdefault {4    components:{5        Hello,6        HelloWorld7    }8}

在template中，组件的标签不区分大小写，切驼峰命名的组件可以使用-链接。

1

23456

一个项目中，推荐使用统一的写法，本教程主要使用小写，并且用-链接单词。

组件传值

组件在嵌套的过程中，经常会遇到互相传递数据的情况，我们会在下一节讲解如何实现组件之间的数据传递。

五、课后练习

在单文件组件中实现一个图片切换效果，图片与数字列表都要使用列表展示。

用组件化的开发方式制作融职教育手机端的首页，组件名称如下所示：

Search

Swiper

Container

Menu

【融职教育】在工作中学习，在学习中工作