Component 初识组件

component组件是Vue学习的重点、重点、重点,重要的事情说三遍。所以你必须学好Vue component。其实组件就是制作自定义的标签,这些标签在HTML中是没有的。比如:<diy></diy>,那我们就开始学习这种技巧吧。
全局化注册组件

html

<div id="app">
        <!-- 注册一个全局逐渐 -->
        <register></register>
</div>

js

Vue.component(‘register‘,{
        template:"<h2>{{message}}</h2>",
         data:function(){
            return{
                message:"component注册的全局组件"
            }
          }
     })

       var vm = new Vue({
          el:"#app",
          data:{
          }
       })
局部注册组件

html

<div id="app">
        <!-- 注册一个全局逐渐 -->
        <register></register>
    </div>

js

var  demoTmp ={
    template:`<h2>{{message}}</h2>`,
    data:function(){
        return{
            message:"内部组件components"
        }
    }
}
       var vm = new Vue({
          el:"#app",
          data:{

          },
          components:{
          ‘register‘:demoTmp
          }
       })
时间: 2024-08-07 10:04:14

Component 初识组件的相关文章

angular2 学习笔记 ( Dynamic Component 动态组件)

一样这一篇最要讲概念而已. refer : http://blog.rangle.io/dynamically-creating-components-with-angular-2/ (例子)https://www.ag-grid.com/ag-grid-angular-aot-dynamic-components/ (动态 entryComponents) http://stackoverflow.com/questions/40106480/what-are-projectable-node

component 父子组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Component 组件props 属性设置</title> <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" /> <meta

vue2中component父子组件传递数据props的使用

子组件使用父亲传过来的数据,我们需要通过子组件的 props 选项. 组件实例的作用域是孤立的,不能在子组件的模板内直接引用父组件的数据.修改父亲传过来的props数据的时候 父亲必须传递对象,否则不能修改. 现在是传递对象的语法 app.vue(父组件): <style scoped lang='stylus'> </style> <template> <div> <h1>我是app组件</h1> <zujian :data=

Component 父子组件关系

我们把组件编写的代码放到构造器外部或者说单独文件 我们需要先声明一个对象,对象里就是组件的内容. var zdy = { template:`<div>Panda from China!</div>` } 声明好对象后在构造器里引用就可以了. components:{ " zdy ": zdy } html中引用 <zdy></zdy> 父子组件的嵌套 html <div id="app"> <reg

Vue基础(环境配置、内部指令、全局API、选项、内置组件)

1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装完成后在命令行执行以下命令查看npm包管理器版本 npm -v npm中文文档:https://www.npmjs.cn/ 配置淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后执行 cnpm -v 查看版本信

Vue的学习路

学习资源来自技术胖老师http://jspang.com/2017/03/14/vue2_02/ 一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能. 二.Vue.directive自定义指令 我们在第一季就学习了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-jspang的指

vue2.0学习(二)-全局API

vue2.0学习(二)-全局API GitHub源码 https://github.com/sunnyguyan/VueDemo 1.Vue.directive自定义指令 一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能 二.Vue.directive自定义指令 我们在第一季就学习了内部指令,

Vue.js 组件 component

什么是组件? 组件(component)是Vue.js最强大的功能之一,核心目标是扩展HTML元素,封装可重用的代码.我们可以把组件代码按照template.style.script的拆分方式,放置到对应的 .vue  文件中. Vue.js的组件可以理解为预先定义好行为的ViewModel类,一个组件可以预定义很多选项,但最核心的是以下几个: 模板(template) --  模板声明了数据和最终展现给用户的DOM之间的映射关系 初始数据(data) --  一个组件的初始数据状态.对于可复用

ExtJS关于组件Component生命周期

extjs组件生命周期大体分为3个阶段:初始化.渲染.销毁. 第一阶段:初始化 初始化工作开始于组件的诞生,所有必须的配置设定.事件注册.预渲染处理等都在此时进行. 1.应用组件的配置: 当初始化一个组件的实例时,传递的组件配置对象包含了希望让组件拥有的所有功能,这些都是在Ext.Component基类的前几行代码完成的. 2.注册事件: 诸如enable/disable,show,hide,render,destory,state restore,state save等等事件,是所有继承于Ex