VUE 基本结构

一、 基本结构

• vue文件的基本结构
  此处是我随意敲的代码内容（仅供参考）

代码内有注释

<template>
/*写一个用于挂载的外层根节点，此处用的div标签*/
<div>
/*这里div里的双大括号也就是moustache语法。
可以将script里数据返回值的名称直接填入大括
号便可以获取到返回值。此处举例获取num的值*/
<div class='name'>{{num}}</div>
<input :value='content'/>
</div>
</template>
/*此处sth.vue文件的导入内容也是由它自身的export default抛出的*/
import sth from './spath/sth.vue'
<script>
export default {
/*此处component用于挂载从外部导入的vue文件*/
components: {
sth
}
data () {
return {
/*这里随便举例写了一个数据返回值可以自己定义*/
num:10
}
},
methods : {
/*这里的函数也可以获取template内元素的属性
值以使用,此处是名为changevalue的函数获取的
是input标签内的value的值*/
changevalue(value){}
},
computed: {
}
}
</script>
<style>
/*此处给模板内类名为name的元素添加样式*/
.name {
display：block;
width:200px;
height:200px;
}
</style>

以上便是一个Vue文件的基本组成 各元素在下表解释

• 点赞 1
• 收藏
• 分享
• 文章举报