vue组件介绍

简单的Vue组件构成

开始使用vue.js编写前端代码的时候，我们的了解一下.vue文件的基本构成，不能说是.vue文件，其实是一个组件，下面我们跟着代码去了解一下吧。

<template>
  <div class="hello">
    
  </div>
</template>

<script>
import *** from ***;
export default {
  props:{},
  watch: {},
  data: function(){
      return{
        
      }
   },
    //方法集
   methods:{
       
   },
   created（）{},
   mounted（）{}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
           

功能解释

• 里面写的是html代码
• 里面写的是js代码
  • import *** from ***; 代表的是导入某些组件和样式
  • export default 导出

//简单介绍一下export,export default和export的区别和使用方法
1.export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
2.import用于在一个模块中加载另一个含有export接口的模块

示例：
//导出单个变量
export let name = "张三" (name.js)
//导入
import {name} from "./name.js"
export default {
    ...
}

//导出多个变量
let name1 = "张三";
let name2 = "李四";
export {name1,name2} (name.js)
//导入多个变量
import {name1,name2} from "./name.js"
export default {
    data: function(){
      return{
        
      }
   },
   created:{
       alert(name1+"say hello to"+name2)
   }
}

//导出函数
function say(){
    console.log("hello world");
}
export {say}      (say.js)
//导入函数
import say from "./say.js"
export default {
    data: function(){
      return{
        
      }
   },
   created:{
       say(); //控制台打印hello world
   }
}

3.export与export default均可用于导出常量、函数、文件、模块等,在一个文件或模块中;
  export、import可以有多个，export default仅有一个;
  通过export方式导出，在导入时要加{ }，export default则不需要

示例：
//导出
let name = "胖子";
export dafault name;
//引入
import name from "./name.js"
其他的都类似，不做一一介绍
           

• created:html加载完成之前，执行。执行顺序:父组件-子组件
• mounted:html加载完成后执行。执行顺序:子组件-父组件
• methods:事件方法执行。
• watch:去监听一个值的变化，然后执行相对应的函数。
• computed:computed是计算属性，也就是依赖其它的属性计算所得出最后的值
• props：接收父组件传递过来的参数
• 用来编写css代码