vue文档(重点学习)

第1页Vue第一天1.vue组件注册步骤1.Vue.js的组件有三个步骤：创建组件构造器(Vue.extend()方法)，注册组件(Vue.component())和实例化组件。!DOCTYPEhtmlhtmlbodyheadtitle演示Vue/title/headdivid=containercomponent1/component1/div/bodyscriptsrc=./vue.js/scriptscripttype=text/javascript//1.创建一个组件构造器varcomponent1=Vue.extend({template:'divhelloworld/div'});//2.注册组件，并指定组件的标签为component1Vue.component('component1',component1);//3.实例化组件newVue({el:'#container'});/script/html浏览器编译后html结构会变为divid=containerdivhelloworld/div/div页面运行显示为helloworld第2页2.理解组件的创建和注册。2-1Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，该构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的html。2-2Vue.component()是注册组件，需要2个参数，第一个参数是自定义组件的标签，第二个参数是组件的构造器。2-3组件需要挂载到某个Vue的实例下，否则不生效。如下实例：!DOCTYPEhtmlhtmlbodyheadtitle演示Vue/title/headdivid=container1component1/component1/divdivid=container2component1/component1/divdivid=container3component1/component1/div/bodyscriptsrc=./vue.js/scriptscripttype=text/javascript//1.创建一个组件构造器varcomponent1=Vue.extend({template:'divhelloworld/div'});//2.注册组件，并指定组件的标签为component1Vue.component('component1',component1);//3.实例化组件container1newVue({el:'#container1'});//3.实例化组件container2第3页newVue({el:'#container2'});//不实例化container3因此第三个自定义标签是不会生效的/script/html最终代码被渲染成为如下：divid=container1divhelloworld/div/divdivid=container2divhelloworld/div/div3.理解Vue全局注册和局部注册调用Vue.component()注册组件时，组件的注册是全局的，如果想要使用组件的局部注册的话，可以用选项对象的components属性实现局部注册。如下代码：中间就把第二步注册组件哪项移到实例化组件里面来了；如下代码：!DOCTYPEhtmlhtmlbodyheadtitle演示Vue/title/headdivid=container1component1/component1/div!--不能使用component1组件，因为它是container1里面局部注册的--divid=container2component1/component1/div/bodyscriptsrc=./vue.js/scriptscripttype=text/javascript//1.创建一个组件构造器varcomponent1=Vue.extend({template:'divhelloworld/div'});//3.实例化组件container1newVue({el:'#container1',components:{'component1':component1}第4页});//实例化container2是不生效的newVue({el:'#container2'})/script/html实例化container2是不生效的，并且在浏览器控制台会报如下错误：4.理解父组件和子组件。在一个组件中包含另一个组件，那么另一个组件就是该组件的子组件。如下代码：!DOCTYPEhtmlhtmlbodyheadtitle演示Vue/title/headdivid=container1parent-component/parent-component/div/bodyscriptsrc=./vue.js/scriptscripttype=text/javascript//1.创建一个组件构造器varChild=Vue.extend({template:'divhelloworld/div'});varParent=Vue.extend({//在组件内部使用child-component组件template:'divhelloworldchild-component/child-component/div',components:{//局部注册Child组件第5页'child-component':Child}});//全局注册Parent组件Vue.component('parent-component',Parent);//实例化组件newVue({el:'#container1'})/script/html简单理解代码如下：1.varChild=Vue.extend(...)定义一个Child组件构造器。2.varParent=Vue.extend(...)定义一个Parent组件构造器。3.components:{'child-component':Child},将Child组件注册到Parent组件，并将Child组件的标签设置为child-component;4.template:渲染html模板，找到template选项，然后使用child-component组件。5.注册Parent组件Vue.component('parent-component',Parent);6.最后实例化组件，需要到html元素为id='container1'里面去。Child组件是在Parent组件中注册的，只能在Parent组件中注册的。如下几种情况都不行的。4-1以子标签的形式在父组件中使用；如下代码：!DOCTYPEhtmlhtmlbodyheadtitle演示Vue/title/headdivid=container1parent-componentchild-component/child-component/parent-component/div/bodyscriptsrc=./vue.js/script第6页scripttype=text/javascript//1.创建一个组件构造器varChild=Vue.extend({template:'divhelloworld/div'});varParent=Vue.extend({//在组件内部使用child-component组件template:'divhelloworld/div',components:{//局部注册Child组件'child-component':Child}});//全局注册Parent组件Vue.component('parent-component',Parent);//实例化组件newVue({el:'#container1'})/script/html上面调用子组件的方式是无效的，因为在js里面当父组件要需要的html模板template的内容的时候已经决定了需要渲染什么，所以当parent-component运行的时候，在父组件使用自定义的子标签。运行时会当做html的普通标签来渲染，但是它又不是普通的html标签，因此会被忽略掉。4-2.在父组件标签外使用子组件。divid=container1parent-component/parent-componentchild-component/child-component/divjs代码还是上面的一样，运行完成后，在浏览器下会报错如下：第7页5.理解组件的语法糖。我们可以使用更简单的方式来注册组件。5-1使用Vue.component()直接创建和注册组件。如下代码：!DOCTYPEhtmlhtmlbodyheadtitle演示Vue/title/headdivid=container1component1/component1/div/bodyscriptsrc=./vue.js/scriptscripttype=text/javascript//全局注册Vue.component('component1',{template:'divhelloworld222/div'});//实例化varvm1=newVue({el:'#container1'});/script/htmlVue.component()的第一个参数是标签名称，第二个参数是一个选项对象，使用选项对象的template属性定义，使用该方式，在Vue源码中会调用Vue.extend()方法。第8页注意：在template元素中需要使用一个标签容器包围，比如我们可以把div元素去掉的话，只放内容的话，会报错如下：5-2在选项对象的components属性中实现局部注册。!DOCTYPEhtmlhtmlbodyheadtitle演示Vue/title/headdivid=container1component1/component1/divdivid=container2component2/component2component3/component3/div/bodyscriptsrc=./vue.js/scriptscripttype=text/javascript//全局注册，my-component1是标签名称Vue.component('component1',{template:'divThisisthefirstcomponent!/div'})varvm1=newVue({el:'#container1'})//实例化局部注册varvm1=newVue({el:'#container2',第9页components:{//局部注册，component2是标签名称'component2':{template:'divcomponent2/div'},//局部注册，component3是标签名称'component3':{template:'divcomponent3/div'}}});/script/html6.学会使用script或template标签。