03-01 vue的生存周期-钩子函数
<style> [v-cloak]{display:none;} </style> <div id="box" v-cloak> {{msg}} <p v-text="msg"></p> </div> <script> //解决模板{{XX}}闪烁问题: // css: [v-cloak]{display:none;} 在模板中加v-cloak属性 //或:v-text = ‘msg‘ v-html = ‘msg‘ 也能防止闪烁 //vue生存周期: // 钩子函数: // created: ——> 实例以创建 // beforeCompile: ——> 编译之前 // compiled: ——> 编译之后 // ready: ——> 插入到文档中 // beforeDestroy: ——> 销毁之前 // destroyed: ——> 销毁之后 window.onload = function () { var vm = new Vue({ el: ‘#box‘, data: { msg:‘well‘ }, created: function(){ alert(‘实例已创建‘) }, beforeCompile: function () { alert(‘编译之前‘) }, compiled: function () { alert(‘编译之后‘) }, ready: function () { alert(‘插入到文档‘) }, //销毁之前和销毁之后只有在$destroy执行的时候才有 beforeDestroy: function () { alert(‘销毁之前‘) }, destroyed: function () { alert(‘销毁之后‘) } }) //点击页面销毁Vue对象 document.onclick = function () { alert(‘123‘); vm.$destroy(); } } </script>
03-02 vue的计算属性一
<div id="box" v-cloak> a==>{{a}} <br /> b==>{{b}} </div> <script> window.onload = function () { var vm = new Vue({ el: ‘#box‘, data: { a: 1 }, computed: { //里面其实是属性,是函数的写法,但不是函数.可以写一些业务代码,return不能少 b: function () { //return 2; return this.a + 2; } } }); document.onclick = function () { vm.a = 101; } } </script>
03-03 vue的计算属性二
<div id="box"> a==>{{a}} <br /> b==>{{b}} </div> <script> //computed 与 data里面的属性区别: //computed里面可以放一些业务逻辑代码,切记要return window.onload = function () { var vm = new Vue({ el: ‘#box‘, data: { a: 1 }, computed: { //里面其实是属性,是函数的写法,但不是函数.可以写一些业务代码,return不能少 //b: function () { //简写.默认调用的是get // //return 2; // return this.a + 2; //} b: { get: function () { return this.a + 6; }, set: function (val) { this.a = val; } } } }); document.onclick = function () { //vm.a = 101; vm.b = 1000; } } </script>
03-04 vue的简单方法
<div id="box"> {{a}} </div> <script> //vm.$mount(‘#box‘); //手动挂载vue程序 等价于:el: ‘#box‘ //vm.$el //就是元素 //vm.$data //就是vue的data //vm.$options.aa(); 调用自定义属性或函数 //vm.$destroy //销毁 window.onload = function () { var vm = new Vue({ //el: ‘#box‘, aa: function () { //自定义属性 alert(111) }, data: { a: 1 } }); vm.$mount(‘#box‘); //手动挂载vue程序 //console.log(vm.$el); vm.$el.style.background = ‘red‘; alert(vm.$data.a); vm.$options.aa(); //vm.$options.aa() 调用自定义属性 vm.$log() //查看现在数据状态 } </script>
03-04 vue的循环索引:track_by="$index"
<div id="box"> <ul> <li v-for="val in arr" track-by="$index">{{val}}</li> </ul> <input type="button" value="添加" @click="add()"/> </div> <script> //track-by="$index" 在有重复数据的,按索引循环 window.onload = function () { var vm = new Vue({ data: { arr:[‘apple‘,‘pear‘,‘orange‘] }, methods: { add: function () { this.arr.push(‘tomato‘); } } }).$mount(‘#box‘); } </script>
时间: 2024-11-05 16:05:19