vue文档(重点学习)

Vue第一天1.vue组件注册步骤1. Vue.js 的组件有三个步骤： 创建组件构造器(Vue.extend()方法 )，注册组件(Vue.component()和实例化组件。 演示Vue / 1. 创建一个组件构造器 var component1 = Vue.extend( template: hello world ); / 2. 注册组件，并指定组件的标签为 Vue.component(component1, component1); / 3. 实例化组件 new Vue( el: #container ); 浏览器编译后html结构会变为 hello world页面运行显示为hello world2.理解组件的创建和注册。2-1 Vue.extend() 是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，该构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的html。2-2 Vue.component() 是注册组件，需要2个参数，第一个参数是自定义组件的标签，第二个参数是组件的构造器。2-3 组件需要挂载到某个Vue的实例下，否则不生效。如下实例： 演示Vue / 1. 创建一个组件构造器 var component1 = Vue.extend( template: hello world ); / 2. 注册组件，并指定组件的标签为 Vue.component(component1, component1); / 3. 实例化组件 container1 new Vue( el: #container1 ); / 3. 实例化组件 container2 new Vue( el: #container2 ); / 不实例化 container3 因此第三个自定义标签是不会生效的 最终代码被渲染成为如下：hello worldhello world3.理解Vue全局注册和局部注册调用Vue.component()注册组件时，组件的注册是全局的，如果想要使用组件的局部注册的话，可以用选项对象的components属性实现局部注册。如下代码：中间就把第二步注册组件哪项移到实例化组件里面来了；如下代码： 演示Vue / 1. 创建一个组件构造器 var component1 = Vue.extend( template: hello world ); / 3. 实例化组件 container1 new Vue( el: #container1, components: component1: component1 ); / 实例化container2 是不生效的 new Vue( el: #container2 ) 实例化container2 是不生效的，并且在浏览器控制台会报如下错误：4.理解父组件和子组件。在一个组件中包含另一个组件，那么另一个组件就是该组件的子组件。如下代码： 演示Vue / 1. 创建一个组件构造器 var Child = Vue.extend( template: hello world ); var Parent = Vue.extend( / 在组件内部使用组件 template: hello world , components: / 局部注册Child组件 child-component: Child ); / 全局注册Parent组件 Vue.component(parent-component, Parent); / 实例化组件 new Vue( el: #container1 ) 简单理解代码如下：1. var Child = Vue.extend(.) 定义一个Child组件构造器。2. var Parent = 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 以子标签的形式在父组件中使用；如下代码： 演示Vue / 1. 创建一个组件构造器 var Child = Vue.extend( template: hello world ); var Parent = Vue.extend( / 在组件内部使用组件 template: hello world, components: / 局部注册Child组件 child-component: Child ); / 全局注册Parent组件 Vue.component(parent-component, Parent); / 实例化组件 new Vue( el: #container1 ) 上面调用子组件的方式是无效的，因为在js里面当父组件要需要的html模板template的内容的时候已经决定了需要渲染什么，所以当parent-component运行的时候，在父组件使用自定义的子标签。运行时会当做html的普通标签来渲染，但是它又不是普通的html标签，因此会被忽略掉。4-2. 在父组件标签外使用子组件。 js代码还是上面的一样，运行完成后，在浏览器下会报错如下：5.理解组件的语法糖。我们可以使用更简单的方式来注册组件。5-1 使用Vue.component()直接创建和注册组件。如下代码： 演示Vue / 全局注册 Vue.component(component1, template: hello world222 ); / 实例化 var vm1 = new Vue( el: #container1 ); Vue.component()的第一个参数是标签名称，第二个参数是一个选项对象，使用选项对象的template属性定义，使用该方式，在Vue源码中会调用Vue.extend()方法。注意： 在template元素中需要使用一个标签容器包围，比如我们可以把div元素去掉的话，只放内容的话，会报错如下：5-2 在选项对象的components属性中实现局部注册。 演示Vue / 全局注册，my-component1是标签名称 Vue.component(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.学会使用 script或 template 标签。虽然语法糖简化了组件注册，但是在template选项中拼接了html元素，这导致View和C层的高耦合性。幸运的是Vue.js 提供了2种方式将javascript中的html模板分离出来。6-1 使用script标签,如下代码： 演示Vue hello world! new Vue( el: #container1, components: component1: template: #myComponent ) 注意： 使用标签时，type指定为 text/x-template，是告诉浏览器这不是一段js脚本，浏览器在解析html文档时会忽略script标签内定义的内容。6-2 使用标签。不需要指定type属性。如下代码： 演示Vue hello 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 , components: component1: template: #myComponent, props: myName, myAge ) 注意： 在子组件中定义prop时，使用了camelCase命名法。由于HTML特性不区分大小写，camelCase的prop用于特性时，会转为短横线隔开的，比如上面的代码：在props中定义的myName,在用作特性时需要转换为 my-name理解prop的单向绑定既然父组件使用props把数据传给了子组件，那么如果子组件修改了数据，对父组件是否有影响呢？看下面的代码如下： 演示Vue * margin: 0; padding: 0; box-sizing: border-box html font-size: 12px; font-family: Ubuntu, simHei, sans-serif; font-weight: 400 body font-size: 1rem table, td, th border-collapse: collapse; border-spacing: 0 table width: 100%; margin: 20px; td, th border: 1px solid #bcbcbc; padding: 5px 10px th background: #42b983; font-size: 1.2rem; font-weight: 400; color: #fff; cursor: pointer tr:nth-of-type(odd) background: #fff tr:nth-of-type(even) background: #eee fieldset border: 1px solid #BCBCBC; padding: 15px; input outline: none inputtype=text border: 1px solid #ccc; padding: .5rem .3rem; inputtype=text:focus border-color: #42b983; button outline: none; padding: 5px 8px; color: #fff; border: 1px solid #BCBCBC; border-radius: 3px; background-color: #009A61; cursor: pointer; button:hover opacity: 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 , components: 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/除了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 改变后调用 console.log(newVal); console.log(oldVal);)1-1. data 必须是函数通过Vue构造器传入的各种选项大多数都可以在组件里用。 data 是一个例外，它必须是函数。 如下代码Vue 会停止，并在控制台会报错。 演示Vue var data = counter: 0 ; / 全局注册 Vue.component(component1, template: message , data: message: hello ); new Vue( el: #container1 ) data是函数解决该方案代码如下： 演示Vue var data = counter: 0 ; / 全局注册 Vue.component(component1, template: counter , / data是一个函数，vue不会报错，但是我们返回给每个组件的实列引用了同一个data对象 data: function() return data ); new Vue( el: #container1 ) 由于这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题：代码如下： 演示Vue / 全局注册 Vue.component(component1, template: counter , / data是一个函数，vue不会报错，但是我们返回给每个组件的实列引用了同一个data对象 data: function() return counter: 0 ); new Vue( el: #container1 ) 现在每个 counter 都有它自己内部的状态了.2.理解组件的通信。一般情况父子组件是这样的关系，组件A在它的模板中使用了组件B，他们之间必然需要相互通信，父组件要给子组件传递数据，子组件需要将它内部发生的事情告知父组件，为了保证父子组件的解耦，可维护性及可重用性。在vue.js中，父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。2-1 使用props传递数据不能在子组件的模板内直接引用父组件的数据，要让子组件使用父组件的数据，我们需要通过子组件的props选项。如下代码： 演示Vue / 全局注册 Vue.component(child, / 声明props props: message, template: message ); new Vue( el: #container1 ) 结果在页面上会打印 hello。注意： HTML特性是不区分大小写的，所以当使用的不是字符串模板，camelCased(驼峰式) 命名的prop需要转换为相对应的 kebab-case(短横线隔开式)命名：如下代码： 演示Vue / 全局注册 Vue.component(child, / 声明props props: myMessage, template: myMessage ); new Vue( el: #container1 ) 2-2 理解动态prop在模板中，要动态地绑定父组件的数据到子模板的props，使用v-bind，每当父组件的数据变化时，该变化会传递给子组件。 使用 v-bind 的缩写语法通常更简单：代码如下： 演示Vue new Vue( el: #container1, data: parentMsg: Message , components: child: props: myMessage, template: myMessage ) 3.理解自定义事件父组件使用props传递数据给子组件，但是如果子组件需要把数据传回去的话，就需要自定义事件了；3-1 使用v-on绑定自定义事件每个vue实例都实现了事件接口，即：1. 使用on(eventName) 监听事件2.使用on(eventName)监听事件2.使用emit(eventName) 触发事件注意：on和emit 不是 addEventListener 和 dispatchEvent的别名。且 父组件可以在使用组件的地方直接用 v-on 来监听子组件触发的事件。不能用$on侦听子组件抛出的事件，而必须在模板里直接用v-on绑定，就像以下的例子： 演示Vue total Vue.component(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.total += 1; ) 上面代码： 初始化时候 实例化设置 data: total: 0, 设置total为0， 子组件button-counter 默认为0， 当点击子组件的时候调用 increment方法，当前的counter自增1， 然后在子组件触发 $emit(increment)事件，当使用 v-on:increment 会监听到事件后，会调用父组件的incrementTotal方法，因此父组件也自增1.上面代码中 子组件已经和它外部完全解耦了。它所做的只是报告自己的内部事件，至于父组件是否关心则与它无关。4.理解使用自定义事件的表单输入组件自定义事件可以用来创建自定义的表单输入组件，使用v-modal来进行数据双向绑定。比如如下代码：上面的代码是下面的语法糖；如下代码：因此在创建组件中时，相当于下面的简写；如下代码：所以要让组件的v-model 生效，必须满足下面的条件：1. 接受一个value属性。2. 在有新的value时触发input事件。如下测试代码： 演示Vue Vue.component(currency-input, template: $ , props: value, methods: / 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制 updateValue: function (value) var formattedValue = 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标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有插入的内容时才显示备用内容。如果标签中有内容的话，就显示该内容。比如my-component组件有如下代码： this is a component 如果没有分发内容，则显示slot中的内容 asdsadsdad父组件有如下代码： Hello Vue.js /my-c