学习笔记——VUE3
一、学习重点
v-if与v-show区别*****
v-if直接操作DOM元素，底层
v-show是通过css控制DOM元素
二、学习内容
案例一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <button @click="subcount">-</button> <span>{{count}}</span> <button @click="addcount">+</button> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { msg:"hello Vue", count: 1, }, methods: { subcount() { if(this.count == 0){ alert("不能再少了"); }else { this.count--; } }, addcount() { if(this.count == 10) { alert("不能再多了"); }else { this.count++; } } }, }); </script> </body> </html>
案例二
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 注意事项： 1、注意vue实例的作用域 2、事件绑定（v-on:click）和属性绑定（v-bind:src） 3、v-if和v-show区别***** 4、双向绑定 应用在表单元素上 5、双向绑定在不同的表单元素上的用法 radio checkbox select 6、双大括号，Vue的属性或事件用Vue自己的数据，不需要写双大括号 其他地方，必须写双大括号 7、vue的解析过程，最终展现出来的HTML页面，是没有vue的语法的 --> <div id="app"> <input type="text" v-model="msg"> <button @click="add()">添加</button> <ul> <li v-for="(item,index) in lists"> {{item}} <a href="#" @click="del(index)">删除</a> </li> </ul> <span>总数量：{{lists.length}}条</span><button @click="cler">删除所有</button> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { lists:["第一次记事","实习周志"], msg:'' }, methods: { add() { /* 把我们文本框输入的内容 msg 追加到数组里 */ this.lists.push(this.msg); this.msg = ''; }, cler() { this.lists = []; }, del(index) { this.lists.splice(index,1); } }, }); /* 1、追加 2、注意文本框要清空 3、删除除了删除记录，还要修改总记录数 4、删除所有，所有记录删除，总记录数归0 */ </script> </body> </html>
三、笔记内容
htmlcss--->javascript--->JQuery
---->vue,react,angular
一个JavaScript库
vue也可以说是JavaScript框架。
尤雨溪
Vue2
Vue3
<body> <div id="app"> <!-- 插值表达式 --> <h1>{{msg}}</h1> </div> <script src="js/vue.js"></script> <script> // 1.创建一个vue实例 const app = new Vue({ // el用来给Vue实例一个作用域 el: "#app", data: { // 用来给Vue定义一些相关的数据 msg: "欢迎使用Vue", }, }); </script> </body>
数组
<body> <div id="app"> <h1>{{user.msg}} --- {{user.name}} --- {{user.password}}</h1> <h1>{{lists[0]}}---{{lists[3]}}---{{lists[4]}}</h1> <h1>{{users[0].name}} --- {{users[0].age}}</h1> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { user: { msg:"hello Vue", name :"admin", password: "123456", }, lists: ["北京","上海","广州","深圳","杭州"], users: [{name:"小强",age:25},{name:"小红",age:18}] }, }); </script> </body>
<body> <div id="app" class="aa"> <h1>{{msg.indexOf('u')}}</h1> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { msg:"hello Vue", }, }); </script> </body>
插值闪烁及解决方法
<body> <div id="app"> <!-- 插值闪烁 --> <h1>123{{msg}}</h1> <!-- 不会有插值闪烁 --> <h1 v-text="msg">123</h1> <h1 v-html="aaa"></h1> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { msg:"<em>helle Vue</em>", aaa: "<em>hello!!!</em>" }, }); </script> </body>
this
<div id="app"> <h1>年龄：{{age}}</h1> <input type="button" value="通过Vue的事件改变年龄每次+1" v-on:click="addage"> <input type="button" value="通过Vue的事件改变年龄每次-1" @click="subage"> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { msg:"hello Vue", age: 23, }, methods: { addage: function() { // 想办法拿到data中的age属性，让它自增 // this代表的是整个的vue实例 this.age ++; }, subage() { this.age --; } } }); </script>
<body> <div id="app"> <h1>年龄：{{age}}</h1> <input type="button" value="改变age为指定的值" @click="chageage(32,'小强')"> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { msg:"hello Vue", age: 23, }, methods: { chageage(age,name) { this.age = age; alert(name); } } }); </script> </body>
<body> <div id="app"> <h1>{{msg}}</h1> <h1 v-show="flag">欢迎光临</h1> <button @click="toggleshow">显示 / 隐藏</button> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { msg:"hello Vue", flag:true, }, methods: { toggleshow() { this.flag = !this.flag; } }, }); </script> </body>
<img src="img/yyx.jpg" v-bind:class="{aa:s}" v-bind:title="t" @mouseover="hov" @mouseout="ou"> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { msg:"hello Vue", t: "我是尤雨溪", s: false, }, methods: { hov() { this.s = true; }, ou(){ this.s = false; } }, }); </script>
图片循环播放
第一种
<style> img{ cursor:alias; } </style> </head> <body> <div id="app"> <img width="500px" :src="src" @click="changeimg"> <br> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { src:"img/1.jpg" , number:1 }, methods: { changeimg() { this.src = "img/"+this.number++ +".jpg" if(this.number==5){ this.number = 1; } }, }, }); </script> </body>
第二种
<style> img{ cursor: pointer; } </style> </head> <body> <div id="app"> <img :src="src" width="300" @click="change"> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { msg:"hello Vue", src :"img/1.jpg", }, methods: { change() { let imgname = this.src; let s = imgname.split("."); let ext = s[1]; let pre = s[0].split("/"); let dir = pre[0]; let na = parseInt(pre[1]); na ++; if(na > 5) { na = 1; } this.src = dir + "/" + na + "." + ext; } }, }); </script> </body>
v-for循环遍历
<body> <div id="app"> <!-- v-for --> <!-- v-for写在哪一个标签中，就会生成多个对应的标签 注意： 在使用v-for的时候，一定要加入:key，用来给vue内部提供重用和排序的唯一的值 --> <span v-for="(value,key,index) in user"> {{index}} --- {{key}} --- {{value}}<br> </span> <ul> <li v-for="(value,index) in lists"> {{index}} --- {{value}} </li> </ul> <ol> <li v-for="(u,index) in users" :key="u.id"> {{index}} --- {{u.name}} --- {{u.age}} </li> </ol> <!-- <ol> <li v-for="(value,key,index) in ((user) in users)"> {{index}} --- {{key}} --- {{value}} </li> </ol> --> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { user:{name:"小强",age:23}, lists: ["北京","上海","广州","深圳","杭州"], users: [{name:"小强",age:25},{name:"小红",age:18}] }, }); </script> </body>
双向绑定
<body> <!-- 双向绑定： 1、HTML部分发生变化，Vue实例中对应的属性也会变化 2、Vue中发生变化，HTML中同样变化 --> <div id="app"> <!-- 总结： 1、使用v-model指定可以实现数据的双向绑定 2、所谓的双向绑定，表单中的数据和Vue实例中data的数据变化是同步的 MVVM架构：双向绑定机制 Model：数据 View：页面，页面展示数据 VM：ViewModel 监听器 --> <input type="text" v-model="message"> <br> <span>{{message}}</span> <br> <button @click="changeValue">通过改变JS中message的值改变文本框的值</button> <hr> <input type="radio" name="gender" value="m" v-model="gender">男 <input type="radio" name="gender" value="w" v-model="gender">女 <hr> <input type="checkbox" name="hobby" value="a" v-model="hobby">A <input type="checkbox" name="hobby" value="b" v-model="hobby">B <input type="checkbox" name="hobby" value="c" v-model="hobby">C <!-- <button @click="show">查看</button> --> <hr> <select v-model="address"> <option value="x">X</option> <option value="y">Y</option> <option value="z">Z</option> </select> <button @click="show">查看</button> <input type="file"> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message:'', gender:'w', hobby:[], address:'z', }, methods: { changeValue() { this.message = prompt("请输入："); }, show() { // console.log(this.hobby); console.log(this.address); } }, }); </script> </body>
数组
<script> let arr = [5,2,-1]; // 在数组的末尾追加 arr.push(4); // 删除数组的末尾的元素 // arr.pop(2); // 从指定位置删除指定个数个元素 // arr.splice(1,1); // 修改 // arr[1] = -1; // 反转 // arr.reverse(); // 从小到大排序 // arr.sort(); // 查找 // console.log(arr.find()); // 包含 // console.log(arr.includes(0)); // console.log(arr); </script>
浙公网安备 33010602011771号