vue文-档(复习重点学习进修~).doc
《vue文-档(复习重点学习进修~).doc》由会员分享,可在线阅读,更多相关《vue文-档(复习重点学习进修~).doc(95页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、-_Vue 第一天1.vue 组件注册步骤1.Vue.js 的组件有三个步骤: 创建组件构造器(Vue.extend()方法 ),注册组件(Vponent()和实例化组件。演示 Vue/ 1. 创建一个组件构造器var component1 = Vue.extend(template: hello world);/ 2. 注册组件,并指定组件的标签为Vponent(component1, component1);/ 3. 实例化组件new Vue(el: #container);浏览器编译后 html 结构会变为 hello world页面运行显示为 hello world-_ 2.理解组件的
2、创建和注册。2-1 Vue.extend() 是 Vue 构造器的扩展,调用 Vue.extend()创建的是一个组件构造器,该构造器有一个选项对象,选项对象的 template 属性用于定义组件要渲染的 html。2-2 Vponent() 是注册组件,需要 2 个参数,第一个参数是自定义组件的标签,第二个参数是组件的构造器。2-3 组件需要挂载到某个 Vue 的实例下,否则不生效。如下实例:演示 Vue/ 1. 创建一个组件构造器var component1 = Vue.extend(template: hello world);/ 2. 注册组件,并指定组件的标签为Vponent(com
3、ponent1, component1);/ 3. 实例化组件 container1new Vue(el: #container1);/ 3. 实例化组件 container2-_new Vue(el: #container2);/ 不实例化 container3 因此第三个自定义标签是不会生效的最终代码被渲染成为如下:hello worldhello world3.理解 Vue 全局注册和局部注册调用 Vponent()注册组件时,组件的注册是全局的,如果想要使用组件的局部注册的话,可以用选项对象的 components 属性实现局部注册。如下代码:中间就把第二步注册组件哪项移到实例化组件里
4、面来了;如下代码:演示 Vue/ 1. 创建一个组件构造器var component1 = Vue.extend(template: hello world);/ 3. 实例化组件 container1new Vue(el: #container1,components: component1: component1-_);/ 实例化 container2 是不生效的new Vue(el: #container2)实例化 container2 是不生效的,并且在浏览器控制台会报如下错误:4.理解父组件和子组件。在一个组件中包含另一个组件,那么另一个组件就是该组件的子组件。如下代码:演示 Vue
5、/ 1. 创建一个组件构造器var Child = Vue.extend(template: hello world);var Parent = Vue.extend(/ 在组件内部使用组件template: hello world ,components: / 局部注册 Child 组件-_child-component: Child);/ 全局注册 Parent 组件Vponent(parent-component, Parent);/ 实例化组件new Vue(el: #container1)简单理解代码如下:1. var Child = Vue.extend(.) 定义一个 Child
6、 组件构造器。2. var Parent = Vue.extend(.) 定义一个 Parent 组件构造器。3. components: child-component: Child, 将 Child 组件注册到 Parent 组件,并将 Child 组件的标签设置为 child-component;4. template: 渲染 html 模板,找到 template 选项,然后使用 child-component 组件。5. 注册 Parent 组件 Vponent(parent-component, Parent);6. 最后实例化组件,需要到 html 元素为 id=containe
7、r1里面去。Child 组件是在 Parent 组件中注册的,只能在 Parent 组件中注册的。如下几种情况都不行的。4-1 以子标签的形式在父组件中使用;如下代码:演示 Vue-_/ 1. 创建一个组件构造器var Child = Vue.extend(template: hello world);var Parent = Vue.extend(/ 在组件内部使用组件template: hello world,components: / 局部注册 Child 组件child-component: Child);/ 全局注册 Parent 组件Vponent(parent-component
8、, Parent);/ 实例化组件new Vue(el: #container1)上面调用子组件的方式是无效的,因为在 js 里面当父组件要需要的 html 模板 template 的内容的时候已经决定了需要渲染什么,所以当 parent-component 运行的时候,在父组件使用自定义的子标签。运行时会当做 html 的普通标签来渲染,但是它又不是普通的 html 标签,因此会被忽略掉。4-2. 在父组件标签外使用子组件。js 代码还是上面的一样,运行完成后,在浏览器下会报错如下:-_5.理解组件的语法糖。我们可以使用更简单的方式来注册组件。5-1 使用 Vponent()直接创建和注册组
9、件。如下代码:演示 Vue/ 全局注册Vponent(component1, template: hello world222);/ 实例化var vm1 = new Vue(el: #container1);Vponent()的第一个参数是标签名称,第二个参数是一个选项对象,使用选项对象的 template 属性定义,使用该方式,在 Vue 源码中会调用 Vue.extend()方法。-_注意: 在 template 元素中需要使用一个标签容器包围,比如我们可以把 div 元素去掉的话,只放内容的话,会报错如下:5-2 在选项对象的 components 属性中实现局部注册。演示 Vue/
10、全局注册,my-component1 是标签名称Vponent(component1,template: This is the first component!)var vm1 = new Vue(el: #container1)/ 实例化 局部注册var vm1 = new Vue(el: #container2,-_components: / 局部注册, component2 是标签名称component2: template: component2,/ 局部注册,component3 是标签名称component3: template: component3);6.学会使用 scrip
11、t 或 template 标签。虽然语法糖简化了组件注册,但是在 template 选项中拼接了 html 元素,这导致 View 和 C 层的高耦合性。幸运的是 Vue.js 提供了 2 种方式将 javascript 中的 html 模板分离出来。6-1 使用 script 标签, 如下代码:演示 Vuehello world!new Vue(el: #container1,components: component1: template: #myComponent)-_注意: 使用标签时,type 指定为 text/x-template,是告诉浏览器这不是一段 js 脚本,浏览器在解析h
12、tml 文档时会忽略 script 标签内定义的内容。6-2 使用标签。不需要指定 type 属性。如下代码:演示 Vuehello world2222!new Vue(el: #container1,components: component1: template: #myComponent)7.理解使用 props。父组件的数据如何传给子组件呢?可以使用 props 把数据传给子组件。代码如下:-_演示 Vue子组件数据myName myName myAge myAge new Vue(el: #container1,data: name: longen,age: 30,component
13、s: component1: template: #myComponent,props: myName, myAge)-_注意: 在子组件中定义 prop 时,使用了 camelCase 命名法。由于 HTML 特性不区分大小写,camelCase 的prop 用于特性时,会转为短横线隔开的,比如上面的代码:在 props 中定义的 myName,在用作特性时需要转换为 my-name理解 prop 的单向绑定既然父组件使用 props 把数据传给了子组件,那么如果子组件修改了数据,对父组件是否有影响呢?看下面的代码如下:演示 Vue* margin: 0;padding: 0;box-siz
14、ing: border-boxhtml font-size: 12px;font-family: Ubuntu, simHei, sans-serif;font-weight: 400body font-size: 1remtable,td,th border-collapse: collapse;border-spacing: 0table width: 100%;margin: 20px;td,-_th border: 1px solid #bcbcbc;padding: 5px 10pxth background: #42b983;font-size: 1.2rem;font-weigh
15、t: 400;color: #fff;cursor: pointertr:nth-of-type(odd) background: #ffftr:nth-of-type(even) background: #eeefieldset border: 1px solid #BCBCBC;padding: 15px;input outline: noneinputtype=text border: 1px solid #ccc;padding: .5rem .3rem;inputtype=text:focus border-color: #42b983;button outline: none;pa
16、dding: 5px 8px;color: #fff;border: 1px solid #BCBCBC;border-radius: 3px;background-color: #009A61;-_cursor: pointer;button:hoveropacity: 0.8;#container1 margin: 0 auto;max-width: 480px;父组件数据name name age age 子组件数据myName myName myAge-_ myAge new Vue(el: #container1,data: name: longen,age: 30,componen
17、ts: component1: template: #myComponent,props: myName, myAge)Vue 第二天第二天1.vue 属性和方法每个 Vue 实例都会代理其 data 对象里所有的属性。如下代码:var data = a: 1;var vm = new Vue(data: data);console.log(vm);console.log(vm.a = data.a); / true/ 设置属性也会影响到原始数据vm.a = 2;console.log(data.a); / 2/ 反之data.a = 3;-_console.log(vm.a); / 3/除了
18、 data 属性,Vue 实例还暴露了一些有用的实例属性与方法。这些属性与方法都有前缀$, 以便与代理的 data 属性区分。var data = a: 1 var vm = new Vue(el: #container1,data: data)console.log(vm.$data = data) / trueconsole.log(vm.$el = document.getElementById(container1) / truedata.a = 5;/ $watch 是一个实例方法vm.$watch(a, function (newVal, oldVal) / 这个回调将在 vm.a
19、 改变后调用 console.log(newVal);console.log(oldVal);)1-1. data 必须是函数必须是函数通过 Vue 构造器传入的各种选项大多数都可以在组件里用。 data 是一个例外,它必须是函数。 如下代码 Vue 会停止,并在控制台会报错。演示 Vuevar data = counter: 0 ;/ 全局注册Vponent(component1, template: message ,data: message: hello);new Vue(el: #container1)data 是函数解决该方案代码如下:-_演示 Vuevar data = coun
20、ter: 0 ;/ 全局注册Vponent(component1, template: counter ,/ data 是一个函数,vue 不会报错,但是我们返回给每个组件的实列引用了同一个 data 对象data: function() return data);new Vue(el: #container1)由于这三个组件共享了同一个 data , 因此增加一个 counter 会影响所有组件!这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题:代码如下:演示 Vue-_/ 全局注册Vponent(component1, template: counter ,/ dat
21、a 是一个函数,vue 不会报错,但是我们返回给每个组件的实列引用了同一个 data 对象data: function() return counter: 0);new Vue(el: #container1)现在每个 counter 都有它自己内部的状态了.2.理解组件的通信。一般情况父子组件是这样的关系,组件 A 在它的模板中使用了组件 B,他们之间必然需要相互通信,父组件要给子组件传递数据,子组件需要将它内部发生的事情告知父组件,为了保证父子组件的解耦,可维护性及可重用性。在 vue.js 中,父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。2-
22、1 使用使用 props 传递数据传递数据不能在子组件的模板内直接引用父组件的数据,要让子组件使用父组件的数据,我们需要通过子组件的 props 选项。如下代码:演示 Vue/ 全局注册Vponent(child, / 声明 props -_props: message,template: message );new Vue(el: #container1)结果在页面上会打印 hello。注意: HTML 特性是不区分大小写的,所以当使用的不是字符串模板,camelCased(驼峰式) 命名的 prop 需要转换为相对应的 kebab-case(短横线隔开式)命名:如下代码:演示 Vue/ 全
23、局注册Vponent(child, / 声明 props props: myMessage,template: myMessage );new Vue(el: #container1)2-2 理解动态理解动态 prop在模板中,要动态地绑定父组件的数据到子模板的 props,使用 v-bind,每当父组件的数据变化时,该变化会传递给子组件。-_使用 v-bind 的缩写语法通常更简单:代码如下:演示 Vuenew Vue(el: #container1,data: parentMsg: Message,components: child: props: myMessage,template:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- vue 复习 重点 学习 进修
限制150内