Vue2学习
- 其他
- 2025-09-18 23:21:02
一、Vue3 基础 监视属性 天气案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>天气案例</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <!-- 绑定事件的时候: @xxx="yyy" yyy可以写一些简单的语句 --> <!-- <button @click="isHot = !isHot">切换天气</button> --> <button @click="changeWeather">切换天气</button> </div> </body> <!-- 三元运算符 isHot ? '炎热' : '凉爽' --> <script> const vm = new Vue({ el: '#root', data: { // 布尔类型 isHot: true }, computed: { info() { // 计算属性 return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather() { // this.与后面等于取反后的 this.isHot = !this.isHot } }, }) </script> </html> 天气案例_监视属性
知道自己要监视那个内容的时候 watch:{}
没有明确要监视的内容 可以直接调用API vm.$watch{‘监视的属性’,里面的内容和上面的正常写就行了}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>监听属性</title> <script src="../js/vue.js"></script> </head> <!-- 监视属性watch: 1.当被监视的属性变化时，回调函数自动调用，进行相关操作 2.监视的属性必须存在，才能进行监视!! 3.监视的两种写法: (1).new Vue时传入watch配置 (2).通过vm.$watch监视 --> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> </div> </body> <script> const vm = new Vue({ el: '#root', data: { isHot: true, }, computed: { info() { return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather() { this.isHot = !this.isHot } }, /* watch: { // 可以监测info或isHot info: { immediate: true, // 初始化时让handler调用一下 // handler函数 handler什么时候调用?当isHost发生改变时。 handler(newValue, oldValue) { console.log('info被修改了', newValue, oldValue); } } } */ }) // 监视写法二 调用API .$watch{} vm.$watch('isHot', { immediate: true, // 初始化时让handler调用一下 // handler函数 handler什么时候调用?当isHost发生改变时。 handler(newValue, oldValue) { console.log('info被修改了', newValue, oldValue); } }) </script> </html> 深度监视 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>天气案例_深度监视</title> <script src="../js/vue.js"></script> </head> <body> <!-- 深度监视： （1).Vue中的watch默认不检测对象内部值的改变(一层) （2）.配置deep:true可以监测对象内部值改变(多层) 备注： （1）.Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以! （2）.使用watch时根据数据的具体结构，决定是否采用深度监视。 --> <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> <hr /> <h3>a的值是：{{numbers.a}}</h3> <button @click="numbers.a++">点我让a+1</button> <h3>b的值是：{{numbers.b}}</h3> <button @click="numbers.b++">点我让b+1</button> <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button> </div> <script> const vm = new Vue({ el: '#root', data: { isHot: true, numbers: { a: 1, b: 1 } }, computed: { info() { return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather() { this.isHot = !this.isHot; } }, watch: { info: { immediate: true, handler(newValue, oldValue) { console.log('info被修改了', newValue, oldValue); } }, // 监视多级结构中某个属性的变化 /*'numbers.a': { handler() { console.log('a被改变了'); } },*/ // 监视多级结构中所有属性的变化 numbers: { deep: true, handler() { console.log('numbers改变了') } } } }) </script> </body> </html> 绑定样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绑定样式</title> <script src="../js/vue.js"></script> <style> .basic { width: 400px; height: 100px; border: 1px solid black; } .happy { border: 4px solid red; background-color: rgba(255, 255, 0, 0.644); background: linear-gradient(30deg, yellow, pink, orange, yellow); } .sad { border: 2px dashed blue; /* 更细且虚线的边框 */ background-color: rgba(135, 206, 250, 0.5); /* 淡蓝色背景色，带透明度 */ background: linear-gradient(120deg, lightblue, darkblue, navy); /* 冷色调渐变 */ } .normal { border: 3px solid gray; /* 中等宽度的灰色实线边框 */ background-color: rgba(240, 240, 240, 0.7); /* 浅灰色背景，带一定透明度 */ background: linear-gradient(90deg, whitesmoke, lightgray, silver); /* 温和的渐变 */ } .atguigu1 { background-color: #87CEEB; /* 替换为你想要的背景颜色，这里使用的是浅天空蓝 */ background-size: cover; /* 这行可以保留或移除，因为它对背景颜色没有影响 */ } .atguigu2 { font-size: 24px; /* 文字大小调整为24px，你可以根据需要更改 */ text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 添加阴影效果，水平偏移2px，垂直偏移2px，模糊半径5px */ } .atguigu3 { border-radius: 15px; /* 边框圆角半径设置为15px，你可以根据实际需要调整 */ } </style> </head> <!-- 绑定样式： 1. class样式 写法：class="xxx" xxx可以是字符串、对象、数组。 字符串写法适用于：类名不确定，要动态获取。 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但是不确定用不用 2.style样式 :style="{fontSize:xxx}"其中xxx是动态值 :style="[a,b]"其中a、b是样式对象 --> <body> <div id="root"> <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态绑定 --> <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br /><br /> <!-- 绑定class样式--数组写法，适用于：样式的类名不确定，需要动态绑定 --> <div class="basic" :class="classArr">{{name}}</div> <br /><br /> <!-- 绑定class样式--对象写法，适用于：样式的类名确定，需要动态绑定 --> <div class="basic" :class="classObj">{{name}}</div> </div> </body> <script> new Vue({ el: '#root', data: { name: '尚硅谷', mood: 'normal', classArr: ['atguigu1', 'atguigu2', 'atguigu3'], classObj: { atguigu1: true, atguigu2: false, } }, methods: { changeMood() { // this.mood = this.mood === 'happy' ? 'sad' : 'happy'; const arr = ['happy', 'sad', 'normal'] const index = Math.floor(Math.random() * 3) // 0-2 随机数乘3，然后向下取整，得到0-2的整数 this.mood = arr[index] } }, }) </script> </html> 条件渲染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>条件渲染</title> <script src="../js/vue.js"></script> </head> <body> <!-- 条件渲染： 1.v-if 写法： (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于：切换频率较低的场景 特点：不展示的DOM元素直接被移除 注意：v-if可以和：v-else-if、v-else一起使用，但是要求结构不能被拆分 2.v-if可以和v-else一起使用，但是要求结构不能被拆分 3.v-if可以和v-else-if一起使用，但是要求结构不能被拆分 2.v-show 写法：v-show="表达式" 适用于：切换频率较高的场景 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉 3.备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到 --> <!-- v-show="true"表示显示 v-show="false"表示隐藏 --> <div id="root"> <h2>当前的n值是:{{n}}</h2> <button @click="n++">点我+1</button> <!-- 使用v-show做条件渲染 --> <!-- <h2 v-show="true">欢迎来到{{name}}</h2> --> <!-- 使用v-if做条件渲染 v-if="false"表示隐藏 v-if="true"表示显示 --> <!-- <h2 v-if="false">欢迎来到{{name}}</h2> --> <!-- v-else和v-else-if --> <!-- <div v-if="n === 1">Angular</div> <div v-else-if="n === 2">React</div> <div v-else-if="n === 3">Vue</div> <div v-else>哈哈哈</div> --> <template v-if="n === 1"> <h2>你好</h2> <h2>百度</h2> <h2>北京</h2> </template> </div> </body> <script> new Vue({ el: '#root', data: { name: '尚硅谷', n: 0 } }) </script> </html> 列表渲染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基本列表</title> <script src="../js/vue.js"></script> </head> <body> <!-- v-for指令： 1.用于展示列表数据 2.语法：v-for="(item,index) in xxx" :key="yyy" 3.可遍历：数组、对象、字符串(用的很少)、指定次数(用的很少) --> <div id="root"> <!-- 遍历数组 --> <h2>人员列表(遍历数组)</h2> <ul> <!-- of 和 in 是一样的效果 --> <li v-for="(p,index) in persons" :key="p.id"> {{p.name}}-{{p.age}} </li> </ul> <!-- 遍历对象 --> <h2>汽车信息(遍历对象)</h2> <ul> <li v-for="(value,k) of car" :key="k"> {{k}}-{{value}} </li> </ul> <!-- 测试遍历字符串 --> <h2>测试遍历字符串(用的少)</h2> <ul> <li v-for="(char,index) of str" :key="index"> {{char}}-{{index}} </li> </ul> <!-- 遍历指定次数 --> <h2>测试遍历指定次数(用的少)</h2> <ul> <li v-for="(number,index) in 5" :key="index"> {{index}}-{{number}} </li> </ul> </div> <script> new Vue({ el: '#root', data: { persons: [ { id: '001', name: '张三', age: 18 }, { id: '002', name: '李四', age: 19 }, { id: '003', name: '王五', age: 20 } ], car: { name: '奥迪A8L', price: '100万', color: '黑色' }, str: 'hello' } }) </script> </body> </html> key作用与原理虚拟DOM对比算法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>key的原理</title> <script src="../js/vue.js"></script> </head> <body> <!-- 面试题：react、vue中的key有什么作用?(key的内部原理) 1.虚拟DOM中的key的作用： key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】， 随后Vue进行【新虚拟DOM】和【旧虚拟DOM】进行比较， 2.比较规则： 1.旧虚拟DOM中找到了与新虚拟DOM相同的key: 1.若虚拟DOM中内容没变，直接使用之前的真实DOM! 2.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中的真实DOM! 2.旧虚拟DOM中未找到与新虚拟DOM相同的key: 创建新的真实DOM，随后渲染到页面 3.用index作为key可能会引发的问题： 1.如果数据项没有不变的，使用index作为key可能会引发的问题： 1.若对数据进行：逆序添加、逆序删除等破化顺序操作 会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低。 2.如果结构中还包括输入类的DOM: 会产生错误DOM更新 ==> 界面有问题。 4.开发中如何选择key?： 1.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。 2.如果不存在对数据的逆序添加、逆序删除等破化顺序操作，仅用于渲染列表用于展示， 使用index作为key是完全合适的。 --> <div id="root"> <!-- 遍历数组 --> <h2>人员列表(遍历数组)</h2> <button @click.once="add">添加一个老刘</button> <ul> <!-- of 和 in 是一样的效果 --> <li v-for="(p,index) in persons" :key="index"> {{p.name}}-{{p.age}} </li> </ul> </div> <script> new Vue({ el: '#root', data: { persons: [ { id: '001', name: '张三', age: 18 }, { id: '002', name: '李四', age: 19 }, { id: '003', name: '王五', age: 20 } ] }, methods: { add() { const p = ({ id: '004', name: '老刘', age: 50 }) this.persons.unshift(p) } } }) </script> </body> </html> 列表过滤 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表过滤</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <ul> <li v-for="(p,index) of fillPerons" ::key="index"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> </div> <script> // 用watch实现 /*new Vue({ el: "#root", data: { keyWord: '', persons: [ { id: '001', name: "马冬梅", age: 19, sex: '女' }, { id: '002', name: "周冬雨", age: 20, sex: '女' }, { id: '003', name: "周杰伦", age: 21, sex: '男' }, { id: '004', name: "温兆伦", age: 22, sex: '男' } ], fillPerons: [] }, watch: { //keyWord(val) { //this.fillPerons = this.persons.filter((p) => { //return p.name.indexOf(val) !== -1 //}) keyWord: { immediate: true, handler(val) { this.fillPerons = this.persons.filter((p) => { return p.name.indexOf(val) !== -1 }) }, } } })*/ // 用computed实现 new Vue({ el: "#root", data: { keyWord: '', persons: [ { id: '001', name: "马冬梅", age: 19, sex: '女' }, { id: '002', name: "周冬雨", age: 20, sex: '女' }, { id: '003', name: "周杰伦", age: 21, sex: '男' }, { id: '004', name: "温兆伦", age: 22, sex: '男' } ] }, computed: { fillPerons() { return this.persons.filter((p) => { return p.name.indexOf(this.keyWord) !== -1 }) } } }) </script> </body> </html> 列表排序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表排序</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <button @click="sortType = 2">年龄升序</button> <button @click="sortType = 1">年龄降序</button> <button @click="sortType = 0">原顺序</button> <ul> <li v-for="(p,index) of fillPerons" ::key="index"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> </div> <script> // 用computed实现 new Vue({ el: "#root", data: { keyWord: '', sortType: 0, // 0:原顺序，1:年龄降序，2:年龄升序 persons: [ { id: '001', name: "马冬梅", age: 30, sex: '女' }, { id: '002', name: "周冬雨", age: 20, sex: '女' }, { id: '003', name: "周杰伦", age: 18, sex: '男' }, { id: '004', name: "温兆伦", age: 22, sex: '男' } ] }, computed: { fillPerons() { const arr = this.persons.filter((p) => { return p.name.indexOf(this.keyWord) !== -1 }) // 判断一下是否需要排序 if (this.sortType) { arr.sort((p1, p2) => { return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age }) } return arr } } }) </script> </body> </html> 更新时的一个问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>更新时的一个问题</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>人员列表</h2> <button @click="updateMei">更新马冬梅的信息</button> <ul> <li v-for="(p,index) of persons" :key="p.id"> {{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> </div> <script> // 用computed实现 new Vue({ el: "#root", data: { persons: [ { id: '001', name: "马冬梅", age: 30, sex: '女' }, { id: '002', name: "周冬雨", age: 20, sex: '女' }, { id: '003', name: "周杰伦", age: 18, sex: '男' }, { id: '004', name: "温兆伦", age: 22, sex: '男' } ] }, methods: { updateMei() { //this.persons[0].name = '马老师' // 奏效 //this.persons[0].age = 50 // 奏效 //this.persons[0].sex = '男' // 奏效 this.persons[0] = { id: '001', name: '马老师', age: 50, sex: '男' } } } }) </script> </body> </html> Vue监测数据的原理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue监测数据改变的原理</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> </div> </body> <script> // 1.创建Vue实例对象 const vm = new Vue({ el: '#root', data: { name: '尚硅谷', address: '北京' } }) </script> </html> Vue.set()方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.set的使用</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>学校信息</h1> <h2>学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> <h2>校长是：{{school.leader}}</h2> <hr /> <h1>学生信息</h1> <button @click="addSex">添加一个性别属性，默认值是男</button> <h2>姓名：{{student.name}}</h2> <h2 v-if="student.sex">性别：{{student.sex}}</h2> <h2>年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2> <h2>朋友们</h2> <ul> <li v-for="(f,index) in student.friends" ::key="index"> {{f.name}}--{{f.age}} </li> </ul> </div> </body> <script> // 1.创建Vue实例对象 const vm = new Vue({ el: '#root', data: { name: '尚硅谷', address: '北京', school: { leader: '张校长', // 添加leader属性 }, student: { name: 'tom', age: { rAge: 40, sAge: 29, }, friends: [ { name: 'jerry', age: 35 }, { name: 'lucy', age: 38 } ] } }, methods: { addSex() { this.$set(this.student, 'sex', '男') } } }) </script> </html> Vue监测数据的原理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue监测数据改变的原理_数组</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>学校信息</h1> <h2>学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> <h2 v-if="school.leader">校长是：{{school.leader}}</h2> <!-- 使用v-if确保只有当leader存在时才渲染 --> <hr /> <h1>学生信息</h1> <button @click="addSex">添加一个性别属性，默认值是男</button> <h2>姓名：{{student.name}}</h2> <h2 v-if="student.sex">性别：{{student.sex}}</h2> <h2>年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2> <h2>爱好</h2> <ul> <li v-for="(h,index) in student.hobby" :key="index"> {{h}} </li> </ul> <h2>朋友们</h2> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}}--{{f.age}} </li> </ul> </div> <script> // 1.创建Vue实例对象 const vm = new Vue({ el: '#root', data: { name: '尚硅谷', address: '北京', school: { leader: '张校长', // 添加leader属性 }, student: { name: 'tom', age: { rAge: 40, sAge: 29, }, hobby: ['抽烟', '喝酒', '烫头'], friends: [ { name: 'jerry', age: 35 }, { name: 'lucy', age: 38 } ] } }, methods: { addSex() { this.$set(this.student, 'sex', '男') } } }) </script> </body> </html> 总结Vue监视数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue监测数据改变的原理_数组</title> <script src="../js/vue.js"></script> </head> <body> <!-- Vue监视数据的原理： 1. Vue会监视data中的所有层次的数据。所有属性，包括对象和数组 2.如何监测对象中的数据? 通过setter实现监视，且要在new Vue时就传入要监视的数据。 (1).对象中后追加的属性，Vue默认不做响应式处理 (2).如需给后添加的属性做响应式，请使用如下API： 1).Vue.set(target,key,value)或 2).vm.$set(target,key,value) 3.如何监测数组中的数据? 通过包裹数组更新元素的方法实现，本质就是做了两件事。 (1).调用原生对应的方法对数组进行更新。 (2).重新解析模板，进而更新页面。 4.在Vue修改数组中的某个元素·一定要用如下方法： 1).使用Vue提供的API：push()、pop()、shift()、unshift()、splice()、sort()、reverse() 2).Vue.set() 或 vm.$set() 特别注意：Vue.set() 或 vm.$set() 不能给vm 或 vm的根数据对象 添加属性!!! --> <div id="root"> <h1>学生信息</h1> <button @click="student.age++">年龄+1岁</button> <br /> <button @click="addSex">添加性别属性，默认值：男</button> <br /> <button @click="student.sex = '未知'">修改性别</button> <br /> <button @click="addFriend">在列表首位添加一个朋友</button> <br /> <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br /> <button @click="addHobby">添加一个爱好</button> <br /> <button @click="updateHobby">修改第一个爱好为：开车</button> <br /> <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br /> <h3>姓名：{{student.name}}</h3> <h3>年龄：{{student.age}}</h3> <h3 v-if="student.sex">性别：{{student.sex}}</h3> <h3>爱好：</h3> <ul> <li v-for="(h,index) in student.hobby" :key="index"> {{h}} </li> </ul> <h3>朋友们</h3> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}}--{{f.age}} </li> </ul> </div> <script> // 1.创建Vue实例对象 const vm = new Vue({ el: '#root', data: { student: { name: 'tom', age: 20, hobby: ['抽烟', '喝酒', '烫头'], friends: [ { name: 'jerry', age: 35 }, { name: 'lucy', age: 38 } ] } }, methods: { addSex() { Vue.set(this.student, 'sex', '男') // this.$set(this.student, 'sex', '男') }, addFriend() { this.student.friends.unshift({ name: 'jeek', age: 18 }) }, updateFirstFriendName() { this.student.friends[0].name = '张三' }, addHobby() { this.student.hobby.push('学习') }, updateHobby() { // this.student.hobby.splice(0, 1, '开车') // Vue.set(this.student.hobby, 0, '开车') this.$set(this.student.hobby, 0, '开车') }, removeSmoke() { this.student.hobby = this.student.hobby.filter(h => h !== '抽烟') } } }) </script> </body> </html> 收集表单数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>收集表单数据</title> <script src="../js/vue.js"></script> </head> <!-- 收集表单数据： 若：<input type="text"/>,则v-model收集的是value值.用户输入的就是value值。 若：<input type="radio"/>,则v-model收集的是value值.且要给标签配置value值。 若：<input type="checkbox"/>, 1.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值) 2.配置了input的value属性： (1)v-model的初始化是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值) (2)v-model的初始化是数组，那么收集的就是value组成的数组。 备注：v-model的三个修饰符。 1.lazy：失去焦点再收集数据 2.number：输入的是字符串转为有效的数字 3.trim：去除两端的空格 --> <body> <div id="root"> <!-- 表单提交，.prevent阻止默认提交事件 --> <form @submit.prevent="demo"> <!-- v-model 默认收value的值 .trim去除左右两边空格 --> 账号：<input type="text" v-model.trim="userInfo.account"> <br /><br /> 密码：<input type="password" v-model="userInfo.password"> <br /><br /> 性别： 男<input type="radio" name="sex" v-model="userInfo.sex" value="male"> 女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br /><br /> 爱好： 学习<input type="checkbox" v-model="userInfo.hobby" value="study"> 打游戏<input type="checkbox" v-model="userInfo.hobby" value="game"> 吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"> <br /><br /> 所属校区 <select v-model="userInfo.city"> <option value="">请选择校区</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> <option value="wuhan">武汉</option> </select> <br /><br /> 其他信息： <textarea v-model="userInfo.other"></textarea> <br /><br /> <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http:// .baidu ">《用户协议》</a> <button>提交</button> </form> </div> </body> <script> new Vue({ el: '#root', data: { userInfo: { account: '', password: '', sex: 'female', hobby: [], city: 'beijing', other: '', agree: '' } }, methods: { demo() { // 将数据转换为Json数据 //console.log(JSON.stringify(this.$data)); console.log(JSON.stringify(this.userInfo)); } } }) </script> </html> 过滤器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>过滤器</title> <script src="../js/vue.js"></script> </head> <!-- 过滤器： 定义：对要显示的数据·进行特定格式化后再显示（适用于一些简单逻辑的处理）。 语法： 1.注册过滤器：Vue.filter(name,callback) 或 new Vue({ filters: { name: callback } }) 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性="xxx | 过滤器名" 备注： 1.过滤器也可以接收额外的参数、多个过滤器也可以串联 2.并没有改变原本的数据，是产生新的对应的数据 --> <body> <div id="root"> <h2>显示格式化后的时间</h2> <h3>现在是：{{time}}</h3> </div> </body> <script> new Vue({ el: '#root', data: { time: new Date() }, filters: { // 过滤器 // 格式化时间 formatTime: function (value) { // value就是time // 1.将时间对象转为字符串 let str = value.toString() // 2.截取字符串 returnstr.slice(0, 24) } } }) </script> </html> v-text指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-text指令</title> <script src="../js/vue.js"></script> </head> <body> <!-- 我们学过的指令： v-bind: 单向绑定解析表达式，可简写为：xxx v-model: 用于实现DOM元素和数据之间的双向绑定(双向数据绑定) v-for: 用于遍历数组/对象/字符串 v-on: 用于绑定事件监听，可简写为@ v-if: 用于控制DOM元素的显示与隐藏 条件渲染(动态控制节点是否存在) v-else:条件渲染（动态控制节点是否存在)） v-text: 用于把一个字符串解析为文本，并渲染到DOM元素上 v-show: 条件渲染（动态控制节点是否展示） v-text指令： 1.作用：向其所在的字节中渲染文本内容 2.与插值语法的区别：v-text会替换掉节点中的内容，插值语法不会 --> <div id="root"> <div>你好，{{name}}</div> <div v-text="name">你好，</div> <div v-text="str"></div> </div> <script> const vm = new Vue({ el: '#root', data: { name: '尚硅谷', str: '<h3>你好啊！</h3>' } }) </script> </body> </html> v-html指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>html指令</title> <script src="../js/vue.js"></script> </head> <!-- v-html指令： 1.作用：向指定节点中渲染包含html结构的内容。 2.与插值语法的区别： (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。 (2).v-html可以识别html结构 3.严重注意：v-html有安全性问题！！！！ (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击 (2).尽量不要在v-html中绑定用户输入的内容 --> <body> <div id="root"> <div>你好，{{name}}</div> <div v-html="str"></div> </div> </body> <script> const vm = new Vue({ el: '#root', data: { name: '尚硅谷', str: '<h3>你好啊！</h3>' } }) </script> </script> </html> let str = value.toString() // 2.截取字符串 returnstr.slice(0, 24) } } }) ~~~ v-text指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-text指令</title> <script src="../js/vue.js"></script> </head> <body> <!-- 我们学过的指令： v-bind: 单向绑定解析表达式，可简写为：xxx v-model: 用于实现DOM元素和数据之间的双向绑定(双向数据绑定) v-for: 用于遍历数组/对象/字符串 v-on: 用于绑定事件监听，可简写为@ v-if: 用于控制DOM元素的显示与隐藏 条件渲染(动态控制节点是否存在) v-else:条件渲染（动态控制节点是否存在)） v-text: 用于把一个字符串解析为文本，并渲染到DOM元素上 v-show: 条件渲染（动态控制节点是否展示） v-text指令： 1.作用：向其所在的字节中渲染文本内容 2.与插值语法的区别：v-text会替换掉节点中的内容，插值语法不会 --> <div id="root"> <div>你好，{{name}}</div> <div v-text="name">你好，</div> <div v-text="str"></div> </div> <script> const vm = new Vue({ el: '#root', data: { name: '尚硅谷', str: '<h3>你好啊！</h3>' } }) </script> </body> </html> v-html指令
[外链图片转存中…(img-rl5il4ui-1740925999963)]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>html指令</title> <script src="../js/vue.js"></script> </head> <!-- v-html指令： 1.作用：向指定节点中渲染包含html结构的内容。 2.与插值语法的区别： (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。 (2).v-html可以识别html结构 3.严重注意：v-html有安全性问题！！！！ (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击 (2).尽量不要在v-html中绑定用户输入的内容 --> <body> <div id="root"> <div>你好，{{name}}</div> <div v-html="str"></div> </div> </body> <script> const vm = new Vue({ el: '#root', data: { name: '尚硅谷', str: '<h3>你好啊！</h3>' } }) </script> </script> </html>上一篇
模拟退火算法浅尝
