vue组件介绍

2019-06-22

× 文章目录

1. 简单的Vue组件构成
2. 功能解释

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

本文作者： Lujianlong
本文链接： http://yoursite.com/2019/06/22/vue组件介绍/
本文访问量：160 次
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！