搜索到
3
篇与
的结果
-
Vue3.0笔记 全局组件 直接上代码实例比如我设置一个按钮 单次点击的时候 反馈不同的效果<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 使用自定义组件 --> <div id="app"> <btn></btn> <btn></btn> </div> <!-- 引入 Vue.js 库 --> <script src="../day01/js/vue.js"></script> <script> // 定义自定义组件 Vue.component('btn', { template: '<button v-on:click="ck">点击了{{num}}次</button>', data: function () { return { num: 0 // 组件内部的数据 } }, methods: { ck: function () { console.log(this.num + 1), this.num++; // 点击按钮时增加 num 的值 } } }); let app = new Vue({ el: '#app' }); </script> </body> </html>局部组件<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <reg></reg> </div> <!-- 使用 CDN 链接引入 Vue.js --> <script src="../day01/js/vue.js"></script> <script> let app = new Vue({ el: '#app', components: { reg: { data() { return { num: 1 }; }, // 使用引号包裹模板字符串 template: '<div><button>注册组件{{num}}</button></div>' } } }); </script> </body> </html> -
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解释的含义是方面加载，比如异步的情况下的加载还有一些其他作用，比如等待渲染什么的
-
Vue_3.0学习笔记 接下来我将会用大量篇幅去写vue的学习过程首先如何写一个hello world<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id = 'app'> <div>{{name}}</div> </div> </body> <script src="js/vue.js"></script> <script> //创建vue实例 let app = new Vue({ el:'#app', data:{ name:'Hello World', } }) </script> </html>接下来就是学习事件绑定，很简单，直接去调用即可我这里举例说明一下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>VUE学习</title> </head> <body> <div id = 'app'> <!-- <div v-on:click="test1">点击</div> <button v-on:click="test2">点击</button> --> <button @click="test4">点击</button> <button v-on:click="test3('我喜欢你')">点击大胆表白</button> </div> <script src="vue.js"></script> <script> let app = new Vue({ el:'#app', data:{ }, methods:{ test1:function(){ console.log('点击') }, test2(){ alert('点击1') }, test3(name){ alert(name + '狗亲亲') }, test4(e){ alert(e.target.innerHTML) } } }) </script> </body> </html>当我们点击test3的时候，会发现有alert的弹出，那么这就相当于出发了弹窗，触发了事件那么我来详细的解释一下alert(e.target.innerHTML)这句话的详细含义，我先分开讲解，alert就是弹窗，e代表事件对象，那么target代表目标，触发事件的DOM模式。那么innerhtml就很好理解了。就说获取到内容。接下来还要就是如果存在不同的情况下应该怎么办呢直接上代码示例<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>VUE学习</title> </head> <body> <div id = 'app'> <button v-on:click="test5(11,$event)">点击</button> --> </div> <script src="vue.js"></script> <script> let app = new Vue({ el:'#app', data:{ }, methods:{ test5(x,y){ console.log(x); alert(y.target.innerHTML); } } }) </script> </body> </html>可以很清楚的看到有一个$event的时间绑定用来出发，如何触发的和上面的内容是一样的可以自行查看接下来新的内容就是关于循环判断还要分支先写判断，<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id = 'app'> <div v-if="face>=80">长得漂亮</div> <div v-else-if="face >=70 && face <= 80">长得还行</div> <div v-else-if="face >=40 && face <70">长得能看</div> <div v-if="face <40">长得抽象</div> </div> <script src="js/vue.js"></script> <script> let app = new Vue({ el:'#app', data:{ face:70 } }) </script> </body> </html>很清楚的可以看到内容的展示是 接下来是v-for循环的写法<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id = 'app'> <div v-if="face>=80">长得漂亮</div> <div v-if="face >=70 && face <= 80">长得还行</div> <div v-if="face >=40 && face <70">长得能看</div> <div v-if="face <40">长得抽象</div> <ul> <li v-for="it in hobby">{{it}}</li> </ul> </div> <script src="js/vue.js"></script> <script> let app = new Vue({ el:'#app', data:{ face:70, hobby:['篮球','足球','乒乓球'] } }) </script> </body> </html>这是一种写法，但是里面没KEY值，推荐加上，为什么呢，因为加上之后他的检索的速度更快，对于网站开发有利 当然不写也可以，但是最好写 如果是俩个怎么办呢？当然是有写法的。直接上代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id = 'app'> <div v-if="face>=80">长得漂亮</div> <div v-if="face >=70 && face <= 80">长得还行</div> <div v-if="face >=40 && face <70">长得能看</div> <div v-if="face <40">长得抽象</div> <ul> <li v-for="(it,id) in hobby">{{it}}{{id}}</li> </ul> </div> <script src="js/vue.js"></script> <script> let app = new Vue({ el:'#app', data:{ face:70, hobby:['篮球','足球','乒乓球'], } }) </script> </body> </html>这样反馈回来的结果是 接下来学习事件绑定<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>链接示例</title> </head> <body> <div id='app'> <a href="https://baidu.com">baidu一下</a> <a v-bind:href='url'>京东</a> </div> <script src="../day01/js/vue.js"></script> <script> let app = new Vue({ el: '#app', data() { return { url: 'https://www.jd.com' }; } }); </script> </body> </html>我们可以很清楚的发现，url的值是可以改变的或者可以这样写，我刚刚上面是AI修正后的结果，下面的版本更好一些<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>链接示例</title> </head> <body> <div id='app'> <a v-bind:href='url'>京东</a> </div> <script src="../day01/js/vue.js"></script> <script> let app = new Vue({ el: '#app', data:{ url: 'https://www.jd.com' } }); </script> </body> </html>接下来你的页面应该弹出来当然我们因此也可以做一些简单的修改，比如访问的时候根据按钮可以做一些简单的调整<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>链接示例</title> </head> <body> <div id='app'> <a v-bind:href='url'>京东</a><br /> <a :href="url">京东</a><br /> <button @click="ch">点击修改</button> </div> <script src="../day01/js/vue.js"></script> <script> let app = new Vue({ el: '#app', data:{ url: 'https://www.jd.com' }, methods:{ ch(){ this.url='http://baidu.com' } } }); </script> </body> </html>
