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:

24、myMessage)3.理解自定义事件父组件使用 props 传递数据给子组件，但是如果子组件需要把数据传回去的话，就需要自定义事件了；3-1 使用使用 v-on 绑绑定自定定自定义义事件事件每个 vue 实例都实现了事件接口，即：1. 使用on(eventName) 监听事件-_2.使用 on(eventName)监听事件 2.使用 emit(eventName) 触发事件注意：注意：on 和 emit 不是 addEventListener 和 dispatchEvent 的别名。且 父组件可以在使用组件的地方直接用 v-on 来监听子组件触发的事件。不能用不能用$on 侦侦听子听子组组件

25、抛出的事件，而必件抛出的事件，而必须须在模板里直接用在模板里直接用 v-on 绑绑定定，就像以下的例子：演示 Vue total Vponent(button-counter, template: counter ,data: function() return counter: 0,methods: increment: function() this.counter += 1;this.$emit(increment);,)new Vue(el: #container1,data: total: 0,methods: incrementTotal: function() this.tota

26、l += 1;)-_上面代码： 初始化时候 实例化设置 data: total: 0, 设置 total 为 0， 子组件 button-counter 默认为 0， 当点击子组件的时候调用 increment 方法，当前的 counter 自增 1， 然后在子组件触发 $emit(increment)事件，当使用 v-on:increment 会监听到事件后，会调用父组件的 incrementTotal 方法，因此父组件也自增 1.上面代码中 子组件已经和它外部完全解耦了。它所做的只是报告自己的内部事件，至于父组件是否关心则与它无关。4.理解使用自定义事件的表单输入组件自定义事件可以用来创建

