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、本文只介绍单文件组件中的模板基础知识

相关推荐
白白李媛媛1 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i9 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟14 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览17 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少19 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z31 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
编程猪猪侠32 分钟前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
满分观察网友z33 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
bemyrunningdog35 分钟前
二进制权限控制方案
javascript·react.js·ecmascript
西西木科技丨Shopify开发机构39 分钟前
如何在 Shopify 中建立重定向
前端·html