什么是Vue.js?
Vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

.vue文件分为三部分:template、script、style。
template部分为html代码,其中必须包含一个根组件div:如下

<template>
	<div>
		//在这里放入你的html代码
	</div>
</template>

script部分为js代码:如下

<script>
	import * from '*'  //在这里引入你需要用到的文件
	export default{
		data(){
			return{   //这里不要忘记return
				//这里可以定义初始的变量
			}
		},
		created(){
			//当我们的组件加载完成时,需要执行的内容.created是vuejs中的勾子函数之一
			this.getData();//函数的调用
		},
		methods(){   //定义函数的地方
			getData () {
			     console.log(r)
			},//可以定义多个函数
		}
	}
</script>

点击查看更多关于vue的语法解释

style部分放置样式的css代码

<style></style>  //若只有一个单纯的style标签,style标签内的样式,其他.vue文件都能访问到。
<style scoped></style> //scoped属性,代表只有本页的.vue文件才能访问
<style lang="scss"></style> //lang属性,代表style标签内可以写入scss语法

template和script部分只能有一个,style可以有多个。
.vue文件全部放在src文件夹下面的components文件夹内
同时可以自己新建一个和components文件夹同级的文件夹,来放置请求后台接口文件

Logo

前往低代码交流专区

更多推荐