27、自定义的表单输入组件，使用 v-modal 来进行数据双向绑定。比如如下代码：上面的代码是下面的语法糖；如下代码：因此在创建组件中时，相当于下面的简写；如下代码：所以要让组件的 v-model 生效，必须满足下面的条件：1. 接受一个 value 属性。2. 在有新的 value 时触发 input 事件。如下测试代码：演示 VueVponent(currency-input, template: $,props: value,methods: / 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制updateValue: function (value) var formatted

28、Value = value/ 删除两侧的空格符 .trim()/ 保留 2 小数位.slice(0, value.indexOf(.) + 3)/ 如果值不统一，手动覆盖以保持一致if (formattedValue != value) this.$refs.input.value = formattedValue/ 通过 input 事件发出数值this.$emit(input, Number(formattedValue);new Vue(el: #container1,data: price: 0)5.单个 slot 标签中的任何内容都被视为 备备用内容用内容。备用内容在子组件的作用域内

29、编译，并且只有在宿主元素为空，且没有插入的内容时才显示备用内容。如果标签中有内容的话，就显示该内容。比如 my-component 组件有如下代码：this is a component如果没有分发内容，则显示 slot 中的内容asdsadsdad父组件有如下代码：-_Hello Vue.js渲染后的结果为：this is a component Hello Vue.js asdsadsdadthis is a component 如果没有分发内容，则显示 slot 中的内容 asdsadsdad所有测试实例代码如下：演示 VueHello Vue.jsthis is a component

30、如果没有分发内容，则显示 slot 中的内容asdsadsdad-_Vponent(my-component, template: #myComponent)new Vue(el: #container1)6.具名 slot 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。如果没有默认的 slot ，这些找不到匹配的内容片段将被抛弃。比如：假如有一个 my-component 组件，它的模板为：父组件的模板如下：这里可能是一个页面标题主要内容的一个段落另一个主要段落这里是底部信息页面渲染的结

31、果如下：这里可能是一个页面标题 主要内容的一个段落 另一个主要段落 这里是底部信息-_所有的代码如下：演示 Vue这里可能是一个页面标题主要内容的一个段落另一个主要段落这里是底部信息Vponent(my-component, template: #myComponent)new Vue(el: #container1)-_ 7.理解作用域插槽(2.1.0 新增的) 在 slot 分发中，无论是单分发还是具名分发，都是父组件替换子组件的数据，或者没有替换，用子组件默认的数据。 但是通过设置作用域槽，就可以改变这种状况，让子组件可以在父组件进行分发时获取自己的数据，至于是什么数据，由子组件决定，这

32、样就能解耦了。作用域槽通过 slot 的一个自定义的属性，官方给出的 DEMO 是 text，但也可以是其他，值为暴露的数据。 这个自定义属性已经存放在子组件的 prop 对象里了。等待着被父组件获取。怎么获取呢？ 在父组件的模板里，使用一个 Vue 自带的特殊组件 ，并在该组件上使用 scope 属性，值是一个临时的变量，存着的是由子组件传过来的 prop 对象，获得由子传过来的 prop 对象。这时候，父组件就可以访问子组件在自定义属性上暴露的数据了。如下代码：演示 Vue/ 子组件Vponent(child-component, template: ,data: function() r

33、eturn rets: name: 我是苹果,name: 我是香蕉,name: 我是橘子);/ 父组件Vponent(parent-component, template: props.text)new Vue(-_el: #container1)页面渲染后的代码如下：我是苹果我是香蕉我是橘子8.理解动态组件通过使用保留的元素，动态地绑定到它的 is 特性，我们可以让多个组件使用同一个挂载点，并动态的切换。keep-alive: 如果把切换出去的组件留在内存中，可以保留它的状态或避免重新渲染，为此我们可以添加一个 keep-alive 指令参数。如下实现的 tab 切换代码：演示 Vue动态组

34、件this is tab01this is tab02this is tab03 tab01Text -_ tab02Text tab03Text var tab01 = Vue.extend(template: #tab-01);var tab02 = Vue.extend(template: #tab-02);var tab03 = Vue.extend(template: #tab-03);/ 新建 vue 实例var newVue = new Vue(el: #container1,data: tab01Text: “tab01“, / 菜单一tab02Text: “tab02“, /

35、 菜单二tab03Text: “tab03“, / 菜单三currentView: “tab01“ / 默认选中的导航栏 ,/ 局部注册组件 components: tab01: tab01,tab02: tab02,tab03: tab03,methods: / 绑定 tab 的切换事件toggleTabs: function(tabText) this.currentView = tabText;-_)Vue 第三天第三天1.计算属性在模板内可以对一些属性的计算。如下代码：演示 Vue正序：“ message “倒序：“ reversedMessage “var vm = new Vue(

36、el: #app,data: message: Hello,computed: reversedMessage: function() return this.message.split().reverse().join()输出结果为：正序：“Hello“倒序：“olleH“-_如上我们提供的函数将用作属性 vm.reversedMessage 的 getter 。如下代码：console.log(vm.reversedMessage) / - olleHvm.message = Goodbyeconsole.log(vm.reversedMessage) / - eybdooG我们可以通过调

37、用表达式中的 method 来达到同样的效果：代码如下：演示 VueReversed message: “ reversedMessage() “var vm = new Vue(el: #app,data: message: Hello,methods: reversedMessage: function () return this.message.split().reverse().join();console.log(vm.reversedMessage() / - olleH那么他那么他们们的区的区别别是？是？计算属性是基于他们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才

38、会重新求值。也就是说只要message 值没有发生变化，多次访问 reversedMessage 计算属性会立即返回之前的结果，不必再执行函数。但是 method 方法只要发生重新渲染，总是会执行该函数。2.Class 与 Style 的绑定。1. 绑定绑定 Html class - 对象语法对象语法我们可以传给 v-bind:class 一个对象，以动态的切换 class。如下代码：-_演示 Vuevar vm = new Vue(el: #app,data: isActive: true,hasError: true);代码被渲染为如下：当 isActive 或者 hasError 变化时

39、，class 列表将相应地更新。例如，如果 hasError 的值为 false ， class 列表将变为 “static active “。也可以直接绑定数据里的一个对象：如下代码演示 Vuevar vm = new Vue(el: #app,data: classObject: active: true,text-danger: true-_);渲染效果和上面一样。也可以在这里绑定返回对象的计算属性。如下代码：演示 Vuevar vm = new Vue(el: #app,data: isActive: true,error: null,computed: classObject: fu

40、nction () return active: this.isActive 渲染后的代码如下：2. 数组语法数组语法我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表：如下代码：演示 Vue-_var vm = new Vue(el: #app,data: activeClass: active,errorClass: text-danger);被渲染为如下代码：3. 使用在组件上使用在组件上例如，如果你声明了这个组件:Vponent(my-component, template: Hi)var vm = new Vue(el: #app);使用组件的时候 添加

41、一些 class，如下代码：所有代码如下：演示 VueVponent(my-component, template: Hi)var vm = new Vue(-_el: #app);HTML 最终被渲染为：Hi同样的适用于绑定 HTML class :演示 VueVponent(my-component, template: Hi)var vm = new Vue(el: #app,data: isActive: true);当 isActive 为 true 的时候，HTML 最终被渲染成为如下代码：Hi4. 级联内联样式级联内联样式如下级联样式代码：演示 Vue11112222-_Vpon

42、ent(my-component, template: Hi)var vm = new Vue(el: #app,data: activeColor: red,fontSize: 30);页面被渲染为如下代码：11112222也可以绑定到一个样式对象通常更好，让模板更清晰：如下代码：演示 Vue11112222Vponent(my-component, template: Hi)var vm = new Vue(el: #app,data: styleObject: color: red,fontSize: 22px);代码被渲染成为如下：-_ 111122223.列表渲染3.1 v-for我

43、们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。如下面代码：演示 Vue item.message var vm = new Vue(el: #app,data: items: message: foo,message: bar);页面代码被渲染为如下：foobar-_v-for 我们拥有对父作用域属性的完全访问权限 还支持一个可选的第二个参数为当前项的索引。如下代码：演示 Vue parentMessage - index - item.message

44、var vm = new Vue(el: #app,data: parentMessage: Parent,items: message: foo,message: bar);页面被渲染为如下代码：Parent - 0 - fooParent - 1 - bar可以用 of 替代 in 作为分隔符。3-2 在在 template 中也可以使用中也可以使用 v-for , 如下代码：如下代码： item.msg 3-3 对象迭代对象迭代 v-for我们也可以用 v-for 通过一个对象的属性来迭代。-_演示 Vue value var vm = new Vue(el: #app,data: ob

45、ject: f: kongzhi,l: longen,Age: 30);代码被渲染为：kongzhilongen30可以提供第二个的参数为键名：如下代码： key : value 第三个参数为索引： index . key : value 3-4 整数的迭代整数的迭代v-for 也可以取整数。如下代码：-_演示 Vue n var vm = new Vue(el: #app);页面代码被渲染为：123456789103-5 组件使用组件使用 v-for组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用 props. 如下代码：下面是一个 demo；页面上默认有 3 项列表数据，当用户在

46、输入框输入值的时候 按 enter 键的时候 会增加一项，当然也可以点击删除 x 删除一项。演示 VueVponent(todo-item, template: title X,props: title)new Vue(el: #app,data: newTodoText: ,todos: do the dishes,Take out the trash,Mow the lawn,methods: addNewTodo: function() this.todos.push(this.newTodoText);this.newTodoText = ;);4.事件处理器4.1 v-on 监听事件监听事件 代码如下：-_演示 Vue增加 1这个按钮被点击了 counter 次。var