vue文档(重点学习进修~).doc

- Vue第一天 1.vue组件注册步骤 Vue.js 的组件有三个步骤： 创建组件构造器(Vue.extend()方法 )，注册组件(Vponent())和实例化组件。 !DOCTYPE html html body head title演示Vue/title /head div id=container component1/component1 /div /body script src=./vue.js/script script type=text/javascript // 1. 创建一个组件构造器 var component1 = Vue.extend({ template: divhello world/div }); // 2. 注册组件，并指定组件的标签为component1 Vponent(component1, component1); // 3. 实例化组件 new Vue({ el: #container }); /script /html 浏览器编译后html结构会变为? div id=container divhello world/div /div 页面运行显示为?hello world 2.理解组件的创建和注册。 2-1 Vue.extend() 是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，该构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的html。2-2 Vponent() 是注册组件，需要2个参数，第一个参数是自定义组件的标签，第二个参数是组件的构造器。2-3 组件需要挂载到某个Vue的实例下，否则不生效。如下实例： !DOCTYPE html html body head title演示Vue/title /head div id=container1 component1/component1 /div div id=container2 component1/component1 /div div id=container3 component1/component1 /div /body script src=./vue.js/script script type=text/javascript // 1. 创建一个组件构造器 var component1 = Vue.extend({ template: divhello world/div }); // 2. 注册组件，并指定组件的标签为component1 Vponent(component1, component1); // 3. 实例化组件 container1 new Vue({ el: #container1 }); // 3. 实例化组件 container2 new Vue({ el: #container2 }); // 不实例化 container3 因此第三个自定义标签是不会生效的 /script /html 最终代码被渲染成为如下： div id=container1divhello world/div/divdiv id=container2divhello world/div/div 3.理解Vue全局注册和局部注册 调用Vponent()注册组件时，组件的注册是全局的，如果想要使用组件的局部注册的话，可以用选项对象的components属性实现局部注册。如下代码：中间就把第二步注册组件哪项移到实例化组件里面来了；如下代码： !DOCTYPE html html body head title演示Vue/title /head div id=container1 component1/component1 /div !-- 不能使用component1组件，因为它是container1里面局部注册的 -- div id=container2 component1/component1 /div /body script src=./vue.js/script script type=text/javascr