Vue2学习
一、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或isHotinfo: {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://www.baidu.com">《用户协议》</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: 单向绑定解析表达式，可简写为：xxxv-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: 单向绑定解析表达式，可简写为：xxxv-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>
相关文章：
Vue2学习
一、Vue3 基础 监视属性 天气案例 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>天气案例</…...
PySide（PyQT）重新定义contextMenuEvent()实现鼠标右键弹出菜单
在 PySide中，contextMenuEvent() 是 QWidget 类（以及继承自它的所有子类）的一个事件处理方法，主要用于处理上下文菜单事件，也就是当用户在控件上右键点击时触发的事件。 • 通过重新定义contextMenuEvent()来实现自定…...
Storm实时流式计算系统（全解）——下
storm编程案例-网站访问来源实时统计-需求 storm编程-网站访问来源实时统计-代码实现 根据以上条件可以只写一个类，我们只需要写2个方法和一个main（），一个读取/发射（spout）。 一个拿到数据统计后发到redis…...
配置Nginx日志url encode问题
文章目录 配置Nginx日志url encode问题方法1-lua方法2-set-misc-nginx-module 配置Nginx日志url encode问题 问题描述： 当自定义日志输出格式，需要输出http请求中url参数时，如果参数中包含中文，是会进行url encode的，…...
JAVA SE 包装类和泛型
文章目录 📕1. 包装类✏️1.1 基本数据类型和对应的包装类✏️1.2 装箱和拆箱✏️1.3 自动装箱和自动拆箱 📕2. 泛型✏️2.1 泛型的语法✏️2.2 泛型类的使用✏️2.3 裸类型(Raw Type)✏️2.4 擦除机制✏️2.5 泛型的上界✏️2.6 泛型方法✏️2.7 通配符…...
基于Linux系统的物联网智能终端
背景 产品研发和项目研发有什么区别？一个令人发指的问题，刚开始工作时项目开发居多，认为项目开发和产品开发区别不大，待后来随着自身能力的提升，逐步感到要开发一个好产品还是比较难的，我认为项目开发的目的…...
从零开始开发纯血鸿蒙应用之语音朗读
从零开始开发纯血鸿蒙应用 〇、前言一、API 选型1、基本情况2、认识TextToSpeechEngine 二、功能集成实践1、改造右上角菜单2、实现语音播报功能2.1、语音引擎的获取和关闭2.2、设置待播报文本2.3、speak 目标文本2.4、设置语音回调 三、总结 〇、前言 中华汉字洋洋洒洒何其多…...
物联网小范围高精度GPS使用
在园区内实现小范围高精度GPS（全球定位系统）定位，通常需要结合多种技术来弥补传统GPS在精度和覆盖范围上的不足。以下是实现小范围高精度GPS定位的解决方案，包括技术选择、系统设计和应用场景。 一、技术选择 在园区内实现高精度…...
一次有趣的前后端跨越排查
进行前后端代码联调的时候，使用axios调用后端请求，因为都是本地进行联调，所以没有考虑跨域的问题，写了一个get的请求接口，请求后端时，突然跳出下面的问题： 错误的信息一看很像就是跨域的问题&…...
大语言模型（LLM）如何赋能时间序列分析？
引言 近年来，大语言模型（LLM）在文本生成、推理和跨模态任务中展现了惊人能力。与此同时，时间序列分析作为工业、金融、物联网等领域的核心技术，长期依赖传统统计模型（如ARIMA）或深度学习模型&a…...
 核心原理深度剖析：从架构设计到运行机制)
Kubernetes (K8S) 核心原理深度剖析：从架构设计到运行机制
Kubernetes（K8S）作为容器编排领域的“操作系统”，其设计和实现原理是开发者进阶的必修课。本文将从架构设计、核心组件协作、关键机制实现三个维度，结合源码逻辑与实战场景，分享 K8S 的底层运行原理。 一、Kubernetes 架构设计 1. 声明式 API 与控制器模式 K8S 的核心设…...
Excel 豆知识 - XLOOKUP 为啥会出 #N/A 错误
XLOOKUP有的时候会出 #VALUE! 这个错误。 因为这个XLOOUP有个参数叫 找不到时的返回值，那么为啥还会返回 #VALUE! 呢？ 可能还有别的原因，但是主要原因应该就是 检索范围 和 返回范围 不同。 比如这里检索范围在 B列，是 4-21&…...
【深度学习】Hopfield网络：模拟联想记忆
Hopfield网络是一种经典的循环神经网络，由物理学家John Hopfield在1982年提出。它的核心功能是模拟联想记忆，类似于人类大脑通过部分信息回忆完整记忆的能力。以下是通俗易懂的解释： 1. 核心思想 想象你看到一张模糊的老照片，虽然…...
Python可视化大框架的研究与应用
## 摘要 随着数据科学和人工智能的快速发展，数据可视化成为了数据分析中不可或缺的一部分。Python作为一种功能强大且易于学习的编程语言，提供了多种可视化工具和库。本文旨在探讨Python可视化的主要框架，分析其特点、应用场景以及未来发展趋…...
Java 泛型（Generics）详解与使用
一、什么是 Java 泛型？ 泛型（Generics）是 Java 1.5 引入的一项重要特性，主要用于 类型参数化，允许在类、接口和方法定义时使用 类型参数（Type Parameter），从而提高代码的复用性、类…...
七、Three.jsPBR材质与纹理贴图
1、PBR材质金属度和粗糙度 1、金属度metalness 金属度属性.metalness表示材质像金属的程度, 非金属材料,如木材或石材,使用0.0,金属使用1.0。 threejs的PBR材质，.metalness默认是0.5,0.0到1.0之间的值可用于生锈的金属外观 new THREE.MeshStandardMaterial({met…...
2024 ChatGPT大模型技术场景与商业应用视频精讲合集（45课）.zip
2024ChatGPT大模型技术场景与商业应用视频精讲合集，共十三章，45课。 01. 第一章 ChatGPT：通用人工智能的典范 1.1 ChatGPT概述 .mp4 1.2 通用能力 .mp4 1.3 通用人工智能风口 .mp4 02. 第二章 大模型：ChatGPT的核心支撑 2.1 底层…...
Pytest之parametrize参数化
文章目录 1.前言2.单参数3.多参数4.字典形式5.parametrize 结合 ids 参数 1.前言 在 pytest 中，parametrize 是一个非常实用的装饰器，它允许你对测试函数进行参数化，即使用不同的参数组合多次运行同一个测试函数，从而更高效地进行…...
Python面试（八股）
1. 可变对象和不可变对象 (1). 不可变对象（ Immutable Objects ） 不可变对象指的是那些一旦创建后其内容就不能被修改的对象。如果尝试修改不可变对象的内容，将会创建一个新的对象而不是修改原来的对象。常见的不可变类型包括： …...
2024年第十五届蓝桥杯大赛软件赛省赛Python大学A组真题解析《更新中》
文章目录 试题A: 拼正方形(本题总分：5 分)解析答案试题B: 召唤数学精灵(本题总分：5 分)解析答案试题C: 数字诗意解析答案试题D:回文数组试题A: 拼正方形(本题总分：5 分) 【问题描述】 小蓝正在玩拼图游戏，他有7385137888721 个2 2 的方块和10470245 个1 1 的方块，他需…...
【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后，分别用…...
AI Agent与Agentic AI：原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...
P3 QT项目----记事本（3.8）
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学（ECC）是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础，例如椭圆曲线数字签…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务： test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列，以便知晓哪些列包含有价值的数据，…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）
本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...