vue2的一些api例子
1、
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="app"> {{msg}} </div> <script src="../vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { msg: 'abc' } }); vm.msg = 'Hello'; console.log('--1', vm.msg); Vue.nextTick(function () { console.log('--2', vm.msg); }); console.log('--3', vm.msg); </script>
2、
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="app"> <p>{{money | toFixed | toRMB}}</p> </div> <script src="../vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { money: 1424.2332 }, filters: { toRMB: function (value) { return `¥${value}`; }, toFixed: function (value) { return value.toFixed(1); } } }); </script> ---------------------- <div id="app"> {{year | toDate('04', '10')}} </div> <script src="../vue.js"></script> <script> Vue.filter('toDate', function (value, month, day) { return value + '-' + month + '-' + day; }); var vm = new Vue({ el: "#app", data: { year: '2014' } }); </script>
3、
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div id="components-demo"> <button-counter></button-counter> </div> <script src="../vue.js"></script> <script> Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }); new Vue({ el: '#components-demo' }) </script>
4、
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script> Vue.mixin({ created: function () { var myOption = this.$options.myOption; if (myOption) { console.log(myOption); } } }); new Vue({ myOption: 'hello' }); </script>