（三）快速上手VUE 单文件语法、组件、示例build生成并部署上线

最新推荐文章于 2024-07-28 16:17:13 发布

Breanne Hui~辉

最新推荐文章于 2024-07-28 16:17:13 发布

阅读量553

点赞数

分类专栏： vue学习笔记文章标签： vue单文件语法 vue组件使用 vue文件生成 vue文件部署

本文链接：https://blog.csdn.net/weixin_43291242/article/details/87624067

版权

本文介绍了Vue的单文件组件语法，包括模板语法、子组件引用，详细讲解了如何使用scss，以及Vue项目的构建与部署步骤。通过组件化思想，实现了代码模块化，便于大型项目管理。最后，提到了生成的HTML仅包含基本结构和JS，提高了前端代码的安全性。

摘要由CSDN通过智能技术生成

1.模板语法介绍

<!-- 【html代码】 最多可以包含一个 -->
<template>
   <div>
   	"template"标签渲染出来是空的，因此内容部分需整体出现，需加一个div框起来。
   </div>
</template>
<!-- 【js代码】 最多可以包含一个 -->
<script>
	export default{
    
		data(){
    
			//必须是函数
			return {
    
				datalist:["aa","bb"],
				mytext:""
			}
		},
		methods:{
    
			handleClick(){
    
				this.datalist.push(this.mytext);
			}
		}
	}
</script>

<!-- 【css代码】 可以包含多个  -->
<style lang="css">
  /* style标签，css全局生效*/
</style>