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 的方块，他需…...
硬件工程选型解析：钡特电源VB60-24S12LD与金升阳URB2412LD-60WR3同属工业高可靠
在工业硬件研发、设备调试与批量量产工作中，大功率工业DC-DC模块的工况适配性、结构规范性与运行稳定性，是硬件研发工程师重点核查的核心指标，直接决定工控设备、电力终端、智能装备的长期运行可靠性。在60W级国产直流电源模块品类中…...
如何快速掌握Prism-Samples-Wpf交互性编程：InvokeCommandAction事件驱动开发终极指南
如何快速掌握Prism-Samples-Wpf交互性编程：InvokeCommandAction事件驱动开发终极指南 【免费下载链接】Prism-Samples-Wpf Samples that demonstrate how to use various Prism features with WPF 项目地址: https://gitcode.com/gh_mirrors/pr/Prism-Samples-Wpf…...
AI Agent落地元年：从对话交互到自主工作流的技术演进与落地实践
2026年被行业公认为AI Agent落地元年，生成式AI彻底告别单纯的参数内卷与对话式交互，进入自主决策、自动执行、闭环迭代的全新阶段。相较于传统大模型被动响应的工作模式，AI Agent凭借感知、规划、执行、复盘的完整闭环能力，成为企…...
Unity中用Sentis部署YOLOv8 Nano实现移动端实时目标检测
1. 为什么是YOLOv8 Nano Sentis？不是ONNX Runtime，也不是TensorRT？去年在做一个AR巡检项目时，我卡在物体检测环节整整三周。客户要求在中端安卓手机（骁龙665）上实现每秒15帧以上的实时检测，同时…...
fastapi · FastAPI framework, high performance, easy to learn, fast to code, ready for production
fastapi FastAPI framework, high performance, easy to learn, fast to code, ready for production 本文整理自 GitHub，经重新整理编辑。 FastAPI framework, high performance, easy to learn, fast to code, ready for production Documentation: https://fas…...
涡流检测驱动的发动机气门硬度分选技术【附算法】
✨ 长期致力于核环境机器人、机器人运动学、机械臂振动抑制、自适应动力学控制研究工作，擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流，点击《获取方式》 （1）核辐射环境下涡流检测机…...
WZLBadge最佳实践：解决徽章显示中的常见问题和性能优化
WZLBadge最佳实践：解决徽章显示中的常见问题和性能优化 【免费下载链接】WZLBadge //An one-line tool to show styles of badge for UIView 项目地址: https://gitcode.com/gh_mirrors/wz/WZLBadge WZLBadge是一款轻量级的iOS徽章显示工具，能够帮…...
双榜第一！文心5.1登顶中文创意写作综合实力评测
【大力财经】5月18日，全球权威ICT领域市场研究机构Omdia发布《2026 年基础模型中文创意写作能力评估》报告，围绕中文创意写作七大核心维度，对 DeepSeek V4、文心5.1（ERNIE 5.1）、GPT 5.5 等 8大国内外主流顶级文本模型…...
MySQL 9.0安装教程：免费数据库软件，科研数据管理必备
做科研的朋友，应该都有这个经历。以前用Excel打开数据文件，几秒钟就出来了。现在呢？几十万行的数据表，打开转半天圈，筛选一下直接未响应。保存一次要等好久，生怕电脑死机。不是你的电脑不行，是数…...
告别 API 收费！OpenClaw 对接 Ollama，本地大模型免费无限用
OpenClaw 连接 Ollama 本地模型教程 前置准备 已安装并能正常打开 OpenClaw Windows 客户端OpenClaw 顶部 Gateway 状态保持在线电脑可正常联网，能访问 Ollama 官网磁盘空间充足（本地模型占用空间较大）提前确认待下载的模型名称（…...