vue组件介绍

快来打我* 2022-01-14 02:21 232阅读 0赞

# 简单的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>
    
    
    <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代码