文件结构

页面结构

html

<template>
	<div>
    
  </div>
</template>

这是对于一个基本的vue文件应有的内容，其中div在template标签下一层只允许有一对

div标签下的内容同一般的HTML语法

script结构

html

<script>
export default {
  data() {
    return {
	
    }
  },
  components:{
    
  },
  mounted() {

  },
  watch: {

  },
  methods: {
    
  },
  created: (){
    
  },
  props:{
    
  },
  // ...其它属性
}
</script>

data
这一部分用于存储变量 注意，data下必须有return，所有变量写在retrun中 变量形式为json，具体如下：
js
```
data() {
  return{
    text1: "hello world!",
    text2: "hello vue!"
  }
}
```
关于使用，见6_变量
注意，所有变量最后都有,（英文逗号），最后一行可以没有
components 这一部分用于存储子组件
详细内容见：5_vue的组件章节
mounted 这一部分用于存储钩子函数
详细内容见：11_钩子函数章节
watch 这一部分用于存储监听变量的函数
详细内容见：12_watch章节
methods 这一部分用于存储函数
详细内容见：13_methods
created 这一部分用于存储的是页面加载完成后执行的代码
可以调用method中的代码
详细内容见11_钩子函数
props 这一部分用于存储的是父组件的变量
详细见：5_vue的组件章节

style结构

vue有两种style结构，其中一个是一般的style

html

<style>
  
</style>

这样会出现一个问题，就是样式穿透，如果导入了组件，会修改组件的样式

因此使用这样的标签可以防止穿透：

html

<style scoped>
  
</style>

但是不能用于：body、div等全局的标签，例如（错误示范！）：

html

<style scopped>
  body{
    margin: 0;
  }
</style>

文件结构 ​

页面结构 ​

script结构 ​

style结构 ​

文件结构

页面结构

script结构

style结构