一、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>javascript">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>javascript">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>javascript">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>javascript">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>javascript">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>javascript">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>javascript">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>javascript">// 用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>javascript">// 用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>javascript">// 用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>javascript">// 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>javascript">// 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>javascript">// 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>javascript">// 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>javascript">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>javascript">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>javascript">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>javascript">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>javascript">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>javascript">const vm = new Vue({el: '#root',data: {name: '尚硅谷',str: '<h3>你好啊！</h3>'}})
</script>
</script></html>
