1、mixin 混入的使用
<body> <div id="container"> <div>{{count}}</div> <input type="button" value="btn" @click="change"> </div> <script src="./vue.js"></script> <script> //混入的执行顺序分别是全局的混入=》内部的混入=》本身的实体钩子 Vue.mixin({ updated() { console.log('这个是全局的钩子'); } }); let app = new Vue({ el: '#container', data: { count: 0 }, updated() { console.log('这个是本身的钩子'); }, mixins: [{ updated() { console.log('这个是内部的钩子'); } }], methods: { change() { this.count ++; } } }); </script> </body>
2、vue内部的extends的用法
<body> <div id="container"> <div>{{count}}</div> <input type="button" value="btn" @click="change"> <input type="button" value="btn1" @click="add"> </div> <script src="./vue.js"></script> <script> let app = new Vue({ el: '#container', data: { count: 0 }, methods: { change() { this.count ++; } }, mixins: [ { methods: { add() { console.log('这个是混入的add方法'); //注意： 如果混入的的methods里的函数名与本体的函数名一样，那么将不会被执行 } } } ], extends: { methods: { add() { console.log('this is add methods'); } } } }) </script> </body>
注意：如果混入与extends里的methods里的函数名与本体的函数名一样，那么将不会被执行
3、改变vue的插值表达式
<body> <div id="container"> <div>${count}</div> <input type="button" value="btn" @click="change"> </div> <script src="./vue.js"></script> <script> let app = new Vue({ el: '#container', data: { count: 0 }, methods: { change() { this.count ++; } }, delimiters: ['${','}'] }) </script> </body>