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或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://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: 单向绑定解析表达式，可简写为：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>