搜索到
1
篇与
的结果
-
VUE学习3.0笔记（2） 书接上回我们接下来可以绑定class和id来做一些内容<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 示例</title> </head> <body> <div id="app"> <!-- 使用 hobby.split(',') 将字符串分割为数组 --> {{ hobby.split(',') }}<br /> <!-- 使用 computed 属性 yyy --> {{ yyy }} <br /> {{ yyy }} </div> <script src="../day01/js/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { hobby: '篮球,足球,排球' }, computed: { yyy: function () { // 修正了 function 后面缺少括号的问题 return this.hobby.split(','); } } }); </script> </body> </html> 起到分割的作用Vue监听器的作用这里一般会在购物车的时候用到用来绑定时间去操作，我这里直接上代码说明<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>监听事件</title> </head> <body> <div id ="app"> 苹果手机价格 <input type="number" v-model="num"/> <br /> 总金额 :{{money}} </div> <script src="../day01/js/vue.js"></script> <script> let app = new Vue({ el:'#app', data() { return{ num:1, money:0 }; }, watch: { num:function() { this.money = this.num * 1500; console.log(this.money) } }, }); </script> </body> </html>样子大概这种生命周期这个知识点我不太懂，但是还是要写下来，方便日后看上代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id = "app"> {{num}} </div> <script src="../day01/js/vue.js"></script> <script> let app = new Vue({ el:'#app', data:{ num:2, }, beforeMount:function(){ console.log('beforeMount') }, mounted: () => { console.log('mounted') }, beforeUpdate: () => { console.log('beforeUpdate') }, updated: () => { console.log('updata') } }) </script> </body> </html>大概这个样子我看AI解释的含义是方面加载，比如异步的情况下的加载还有一些其他作用，比如等待渲染什么的
