Vue第一篇:组件模板总结

前言

    本文希望读者有一定的Vue开发经验，样例采用vue中的单文件组件，也是我的个人笔记，欢迎一起进步

必须有根元素

    这是一个最简单的vue单文件组件，<template></template>被称为模板，模板中必须有一个根元素

<template>

    <div>

    </div>

</template>

<script>

</script>

 

模板中可以写什么？

1、静态内容（不变的内容称为静态内容）

html元素、vue组件

<template>

    <div>

        <hello-world></hello-world>

    </div>

</template>

备注：组件名使用<hello-world></hello-world>或者<HelloWorld></HelloWorld>均可以

2、插值，也称mustcache语法

{{}}中写的是JS表达式，如果对JS表达式不理解的话，只需要记住能写在return语句后面的，带有返回值的语句，就是JS表达式

注意：{{}}语法不能用在元素属性上，只能用在元素内容上

模板的当前环境为组件对象（或者Vue对象）所以不用写this了,Vue框架已经帮你处理

<template>

    <div>

        <hello-world>

            {{ baby }}

        </hello-world>

    </div>

</template>

3、指令

html元素或者组件上，能写一种v-开头的属性，这些属性称为指令，指令中的值也是JS表达式，当前环境也为组件对象或者Vue对象

再次强调，指令中写的也是JS表达式，如果对JS表达式不理解的话，只需要记住能写在return语句后面的，带有返回值的语句，就是JS表达式

指令只能作用在元素的属性、或者组件的属性上，这点要与{{}}区分开！

<template>

    <div>

        <hello-world @click="fk">

        </hello-world>

    </div>

</template>

 

4、特殊属性（Vue框架自己添加的属性）

如key、ref等属性，这些属性都是Vue框架规定好的属性。

<template>

    <div>

        <hello-world @click="fk" ref="first">

            {{ baby }}

        </hello-world>

    </div>

</template>

 

总结一下

1、元素（组件）内容用插值语法{{}}

2、元素（组件）属性用指令，v-xxx

3、插值和指令中的值都是JS表达式

4、只需要记住能写在return语句后面的，带有返回值的语句，就是JS表达式

5、本文只介绍单文件组件中的模板基础知识