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>