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

相关推荐
zwjapple5 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem8 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊8 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术8 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理8 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing8 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止9 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall9 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴9 小时前
简单入门Python装饰器
前端·python