主要摘录的是Vue教程中的疑难点,结合demo来加深概念的理解(持续更新!)
不要在选项属性或回调上使用箭头函数(demo01)
var vm1 = new Vue({ data: { a: 1 }, created: function() { // `this` 指向 vm 实例 console.log('a is: ' + this.a) // a is: 1 } }) var a = '123'; var vm2 = new Vue({ data: { a: 1 }, created: () => { // `this` 指向 window console.log('a is: ' + this.a) // a is: 123 } })
箭头函数是没有this的,this是根据父级的上下文且是静态生成的
// ES6 function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } // ES5 function foo() { var _this = this; setTimeout(function () { console.log('id:', _this.id); }, 100); }
这两个API都是vue2.4.0新增的,教程解释的不是很清楚(demo02) inheritAttrs属性默认为true时,子组件的根元素会继承父作用域下(除却props定义)的属性,设置为false,子组件的根元素不会继承父作用域的属性(除class和style外) $attrs包含的就是父作用域的特性绑定(除了props定义的之外)
Vue.component('component-demo', { inheritAttrs: true, // 设置true或false props: ['label', 'value'], template: ` <div> <input :value="$attrs.value" :placeholder="$attrs.placeholder" @input="$emit('input', $event.target.value)" > </div> ` }) var vueDemo = new Vue({ el: '#app-demo' })
<div id="app-demo"> <component-demo label="父作用域" value="" name="组件" placeholder="请输入"></component-demo> </div>
渲染结果如下:
<!-- 设置为true时: --> <div name="组件" placeholder="请输入"> <input placeholder="请输入"> </div> <!-- 设置为false时: --> <div> <input placeholder="请输入"> </div>
mixins接受一个混入对象的数组,实现一个类似浅拷贝的功能。利用mixins可以对组件代码进行抽离及封装。(注:如果传入的是钩子函数,则按照数组的顺序依次执行钩子函数,且会在组件之前执行,跟浅拷贝的顺序有出入)
var mixin01 = { created() { console.log('mixin01') }, data() { return { name: 'mixin01' } }, methods: { foo: function() { console.log('foo1') }, conflicting: function() { console.log('from mixin1') } } } var mixin02 = { created() { console.log('mixin02') }, data() { return { name: 'mixin02' } }, methods: { foo: function() { console.log('foo2') }, conflicting: function() { console.log('from mixin2') } } } var vm = new Vue({ mixins: [mixin01, mixin02], created() { console.log('vm') }, methods: { bar: function() { console.log('bar') }, conflicting: function() { console.log('from self') } } }) // 页面执行时,依次会打印'mixin01','mixin02','vm' vm.name // 'mixin02' vm.foo() // 'foo2' vm.bar() // 'bar'
Vue已经封装好了transition的组件,通过在transition组件上添加name,Vue会根据动画的过程自动添加扩展的class。所以结合animation.css和扩展的class,可以轻松实现过渡的动画效果 image
<style> body { background: #ccc; } .sider { position: fixed; top: 0px; right: 0px; width: 200px; height: 100%; background: #fff; } .sider-enter-active { animation: fadeInRight 0.5s; } .sider-leave-active { animation: fadeOutRight 0.5s; } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } </style> <body> <div id="app"> <button @click="show = !show">Click Me</button> <transition name="sider"> <div class="sider" v-show="show"><h1>我是侧边栏</h1></div> </transition> </div> <script> var vm = new Vue({ el: '#app', data() { return { show: false } } }) </script> </body>