vue初谈组件化

组件化的思想在于,将一个app应用的结构认为是一颗组件树,个人认为跟dom树一样,然后将内部的元素分为一个个组件,组件之间可以复用,解耦高,方便组织与管理,可以通过一对标签代表一段html代码。

且组件之间比较独立。

步骤: 1.创建组件

 // 全局范围内创造的组件,该组件可以 在多个app实例下使用,
const cpn = Vue.extend({
                template: `<div><h2>这是一个模板</h2>
                <p>这是一个标题</p>
                </div>`
            })
  //单个局部范围内创建的组件,该组件只能在该app实例范围内有效
        const app = new Vue({
            el: "#app",
            data: {
                msg: ‘hello‘
            },
            components: {
                cpn: cnpc    // key: 要使用的标签名, value:该标签名代表的代码块
            }
        })

2.使用组件

原文地址:https://www.cnblogs.com/hjk1124/p/12306297.html

时间: 2024-10-28 15:19:28

vue初谈组件化的相关文章

Vue.js的组件化思想--上

Vue.js的组件化思想--上 一.Vue中的组件 Vue视图层的灵魂 -  组件化 组件(Component)是 Vue.js 最强大的功能之一: 组件可以扩展 HTML 元素,封装可重用的代码: 在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 二.全局组件的创建和注册  全局组件-步骤:1.创建组件Vue.extend(),指定组件的名称--2.注册组件Vue.component()--3.

Vue.js的组件化思想--下

Vue.js的组件化思想--下 一.组件间的通信        组件实例的作用域是孤立的:这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.          在 Vue.js 中,父子组件的关系可以总结为 props down, events up .父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.如下图所示: 二. Prop - 父组件传递数据给子

Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用.其实说是多页面应用,实际上在webpack中属于四个app,  如果真是做纯单页面,那应该有二三十个页面吧.所以我这里的多页面应用,是分为四个SPA.比如微信最下面,有四个导航,微信,通讯录,发现,我. 那么这四个导航,就是我的四个SPA,配置多个入口即可. 在这里就不说太多代码了,项目结构将会放

vue中的组件化开发

常常听一些前辈说vue是react的组件化+angular的数据绑定的结合体: 最近刚刚开始使用vue开发项目,我也是在摸索中前进,现在我们来说一说vue的组件化开发. 实际的项目开发,并不像一些文章中的提到的模式,而是如图所示的模式: App.vue是项目的入口.组件实则也是一个以.vue为后缀的文件.我们可以在src\components文件夹下创建一个xxx.vue: 然后在文件中编写可以提出的公共部分的代码为组件.然后在您需要调用该组件的页面,如下图方式调用: 是不是很简单.现在来解释一

Vue.js-资料-组件化思想 —上

一.Vue中的组件 Vue视图层的灵魂 -  组件化 组件(Component)是 Vue.js 最强大的功能之一: 组件可以扩展 HTML 元素,封装可重用的代码: 在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 二.全局组件的创建和注册 案例代码: 调用Vue.extend()创建的是一个组件构造器,构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的HTML: 调用Vu

Vue.js的组件化思想 —下

一.组件间的通信          组件实例的作用域是孤立的:这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.          在 Vue.js 中,父子组件的关系可以总结为 props down, events up .父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.如下图所示: 二. Prop — 父组件传递数据给子组件          pr

vue v-model 与 组件化的表单组件如何沟通

参考mint-ui的代码: https://github.com/ElemeFE/mint-ui/blob/master/packages/radio/src/radio.vue https://github.com/ElemeFE/mint-ui/blob/master/packages/field/src/field.vue 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charse

iOS 组件化方案

概述 近一年iOS业界讨论组件化方案甚多,大体来说有3种. Protocol注册方案 URL注册方案 Target-Action runtime调用方案 URL注册方案据我了解很多大公司都在采用,蘑菇街 App 的组件化之路(http://limboy.me/tech/2016/03/10/mgj-components.html)蘑菇街的Limboy在这篇博客中做了很详尽的阐述 Target-Action runtime调用方案Casa在 iOS应用架构谈 组件化方案(http://casatw

iOS架构组件化

前言 本文简书地址:http://www.jianshu.com/p/2d89f55fc2c4 当一个App只有几个人开发的时候,很容易就会在一个单项目中开发.但当App开发人数越来越多,甚至几百人,十几个不同BU都在协调开发同一个App的时候,就必须对架构进行组件化,才能方便开发.本文主要基于手机淘宝的一次架构探索:手机淘宝客户端架构探索实践,基于此文进行的一些学习和探索,写一篇文章给自己梳理一下. 组件化的目的 首先,第一个问题,为何需要组件化? 如果依旧是单工程项目,或者是多工程引入同一个