Vue核心
安装Vue.js(3/4集)
安装插件 open in browser
安装插件 Vue 3 snippets(20集左右)
在bootCDN网站上下载一些插件，day.js 39集
1.1Vue简介
每一个模块一个vue组件，每一个vue都有html+css+js
命令式编码，一步一步，傻瓜式做法
声明式，心有灵犀，熟悉之后
多了一步，虚拟dom，处理变化的数据（diff算法进行比较 ，复用已经存在的数据）
1.2初始Vue
安装Vue一些东西的视频链接
注意：
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
- root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
- root容器里的代码被称为Vue模板
- Vue实例与容器是一一对应的
- 真实开发中只有一个Vue实例，并且会配合着组件一起使用
- {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
- 一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
//创建Vue实例
new Vue({
//与上方容器建立联系
el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
/* 如果是类选择器，就是 el:'.root'
把容器里面会变化的字，放在Vue里保管
data中用于存储数据，数据供el指定的容器使用
值暂时先写成一个对象
*/
data: {
name: 'liuyue'
}
});
</script>
</head>
<body>
<div id="root">
<h1>hello {{name}}</h1>
</div>
</body>
</html>
第二个代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>hellosfd {{name.toUpperCase()}},age:{{age}},{{Date.now()}}</h1>
</div>
<!-- 注意区分js表达式和js代码(语句)
1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方
(1)a
(2)a+b
(3)demo(1)
2.js代码（语句）
if(){}
for(){}
-->
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
//创建Vue实例
new Vue({
//与上方容器建立联系
el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data: {
name: 'liuyue',
age: 18
}
});
</script>
</body>
</html>
1.3Vue模板语法
- 插值语法：
-
功能：用于解析标签体内容
-
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有区域
- 指令语法：
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
- 举例：< a v-bind:href=“xxx”>或简写为< a :href=“xxx”>，xxx同样要写js表达式，且可以直接读取到data中的所有属性
- 备注：Vue中有很多的指令，且形式都是v-???，此处我们只是拿v-bind举个例子
- 超链接用的是指令语法。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>插值语法</h1>
<h2>你好, {{name}} </h2>
<h2>你好, {{school.name}} </h2>
<br>
<!-- 加入v-bind,url就会被当做js表达式执行 v-bind:被简写成: -->
<a v-bind:href="url">点我去尚硅谷学习1</a>
<a :href="school.url.toUpperCase()">点我去尚硅谷学习1</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
new Vue({
el: "#root",
data: {
name: "jack",
url: "http://www.atguigu.com",
school:{
name:"liuyue",
url: "http://www.baidu.com"
}
}
})
</script>
</body>
</html>
1.4数据绑定
- 单向绑定（v-bind）：数据只能从data流向页面
- 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data (简写 v-model= )
- 双向绑定一般都应用在表单类元素上（如：、、等，就是对value进行操作的
- v-model:value可以简写为v-model，因为v-model默认收集的就是value值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据绑定</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
单向数据绑定: <input type="text" v-bind:value="name"><br>
双向数据绑定: <input type="text" v-model:value="name"><br>
双向数据绑2: <input type="text" v-model="name">
<!-- 如下代码是错误的，因为V-model只能应用于表单类元素（输入类元素）
<h2 v-model:x="name">你好啊</h2> -->
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
new Vue({
el: "#root",
data: {
name: "u1234"
}
});
</script>
</body>
</html>
el和data两种写法
可以把 // el: “#root”,注释掉，然后使用const m = 就可以打印出Vue，红色框中以$开头的东西，都是Vue为我们准备好的，都是给程序员用的，不带$的东西，是给底层的逻辑用的
- el有2种写法：
创建Vue实例对象的时候配置el属性
先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值
2 . data有2种写法：
-
可以是data:function(){return{xxx}}
-
也可是data(){return{xxx}}
-
data:{xxx}
如何选择：目前哪种写法都可以，
以后学到组件时，data必须使用函数 data(){return{xxx}}
，否则会报错
原因:
vue中data必须是函数是为了保证组件的独立性和可复用性，data是一个函数，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，你实例化几次，就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。
由Vue管理的函数，一定不要写箭头函数，否则this指向的就不是Vue函数实例，而是window全局对象，因为箭头函数没有自己的this，就向外面找，就找到了window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>hello,{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const v = new Vue({
el: "#root",//第一种写法
// data: {
// name: "qut"
// }
// data 的两种写法
data: function () {
// console.log("----",this);此处的this是Vue实例对象
return {
name: "qut"
}
}
});
// v.$mount("#root");//第二种写法(在打印出来的的Vue protoType中，见图片)
</script>
</body>
</html>
$mount就是挂载的意思,
1.5MVVM模型
M：模型（Model），对应代码中data中的数据
V：视图（View），模板（页面结构）
VM：视图模型（ViewModel），Vue实例
domListeners 监听页面上的输入框变化，存在数据里，
1.data中所有的属性，最后都出现在了vm身上，且都是这种（…）的 形式
2.vm身上所有的属性以及 Vue原型身上所有的属性，在Vue模板中都可以直接使用
< h2> 测试：{{$options}} < /h2> (VUE身上的属性可以直接使用)
1.6defineProperty函数
接收三个参数:
1.想添加给哪个对象
2.属性的名字
3.一个描述符对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
let number = 18;
let person = {
name: "zhangsan",
address: "黄岛",
// age:18//方案1：参与遍历
}
Object.defineProperty(person, 'age', {
// value: 18,//方案2：属性不参与遍历
// enumerable: true,//设置属性是否可以遍历
// writable:true,//控制属性是否可以在console中通过语句被修改
/*比如delete person.name
person.age=19 然后重新输出，就已经被修改了
*/
//configuration: true,//控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
})
//想要使age的值等于number的值，并且age 的值随着number值的变化而变化。就要用这种方法
Object.defineProperty(person, 'age', {
get: function () {
console.log("有人读取了age属性");
return number
},
//当有人修改person的age属性时，set函数(setter)就会被调用，且返回值就是age的值
set(value) {
console.log("有人修改了person属性值,且值是value");
number=value;
}
})
console.log(person);
console.log(Object.keys(person));
for (let v in person) {
console.log(person[v]);
}
</script>
</body>
</html>
通过方案二这种方法设置，再通过person.age更改参数值，是更改不了的（加上writable就可以了），方案一可以更改。
修改和查询的时候可以这样调用
数据代理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据代理</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 数据代理，通过一个对象代理对另一个对象中属性的操作（读/写） -->
<script type="text/javascript">
let obj={x:100}
let obj2={y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x;
},
set(value){
obj.x=value;
}
})
</script>
</body>
</html>
1.7vue中的数据代理
1.Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：更加方便的操作data中的数据
3.基本原理：
- 通过object.defineProperty()把data对象中所有属性添加到vm上。
- 为每一个添加到vm上的属性，都指定一个getter/setter。
- 在getter/setter内部去操作（读/写）data中对应的属性。
如果没有数据代理，每次写代码都得{{_data.name}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据代理</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- //如果没有数据代理
{{_data.name}}
-->
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
//把let放在外面，要不然console当中访问不到data
let data = {
name: "aiguigu",
address: "黄岛"
}
const vm = new Vue({
el: "#root",
/* data:data 可以直接简写成data
验证vm._data=options.data=data
*/
data
})
</script>
</body>
</html>
既然做了数据代理，让vm身上有了属性，但是展开_data,里面name等属性又是（…）的形式，不是直接就展示值的形式，为什么呢? _data里面的数据是做了一个数据劫持，为了实现响应式（就是能监听数据的变化，实现修改）
1.8 事件处理
-
使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
-
事件的回调需要配置在methods对象中，最终会在vm上
-
methods中配置的函数，==不要用箭头函数！==否则this就不是vm了
-
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
-
@click="demo和@click="demo($event)"效果一致，但后者可以传参
-
event.target是发生事件的元素或触发事件的元素。比如我点击第二个 button，输出event.target，输出的内容是 < button >点我提示信息2< /button>；如果输出event.target.innerHTML，输出的就是button中的内容（点我提示信息2）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来到{{name}}学校学习</h2>
<button v-on:click="showInfo">点我提示信息</button>
<button @click="showInfo2(66,$event)">点我提示信息2</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm=new Vue({
el:"#root",
data:{
name:"qut"
},
methods:{
showInfo(event){
// console.log("Wew");
//如果写成箭头函数，这个地方this是指window
// console.log(this===vm);//此处的this就是指的vm
// console.log(event.target.innerText);
},
showInfo2(number,event){
// console.log("er");
console.log(number);
console.log(event);
console.log(event.target);
}
}
});
</script>
</html>
1.9事件修饰符
Vue中的事件修饰符：
- prevent：阻止默认事件（常用）
- stop：阻止事件冒泡（常用）
- once：事件只触发一次（常用）
- capture：使用事件的捕获模式
- self：只有event.target是当前操作的元素时才触发事件
- passive：事件的默认行为立即执行，无需等待事件回调执行完毕
修饰符可以连续写，比如可以这么用：@click.prevent.stop=“showInfo”
v-model 的修饰符
.lazy 当我们点击 input 时，获取到焦点，这时加上 v-model 属性，操作input内容，是同步进行的。但是 v-model.lazy 在input没有失去焦点之前，是不会被同步的。
.number 自动将用户输入值转化为数值类型
.trim 自动过滤用户输入的收尾空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<style>
* {
margin: 20px;
}
.demo1 {
background-color: aquamarine;
height: 50px;
}
.box1 {
padding: 5px;
background-color: skyblue;
}
.box2 {
padding: 5px;
background-color: orange;
}
.list {
width: 200px;
height: 200px;
background-color: peru;
overflow: auto;
}
li {
height: 100px;
}
</style>
<body>
<div id="root">
<!-- 阻止默认事件 -->
<a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
<!-- 阻止事件冒泡 如果不阻止的话，点击button，会alert两次（第一次是button的alert,第二次是demo1的alert）
这个地方即使click后面加的不是同一个函数，也会发生冒泡事件
-->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo2">点我提示信息</button>
</div>
<!-- 事件只触发一次 -->
<button @click.once="showInfo">点我提示信息（只触发一次）</button>
<!-- 使用事件的捕获模式
正常来说，点击box2,是先输出222，在输出1的，但是使用捕获模式，就变成了先输出1再输出222
-->
<div class="box1" @click.capture="ShowMsg(1)">
div1(我可以被点击)
<div class="box2" @click="ShowMsg(222)">div2
</div>
</div>
<!-- 只有event.target是当前操作的元素时才触发事件
在一定程度上也会缓解冒泡事件，比如说，加上self之后，点击的必须是demo1，才会触发showinfo
-->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo2">点我提示信息</button>
</div>
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
<ul @wheel="demo" class="list">
<!-- 这是地方使用wheel（鼠标滚动）,鼠标滚动执行demo方法，demo方法执行完毕才是滚动侧边的滚动条滚动，也就是数字先输出完毕，下拉条才往下
加上passive就不用等输出完#（也就是不用等demo方法执行完毕，就可以执行侧边的滚动条滚动行为）
@scroll，优先响应滚动条动，不会出现上面的情况
-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
name: "qut"
},
methods: {
showInfo(event) {
// event.preventDefault();//阻止默认行为（跳转页面）
// alert("Ew");
console.log(event);
},
showInfo2(event) {
alert("showInfo2");
},
ShowMsg(msg) {
console.log(msg);
},
demo() {
for (let i = 0; i < 100; i++) {
console.log('#')
}
console.log('累坏了')
}
}
});
</script>
</html>
1.10.1键盘事件修饰符
Vue中常用的按键别名：
回车：enter
删除：delete (捕获“删除”和“退格”键)
退出：esc
空格：space
换行：tab (特殊，必须配合keydown去使用，tab本身就有把焦点切走的含义)
上：up
下：down
左：left
右：right
注意：
1.Vue未提示别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case命名格式
2.系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
- 配合keydown使用：正常触发事件
- tab键把焦点从当前元素切走
4.可以使用keyCode去指定具体的按键，比如：@keydown.13=“showInfo”，但不推荐这样使用
5.Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" placeholder="按下回车 输出相关内容" @keyup.ctrl="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
Vue.config.huiche=13;//自定义一个键码
const vm = new Vue({
el: "#root",
data: {
name: "qut"
},
methods: {
showInfo(event) {
// console.log(event.key,event.keyCode);//输出按键的名字和编码
// if(event.keyCode!==13)return;//按下回车才响应下面的东西
console.log(event.target.value);
},
}
});
</script>
</html>
1.10姓名案例
如果是点击的时候调用的方法，无所谓，
现在这种情况是:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>methods方法</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" value="张" v-model="firstname"><br>
<input type="text" value="三" v-model="lastname"><br>
全名: <span>{{fullname()}}</span><br>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false;
new Vue({
el:'#root',
data:{
firstname:"zhang",
lastname:"san"
},
methods:{
//如果在插值语法里面写方法，每次修改，都会重新调用方法
//收到return之后的值，记得加()
fullname(){
// return"小猪佩奇"
// console.log(this);//this是当前的Vue
return this.firstname+"-"+this.lastname;
}
}
})
</script>
</html>
1.11计算属性
-
定义：要用的属性不存在，需要通过已有属性计算得来。
-
原理：底层借助了Objcet.defineproperty()方法提供的getter和setter。
-
get函数什么时候执行？
- 初次读取时会执行一次
- 当依赖的数据发生改变时会被再次调用
- 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
备注：
- 计算属性最终会出现在vm上，直接读取使用即可
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
- 如果计算属性确定不考虑修改，可以使用计算属性的简写形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" value="张" v-model="firstname"><br>
<input type="text" value="三" v-model="lastname"><br>
全名: <span>{{fullname}}</span><br>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
firstname: "zhang",
lastname: "san"
},
computed: {
//如果不是因为这个地方有set，get两个函数，这个fullname也可以用（）的形式
fullname: {
// get,当有人读取fullname时，get就会被调用，且返回值就是fullname的值
//初次读取fullname时，读取get，所依赖的数据发生变化时，get调用
get() {
console.log("get被调用了");
// console.log(this);//此处的this是vm
return this.firstname + "-" + this.lastname;
},
//当fullname被修改时，调用set
set(value){
const arr=value.split("-");
this.firstname=arr[0];
this.lastname=arr[1];
}
}
}
})
</script>
</html>
1.12天气案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>今天天气很 {{ishot ? "炎热" : "凉爽"}}</h2> -->
<h2>今天天气很{{info}}{{x}}</h2>
<!-- 模板中不能出现this -->
<button @click="ishot=!ishot;x++">切换天气</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
ishot: true,
x: 1,
},
computed: {
info() {
return this.ishot ? "炎热" : "凉爽"
}
},
methods: {
// changeweater(){
// this.ishot=! this.ishot
// this.x++;
// }
}
})
</script>
</html>
1.13 监视属性
监视属性watch：
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视
3.监视有两种写法：
- 创建Vue时传入watch配置
- 通过vm.$watch监视
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<button @click="changeweater">切换天气</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
ishot: true,
},
computed: {
info() {
return this.ishot ? "炎热" : "凉爽"
}
},
methods: {
changeweater() {
this.ishot = !this.ishot
}
},
// watch: {
// //info也可以被调用
// ishot: {
// immediate: true,//初始化时，让handler调用一下
// //当ishot发生改变时调用
// handler(newValue, oldValue) {
// console.log("ishot被修改了", newValue, oldValue);
// }
// }
// },
})
vm.$watch("ishot", {
immediate: true,//初始化时，让handler调用一下
//当ishot发生改变时调用
handler(newValue, oldValue) {
console.log("ishot被修改了", newValue, oldValue);
}
});
</script>
</html>
1.15 深度监视
-
Vue中的watch默认不监测对象内部值的改变（一层）
-
在watch中配置deep:true可以监测对象内部值的改变（多层）
-
Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
-
使用watch时根据监视数据的具体结构，决定是否采用深度监视
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>深度监视</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
ishot: true,
numbers: {
a: 1,
b: 1,
}
},
watch: {
numbers: {
deep: true,
handler() {
console.log('numbers改变了');
}
}
// 'numbers.a':{
//像这个单独监视的，就不需要加deep属性了
// handler(){
// console.log('a被改变了');
// }
// }
},
})
// vm.$watch("number.a", {
// handler(){
// console.log ("A被改变了");
// }
// });
</script>
</html>
监视的简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<button @click="changeweater">切换天气</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
ishot: true,
},
computed: {
info() {
return this.ishot ? "炎热" : "凉爽"
}
},
methods: {
changeweater() {
this.ishot = !this.ishot
}
},
watch: {
// ishot: {
// // immediate: true,//初始化时，让handler调用一下
// //当ishot发生改变时调用
// handler(newValue, oldValue) {
// console.log("ishot被修改了", newValue, oldValue);
// }
// },
//简写
ishot(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue, this)
}
},
})
//正常写法
vm.$watch('isHot', {
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue)
}
})
//简写
vm.$watch('isHot', function (newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue, this)
})
</script>
</html>
1.16 watch VS computed
- computed能完成的功能，watch都可以完成
- watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
- 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象
- 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm或 组件实例对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>姓名案例 watch实现</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" value="张" v-model="firstname"><br>
<input type="text" value="三" v-model="lastname"><br>
全名: <span>{{fullname}}</span><br>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
firstname: "zhang",
lastname: "san",
fullname: "zhang-san"
},
computed: {
},
watch: {
firstname: {
handler(newValue, oldValue) {
setTimeout(() => { //全名=最新的姓+原来的名
this.fullname = newValue + "-" + this.lastname;
}, 1000);
/*什么不能在计算属性中写呢，
因为，我们的return语句是返回给settimeout，而不是返回给fullname的
我们现在还无法做到延时一秒再return
fullname(){
setTimeout(()=>{
return this.firstname + "-" + this.lastname;
},1000);
}
*/
}
},
//简写形式
lastname(newValue, oldValue) {
this.fullname = this.firstname + "-" + newValue;
}
}
})
</script>
</html>
1.17 绑定class style 样式
:class="{ active: attr.isChecked == 1 }"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<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: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal {
background-color: skyblue;
}
.atguigu1 {
background-color: yellowgreen;
}
.atguigu2 {
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.atguigu3 {
border-radius: 20px;
}
</style>
<body>
<div id="root">
<!-- 绑定class样式，字符串写法，适应于样式的类名不确定，需要动态指定
加上：，后面那一段就类似于表达式,Vue也会去解析这一段 -->
<div class="basic" :class="mood" @click="changeMood"> {{name}}</div>
<br><br>
<!-- 绑定class样式，数组写法，适应于要绑定的样式个数不确定，名字也不确定 -->
<div class="basic" :class="arr"> {{name}}</div> <br><br>
<!--绑定class样式，对象写法， 样式的个数名字都确定 要动态决定用不用-->
<div class="basic" :class="classObj"> {{name}}</div><br><br>
<!--绑定style样式，对象写法，-->
<div class="basic" :style="styleObj"> {{name}}</div><br><br>
<!--绑定style样式，数组写法，-->
<div class="basic" :style="styleArr"> {{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
name: '尚硅谷',
mood: 'normal',
arr: ['atguigu1', 'atguigu2', 'atguigu3'],
classObj: {
atguigu1: false,
atguigu2: false
},
styleObj: {
fontSize: '40px',
color: 'red'
},
styleObj2: {
backgroundColor: 'orange',
},
styleArr:[
{
fontSize: '40px',
color: 'red'
},
{
backgroundColor: 'orange',
},
]
},
methods: {
changeMood() {
// this.mood='happy'
const arr = ['happy', 'sad', 'normal']
//随机生成0 1 2，random生成[ 0,1 ) floor向下取整
const index = Math.floor(Math.random() * 3);
this.mood = arr[index];
},
},
});
</script>
</html>
1.18 条件渲染
v-if：
- v-if=“表达式”
- v-else-if=“表达式”
- v-else
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断
v-show：
- 写法：v-show=“表达式”
- 适用于：切换频率较高的场景
- 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<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: 4px dashed rgb(2, 197, 2);
background-color: gray;
}
.normal {
background-color: skyblue;
}
.atguigu1 {
background-color: yellowgreen;
}
.atguigu2 {
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.atguigu3 {
border-radius: 20px;
}
</style>
<body>
<div id="root">
<!-- 使用v-show做条件渲染 -->
<h2 v-show="true">欢迎来到{{name}}</h2>
<h2 v-show="1===1">欢迎来到{{name}}</h2>
<!-- 使用v-if做条件渲染 -->
<h2 v-if="true">欢迎来到{{name}}</h2>
<h2>当前的n:{{n}}</h2>
<button @click="n++">点击我实现n++</button>
<!-- 使用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>
<template v-if="n===1">
<!-- 不影响页面的结构，只能和v-if连用 -->
<h2>Angular</h2>
<h2>React</h2>
<h2>Vue</h2>
</template>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
name: "qut",
n: 0,
},
})
</script>
</html>
1.19 列表渲染-遍历
- 用于展示列表数据
- < li v-for=“(item, index) in xxx” :key=“yyy”>其中key可以是index，也可以是遍历对象的唯一标识，但是使用index做增删时有点问题
- 可遍历：数组、对象、字符串（用的少）、指定次数（用的少）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表（遍历数组）</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}---{{p.age}}
</li>
</ul>
<h2>汽车信息（遍历对象）</h2>
<ul>
<li v-for="(value,biaoqian) in car">
{{biaoqian}}----{{value}}
</li>
</ul>
<h2>遍历字符串</h2>
<ul>
<li v-for="(char,index) in str" :key="index">
{{index}}--{{char}}
</li>
</ul>
<h2>遍历指定次数</h2>
<ul>
<li v-for="(number,index) in 5" :key="index">
{{index}}---{{number}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
//因为数据是有顺序的，所以用的是数组
persons: [
{ name: "张三", age: "20" },
{ name: "李四", age: "19" },
{ name: "王五", age: "25" },
],
car: {
name: "奥迪A8",
price: "30",
color: "black"
},
str: "hello",
}
})
</script>
</html>
1937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
