郑州网站建设,郑州网站制作,郑州做网站,巩义网站建设,荥阳网站建设,偃师网站制作-全栈网络

vue.js基础知识之元素组件化基础知识分享
当前位置:首页 > 建站技巧 > 网站代码 >

vue.js基础知识之元素组件化基础知识分享

时间: 2018-11-24 分类: 网站代码 浏览次数:

在具体项目开发,网站建设中,vue.js一项好用的功能叫做组件化,也就是元素以及模块的组件化,实现相同板块及功能的复用性,在多个界面可同时调用,今天我们来认识一下vue.js中一...

在具体项目开发,网站建设中,vue.js一项好用的功能叫做组件化,也就是元素以及模块的组件化,实现相同板块及功能的复用性,在多个界面可同时调用,今天我们来认识一下vue.js中一个核心功能-组件化。

vue.js基础知识之元素组件化基础知识分享
 
在vue.js中什么是组件(component)?
vue的组件简单来说就是可复用的项目板块,已经封装好的代码复用,甚至是模块的附件,而组件化让Vue.js使用起来非常方便,同时极大减少工作量代码量,同时保证代码的便捷维护。同时在vue的组件中,它们每一个都是独立创建的vue实例,拥有完整的组件参数以及所以函数设置。
其中vue组件共分为两种,其声明方式其实都是在实例化一个vue之后,进行创建,一种全局组件,一种局部组件,顾名思义,就是根据组件的不同调用使用及调用位置来划分。

vue中组件如何创建?
1.全局组件的创建,任何组件都需要首先实例化一个对象,其次再创建组件,这里不掩饰,创建全局组件代码如下:

 Vue.component('my-zujian',{

   template:`<div>我是一个全局组件</div>`

 })

当组件注册之后,便可以直接使用<my-zujian></my-zujian>在任意模板中进行调用。

2.局部组件的创建,具体代码写法如下:

new Vue({

 components:{

   'my-zujian':{

    template:`<div>我是一个局部组件</div>`

     }

   }

  })
全局组件可以在项目中任意位置使用,而局部组件只能在其父级中调用。

vue组件如何调用?
既然创建了组件,肯定就需要学会如何调用组件进行使用,组件的调用分为以下三个步骤:
1.首先需要使用import将组件引入到你的目标文件中,代码写法如下:
import my-zujian from './zujian.vue'

2.在export default中写入组件,具体代码如下:

 export default {
        components: {myZuJian},
        methods: {},
   }

3.对组件进行标签调用,具体代码如下:

<template>
    <div id="my-vue">
        <myZuJian></myZuJian>
    </div>
</template>
通过以上三步,就可以实现组建的调用了,是不是很简单。

 

组件化是vue使用的一个重要知识点,大家可以自己再本地搭建脚手架进行实际测试体会,全栈网络专业企业网站建设,郑州网站建设,欢迎大家随时来电咨询。


本文关键词: vue 未经允许不得转载:郑州网站建设|郑州网站制作|荥阳网站建设|巩义网站建设|网站优化-全栈网络



Copyright © 2017-2020 版权所有:全栈网络工作室 备案号:豫ICP备17039206号-1 HTML网站地图
郑州网站建设|郑州网站制作|郑州做网站|巩义网站制作|荥阳做网站|偃师网站制作-全栈网络