文件结构

页面结构

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

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

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

script结构

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

  },
  watch: {

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

• data

  这一部分用于存储变量 注意，data下必须有return，所有变量写在retrun中 变量形式为json，具体如下：

  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

<style>
  
</style>

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

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

<style scoped>
  
</style>

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

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