Vue2和Vue3技术整理1 - 入门篇 - 更新完毕
时间：2022-01-29 作者：xiegongzi
Vue2
0、前言
- 首先说明：要直接上手简单得很，看官网熟悉大概有哪些东西、怎么用的，然后简单练一下就可以做出程序来了，最多两天，无论Vue2还是Vue3，就都完全可以了，Vue3就是比Vue2多了一些东西而已，所以：要快速上手的，滤过本篇博客，自行查看Vue官网即可
1、基础篇
1.1、初识Vue
- 下载域名，链接：https://域名/v2/guide/域名
- 开发版和生产版就字面意思
- Vue开发工具：vscode（IDEA也可以写Vue程序，用IDEA写之前最好安装一个域名插件，然后就可以写Vue程序了），vscode编辑器百度下载
- vscode中的插件和设置自行百度进行配置（ 搜索vscode初始配置即可，然后后续的需要时百度进行配置即可 ），如：浏览器打开方式、Vue快捷模板.........
- 给浏览器安装vuejs devtool工具，阿里云盘链接：https://域名/s/JtHVq5SX3po
- 把文件夹下载了，拖到拓展程序中即可
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-初识域名</title>
<!-- 0、导入域名 -->
<script src="../js/域名"></script>
</head>
<body>
<!-- 1、定义一个容器 -->
<div id="app">
<h3> 第一个vue程序，并使用插值表达式取得值为：{{name}} </h3>
</div>
</body>
<script>
// 去除浏览器控制台中的错误信息
域名uctionTip = false;
// 2、初始化Vue容器
new Vue({
el: "#app",
data: {
name: "紫邪情",
age: "18"
}
})
</script>
</html>
启动效果如下：
初识Vue小结
- Vue容器中的代码一样符合html规范，只不过是混入了一些Vue的特殊用法而已，这个容器中的代码被称为：Vue模板
- Vue实例（ new Vue处 ）和 Vue容器是一 一对应的（ 即：一个Vue实例只能对应一个Vue容器 ）
- 当然：真实开发中只有一个Vue实例，后续会见到
- {{xxx}}中的xxx要写js表达式（ {{xxx}}即为插值表达式，就是取data中的东西而已 ），且xxx可以自动读取到data中的所有属性
- js表达式 和 js代码的区分
- 1、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，如：
- a
- a + b
- test（ 2 ）
- x === y ? \'a\' : \'b\'
- 2、js代码：
- if（）{}
- for（）{}
- .........
- 1、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，如：
- js表达式 和 js代码的区分
- 一旦data中的数据发生改变，那么页面中使用该数据的地方一样发生改变
1.2、认识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>02-vue之v-bind</title>
<script src="../js/域名"></script>
</head>
<body>
<div id="app">
<!-- 常规写法：v-bind绑定的是属性 -->
<a v-bind:href="url"></a>
<!-- 多层嵌套取值：插值表达式 取的东西就是下面Vue实例new Vue({})
data中的东西，可以理解为在找寻集合中的元素
-->
<h3>{{域名}}</h3>
<!-- 简写 -->
<h3 :mySex="域名">{{域名}}</h3>
</div>
</body>
<script>
域名uctionTip = false;
new Vue({
el: "#app", // el指定的是为哪一个容器服务 值就是一个css中的选择器
data: { // data存储的就是数据，这些数据是供el指定的容器去用的
url: "https://域名/xiegongzi/",
person: {
name: "紫邪情",
sex: "女"
}
}
})
</script>
</html>
启动效果
1.3、认识Vue的数据绑定
- 这里需要了解mvvm模式，要理解，可以参照java中的mvc模式（ MVVM本来就是借鉴的MVC模式而整出来的 ）
点击查看代码
<!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>03-v-model</title>
<script src="../js/域名"></script>
</head>
<body>
<div id="app">
<!-- 单向绑定：绑的是属性 -->
单向绑定：<input type="text" :value="name"> <br/>
<!-- 双向绑定：绑的是值 -->
双向绑定：<input type="text" :myName="name" v-model:value="username"> <br/>
<!-- 双向绑定的简写 因为：model绑的就是值，因此：value可以省掉 -->
双向绑定：<input type="text" :myName="name" v-model="username">
</div>
</body>
<script>
域名uctionTip = false;
new Vue({
el: "#app",
data: {
name: "紫邪情",
username: "邪公子"
}
})
</script>
</html>
效果如下：
测试单向绑定
测试双向绑定
1.4、el和data的两种写法
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>04-vue的el和data的两种写法</title>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app"></div>
<script>
// 创建 vm 实例对象
const vm = new Vue({
//指定控制的区域
// el:\'#app\', // el 常规写法
// data:{}, // data 常规写法 ———— 这种也叫对象式写法
// data 函数式写法，这种写法后续经常见
data () { // 这里使用data：function(){}也可以，但是：绝对不能写成data:()=>{}
// 因为这种写法变质了，成为Window对象了，这样后续用this指向时，这个this所指代的就不Vue实例了
return {
}
}
});
// el 另外的写法
域名.$mount(\'#app\') // 此种写法需要记住，后续组件化开发还会见到
</script>
</body>
</html>
小结：el和data的两种写法
- 1、el
- （1）、new Vue时配置el选项
- （2）、先创建Vue实例，然后再通过域名.$mount( \'#app\' ) 来指定el的值
- 2、data
- （1）、对象式
- （2）、函数式
- 如何选择哪种用法：目前都可以，但是后续会玩组件，则：必须用函数式，而且不可以用兰姆达表达式（ 即：上面的data:()=>{}，否则：会出错 ）
- 3、一个原则：
- 由Vue管理的函数，一定不要写箭头函数，就上面的兰姆达表达式，否则就会导致this不再是Vue实例了（ 这个this有大用处，在"new Vue中"用了this就是指的当前的Vue实例，后续可以通过这个this玩很多东西 ）
1.5、理解MVVM模型
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>理解MVVM</title>
<script src="../js/域名"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<h2>姓名:{{name}}</h2> <br>
<h2>性别:{{sex}}</h2>
<hr>
<h2>智商:{{1+1}}</h2>
</div>
<script>
// 创建 vm 实例对象
const vm = new Vue({
//指定控制的区域
el:\'#app\',
data:{
name: "紫邪情",
sex: "女"
},
});
域名( vm );
</script>
</body>
</html>
查看代码中的MVVM
小结：MVVM模型
- 1、M：Model（ 模型 ） ————> data中的数据
- 2、V：View（ 视图 ） —————> 模板代码
- 3、ViewModel：视图模型（ ViewModel ） ————> Vue实例
观察效果发现
- 1、data中所有的属性最后都在vm身上（ 即：ViewModel ）
- 2、vm身上所有的属性 及 Vue原型上的所有属性，在Vue模板中都可以直接使用
- 显示原型属性就是下图中的这个（ 它和另一个隐式原型属性_ _ proto _ _指向的对象就是原型 ）
- 显示原型属性就是下图中的这个（ 它和另一个隐式原型属性_ _ proto _ _指向的对象就是原型 ）
1.6、回顾域名neProperty()函数
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>05-了解域名neProperty()</title>
<script src="../js/域名"></script>
</head>
<body>
<script>
域名uctionTip=false;
let sex = \'女\'
let person = {
name: \'紫邪情\'
}
// 参数说明：person 为要修改的对象 sex为具体修改的对象中的哪个属性 {} 对修改属性的配置
域名neProperty( person , \'sex\' , {
// 以下就是{}中的相关配置
// value: \'男\',
// enumerable: true, // 这个sex是否可以被遍历
// writable: true, // 这个sex是否可以被修改
// configurable: true, // 这个sex是否可以被删除
// 当有人获取sex这个属性时会触发这个get()方法
get(){
域名(\'有人读取sex属性了\');
return sex;
},
// 当有人修改sex属性的值时会触发这个set方法
set(value){
域名(\'有人修改了sex的值\');
return sex = value;
}
});
</script>
</body>
</html>
- 注意：去找temp或者值是调用了get()方法进行获取的，相应的set()方法也知道是怎么回事了
1.7、简单理解数据代理原理
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>06-简单理解数据代理</title>
</head>
<body>
<script>
let obj1 = {x:100};
let obj2 = {y:200};
// 数据代理： 通过一个对象代理 对 另一个对象中属性的操作（ 读 / 写 ）
域名neProperty(obj2 , \'x\' , {
get(){
域名("有人获取了x的值");
return obj1.x;
},
set(value){
域名("有人修改了x的值");
obj1.x = value;
}
})
</script>
</body>
</html>
原理图
- 注意：上面这个是简单了解，深入了解在后面玩Vue监视数据原理时会再次见到defineProperty()和这个数据代理
1.8、事件绑定及其修饰符
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>07-事件绑定及其修饰符</title>
<script src="../js/域名"></script>
</head>
<!--
常用的事件修饰
prevent 表示：阻止默认事件的触发
stop 表示：阻止事件冒泡
once 表示：只执行一次事件
-->
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<!-- vue中事件绑定的简单写法 -->
<button v-on:click="showInfo()">点我显示提示信息</button>
<br/>
<!-- vue中事件绑定的简写 还可以传递参数 -->
<button @click="showInfo2($event, 66)">点我获取带参的事件信息</button>
</div>
<script>
域名uctionTip=false;
// 创建 vm 实例对象
const vm = new Vue({
//指定控制的区域
el:\'#app\',
data:{},
methods: {
showInfo(){
alert("这是vue中的事件绑定");
},
showInfo2(event , number){
域名(event + "=====>" + number);
}
}
});
</script>
</body>
</html>
1.9、计算属性
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>10-计算属性conputed</title>
<script src="../js/域名"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
姓名: <input type="text" v-model="name"> <br/>
性别: <input type="text" v-model="sex">
<hr>
信息: <span>{{info}}</span>
</div>
<script>
域名uctionTip=false;
// 创建 vm 实例对象
const vm = new Vue({
//指定控制的区域
el:\'#app\',
data:{
name:\'紫邪情\',
sex:\'女\'
},
// 所谓的计算属性：就是通过已有属性（ 一般为data中的 ）计算得来
computed: {
info:{
get(){
域名(\'开始调用get()\');
return 域名 + \'-\' + 域名
},
set(value){
域名(\'开始调用set()\' + value);
}
}
}
});
</script>
</body>
</html>
计算属性小结
- 定义：要用的属性不存在，要通过已有属性计算得来
- 原理：借助了域名neproperty()的getter和setter
- get()什么时候执行
- 1、初次读取时会执行一次
- 2、当依赖的数据发生改变时会再次被调用
- 优势：与methods相比，内部有缓存机制（ 复用 ），效率更高、调试方便
- 注意：
- 1、计算属性最终都会在vm（ Vue实例 ）上，直接读取即可
- 2、若计算属性要被修改，那必须写set()去响应修改，且set()中要引起计算时依赖的数据发生改变（ 例子中没有做这一步，在控制台输出后面再执行一步让依赖数据发生改变就可以了【 使用域名t(\'-\')进行拆分嘛，然后把得到的数据对应元素赋给name和sex即可 】 ）
- 另外：计算属性是可以简写的
- 就是把set()去掉，因为：更多时候是读取，并不修改，同时修改还要去控制台（ 刷新就又没了 ），因此：把set()去掉就是计算属性的简写
- 多提一嘴：react的核心思想就是虚拟DOM，而它的原理我个人认为就是计算属性
1.9.1、结合computed、methods、v-on做一个小Demo
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>11 - 使用计算属性做一个Demo</title>
<script src="../js/域名"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<h2>你是:{{result}}</h2>
<button @click="changeResult">切换名字</button>
</div>
<script>
// 去除浏览器控制台中的错误信息
域名uctionTip = false;
// 创建 vm 实例对象
const vm = new Vue({
//指定控制的区域
el:\'#app\',
data:{
name: true
},
computed:{
result(){
return 域名?\'紫邪情\':\'紫女\'
}
},
methods: {
changeResult(){
return 域名 = !域名
}
},
});
</script>
</body>
</html>
但是：上面的代码其实是可以做简化的
- 我们主要做的是图中的这一步，因此：简化 ———— 衍生出v-on的另外一个玩法
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>12 - 使用计算属性做一个Demo 简化</title>
<script src="../js/域名"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<h2>你是:{{result}}</h2>
<!-- @xxx = \'yyyy\' 如果只是做一件简单的事情，那么就可以使用下面的方式
因为：v-on是可以支持js表达式的（ 注意：不是js代码啊 ）
但是：如果这个v-on需要做多件事，那么最好就别这么玩
如：切换了名字，还要弄一个弹窗（ 切换成功 ）这种就别玩
-->
<button @click="name = !name">切换名字</button>
</div>
<script>
// 去除浏览器控制台中的错误信息
域名uctionTip = false;
// 创建 vm 实例对象
const vm = new Vue({
//指定控制的区域
el:\'#app\',
data:{
name: true
},
computed:{
result(){
return 域名?\'紫邪情\':\'紫女\'
}
},
// methods: {
// changeResult(){
// return 域名 = !域名
// }
// },
});
</script>
</body>
</html>
域名、监视属性
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>13 - 监视属性 watch</title>
<script src="../js/域名"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<h2>你是:{{result}}</h2>
<button @click= "name = !name">切换名字</button>
</div>
<script>
// 去除浏览器控制台中的错误信息
域名uctionTip = false;
// 创建 vm 实例对象
const vm = new Vue({
//指定控制的区域
el:\'#app\',
data:{
name: true
},
computed: {
result() {
return 域名?\'紫邪情\':\'紫女\'
}
},
// 监视属性 watch 监视的是属性，也就是data中和computed中的都可以监视
// 现在这种我是用的简写形式 ———— 前提是：只需要使用handler()中的东西时，handler后续会用完整形式
watch: {
name( newValue, oldVaule ){ // 表示的是：监视哪个属性
域名(\'属性发生变化了\' , newValue , oldVaule);
}
},
});
// 当然：监视属性还有一种写法，就是利用Vue的内置函数
/* vm.$watch( \'name\', { // 这里的name就是指监听哪个属性 而且必须是\' \'引起来的
handler( newValue, oldVaule ){
域名(\'属性发生变化了\' , newValue , oldVaule);
}
}) */
</script>
</body>
</html>
-
效果都一样
监视属性 watch小结
- 1、当被监视的属性变化时，回调函数自动调用，进行相关操作
- 回调函数：指的是：handler() ，第一种写法也是可以用handler，只是把watch换成了$watch而已，后面步骤其实是一样的，只是我把第一种给简写了而已
- 2、监视的属性必须存在，才能进行监视
- 3、监视有两种写法
- （1）、new Vue时传入watch配置
- （2）、通过vm.$watch内置函数进行监视
域名.1、深度监视 - 需要掌握的一种
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>14 - 深度监视</title>
<script src="../js/域名"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<h2>你是:{{result}}</h2>
<!-- 现在这个name就是person里面的了，这就是需要监视多层属性变化 -->
<button @click= "域名 = !域名">切换名字</button>
</div>
<script>
// 去除浏览器控制台中的错误信息
域名uctionTip = false;
// 创建 vm 实例对象
const vm = new Vue({
//指定控制的区域
el:\'#app\',
data:{
person:{
name: true
}
},
computed: {
result(){
return 域名?\'紫邪情\':\'紫女\'
}
},
// 下面这种事监视属性的完整写法
watch: {
person:{
// 监视多层结构中所有属性的变化
deep: true, // 深度监视 就做了这一步操作而已
/*
Vue中watch默认是不可以监视属性更里层的，
如：上面person只可以监视person本身这个属性，理解的话，
可以采用对象空间值来比对，假如：person空间地址是是01x23，
那么Vue只会监视这个空间变量有没有发生改变，而内层就不可以监视，
因为：内层中的属性改变了，但是person这个对象本身并没有改变
*/
handler(){
域名(\'属性改变了\');
}
}
}
});
</script>
</body>
</html>
深度监视小结
- 1、Vue中的watch默认不监视对象内部值得改变（ 监视的是一层 ）
- 2、配置deep:true可以监视对象内部值得改变（ 监视多层 ）
- 注意：
- 1、Vue自身可以监视对象内部值得改变，但Vue提供的watch默认不可以
- 这个可以验证的，最后是绑定在vm上的，那么在控制台使用vm去改变那么页面上也可以改变，这里是为了解释Vue不是不可以监视多层的改变，只是：watch默认不支持
- 2、使用watch时根据数据的具体结构，决定是否采用深度监视
- 1、Vue自身可以监视对象内部值得改变，但Vue提供的watch默认不可以
域名、computed和watch的坑
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>15 - computed和watch的坑</title>
<script src="../js/域名"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
姓: <input type="text" v-model="firstname"> <br/>
名: <input type="text" v-model="lastname">
<hr/>
信息: {{fullname}}
</div>
<script>
// 去除浏览器控制台中的警告提示信息
域名uctionTip = false;
// 创建 vm 实例对象
const vm = new Vue({
//指定控制的区域
el:\'#app\',
data:{
firstname: \'紫\',
lastname: \'邪情\',
fullname: \'紫邪情\'
},
watch: {
firstname(val){
域名name = val + 域名name;
},
lastname(val){
域名name = 域名tname + val;
}
}
});
</script>
</body>
</html>
用computed实现
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>02 - computed实现</title>
<script src="../../js/域名"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
姓: <input type="text" v-model = "firstname"> <br/>
名: <input type="text" v-model = "lastname">
<hr/>
信息: {{fullname}}
</div>
<script>
// 去除浏览器控制台中的警告提示信息
域名uctionTip = false;
// 创建 vm 实例对象
const vm = new Vue({
//指定控制的区域
el:\'#app\',
data:{
firstname: \'紫\',
lastname: \'邪情\'
},
computed: {
fullname(){
return 域名tname + 域名name;
}
}
});
</script>
</body>
</html>
最后运行的效果都是一样的，而官网中对这二者有着这样的实例演示
但是：虽然看起来没区别，可是computed和watch还是有区别的，假如：现在我需要让姓改了之后，隔1s之后再显示到信息那里。那么：computed无法做到，但是watch就可以
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>03 - 用watch实现异步操作</title>
<script src="../../js/域名"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
姓: <input type="text" v-model = "firstname"> <br/>
名: <input type="text" v-model = "lastname">
<hr/>
信息: {{fullname}}
</div>
<script>
// 去除浏览器控制台中的警告提示信息
域名uctionTip = false;
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el:\'#app\',
data:{
firstname: \'紫\',
lastname: \'邪情\',
fullname: \'紫邪情\'
},
watch: {
firstname(val){
// 一定需要注意：这里必须使用兰姆达表达式() =>{}
/*
前面说过，Vue所管理的函数，切记别用兰姆达表达式，智能用函数式
这是为了能够通过this拿到vm实例的东西而已
但是注意：这里这个setTimeout()定时函数是Vue所管理的吗？
不是，而后面需要的val是哪里的？是Vue实例中的，修改的值
是在Vue实例身上
所以：想要拿到Vue身上的val怎么弄？页面的展示都是js引擎帮忙去进行操作 / 找寻的
因此：利用js引擎做文章，让它找的时候自动去层级查找，它执行到里面的域名name = val + 域名name时
会去找this是谁,()=>{}这里是用的兰姆达表达式，这就会指向Window对象，而Window上没有fullname，所以就会
往外找，找到firstname(val)这是函数式，指向的就是Vue实例，也就找到了fullname、val.....
*/
setTimeout( () => {
域名name = val + 域名name;
}, 1000);
},
lastname(val){
域名name = 域名tname + val;
}
}
});
</script>
</body>
</html>
- 而利用computed就不可以做到上面的这种异步操作
computed和watch的区别
- 1、computed能完成的功能，watch绝对都可以做到
- 2、watch能完成的功能，computed不一定可以做到，如：上面举的例子进行异步操作
- 原则：
- 1、凡是被Vue所管理的函数，最好都写成函数式（ 即：普通函数 ），这是为了能够让this指向Vue实例 或 组件实例对象（ 后续会见到 ），这样就可以通过this拿到它们对应的东西
- 2、凡是不被Vue所管理的函数（ 如：定时器里面的回调函数、ajax中的回调函数.... )，最好都写成兰姆达表达式（ 即：箭头函数 ），这样做也是为了能够让this指向Vue实例 或 组件实例对象
域名、样式绑定
域名.1、class样式绑定
假如有如下的一个页面
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01 - class样式绑定</title>
<script src="../../js/域名"></script>
<style>
body {
background-image: url(img/域名);
text-align: center;
background-size: 100% 100%;
height: 100%;
overflow: hidden;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
.top {
background: #ffffff2e;
width: 100%;
position: absolute;
bottom: 0;
line-height: 60px;
left: 0px;
right: 0px;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 600;
}
.basicLogin {
position: absolute;
top: 16%;
left: 28.5%;
width: 40%;
padding: 70px 2%;
text-align: center;
}
.title {
font-weight: 600;
font-size: 22px;
color: #0000FF;
margin-bottom: 40px;
}
.line {
border-bottom: 1px solid #ffff;
margin: 22px 1%;
width: 96%;
}
.line input {
border: none;
padding: 0px 1%;
margin: 1%;
background: #ffffff14;
width: 84%;
font-size: 16px;
line-height: 30px;
outline: none;
}
.line .smallImg {
width: 26px;
float: left;
vertical-align: middle;
margin-top: 1px;
}
.logBut {
background: #7bb5ee;
padding: 10px 80px;
border: none;
color: #fff;
margin-top: 40px;
font-size: 16px;
cursor:pointer;
}
</style>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<div class="top">©紫邪情 · 用Java改变未来</div>
<div class="basicLogin">
<div class="title">©紫邪情 · 登录</div>
<div class="line">
<img class="smallImg" src="img/icon-域名" />
<input placeholder="请输入账号" type="text" />
</div>
<div class="line">
<img class="smallImg" src="img/icon-域名" />
<input placeholder="请输入密码" type="password" />
</div>
<button type="button" class="logBut">登 录</button>
</div>
</div>
<script>
// 去除浏览器控制台中的警告提示信息
域名uctionTip = false;
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el:\'#app\',
data:{},
});
</script>
</body>
</html>
-
效果图如下
-
现在需求1、中间的登录页样式，不要这种，想要换一种：假如是如下这种
点击查看代码
.login1 {
background: #ffffffd6;
border-radius: 2px;
}
- 则：切换之后是如下效果
- 可是，看了效果还是不行，又想要另外一种效果，此时：增加一种样式
点击查看代码
.login2 {
background: rgba(0,0,0,.8);
box-sizing : border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.5);
border-radius: 10px;
}
- 切换之后效果如下
-
因此：此时这个class的名字不确定到底是哪一个，需要动态去绑定，所以通过Vue来动态绑定一下（ 即：把class类名交给Vue托管 ）
-
class类名不确定，交由Vue托管很简单，而且知识点前面已经学过了，就是v-bind
点击查看代码
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<div class="top">©紫邪情 · 用Java改变未来</div>
<div class="basicLogin" :class = "unknown" @click = "changeLogin">
<div class="title">©紫邪情 · 登录</div>
<div class="line">
<img class="smallImg" src="img/icon-域名" />
<input placeholder="请输入账号" type="text" />
</div>
<div class="line">
<img class="smallImg" src="img/icon-域名" />
<input placeholder="请输入密码" type="password" />
</div>
<button type="button" class="logBut">登 录</button>
</div>
</div>
<script>
// 去除浏览器控制台中的警告提示信息
域名uctionTip = false;
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el:\'#app\',
data:{
unknown: \'login1\'
},
methods: {
changeLogin(){
if( 域名own === \'login1\'){
域名own = \'login2\'
}else{
域名own = \'login1\'
}
}
}
});
</script>
</body>
需求2、现在class类名的个数、名字都不确定
- 那么就继续改造
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2 - 数组写法</title>
<script src="../../../js/域名"></script>
<style>
body {
background-image: url(../img/域名);
text-align: center;
background-size: 100% 100%;
height: 100%;
overflow: hidden;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
.top {
background: #ffffff2e;
width: 100%;
position: absolute;
bottom: 0;
line-height: 60px;
left: 0px;
right: 0px;
color: #fff;
text-align: center;
font-size: 16px;
font-weight: 600;
}
.basicLogin {
position: absolute;
top: 16%;
left: 28.5%;
width: 40%;
padding: 70px 2%;
text-align: center;
}
.login1 {
background: #ffffffd6;
border-radius: 2px;
}
.login2 {
background: rgba(0,0,0,.8);
box-sizing : border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.5);
border-radius: 10px;
}
.title {
font-weight: 600;
font-size: 22px;
color: #0000FF;
margin-bottom: 40px;
}
.line {
border-bottom: 1px solid #ffff;
margin: 22px 1%;
width: 96%;
}
.line input {
border: none;
padding: 0px 1%;
margin: 1%;
background: #ffffff14;
width: 84%;
font-size: 16px;
line-height: 30px;
outline: none;
}
.line .smallImg {
width: 26px;
float: left;
vertical-align: middle;
margin-top: 1px;
}
.logBut {
background: #7bb5ee;
padding: 10px 80px;
border: none;
color: #fff;
margin-top: 40px;
font-size: 16px;
cursor:pointer;
}
</style>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<div class="top">©紫邪情 · 用Java改变未来</div>
<div class="basicLogin" :class = "unknown" @click = "changeLogin">
<div class="title">©紫邪情 · 登录</div>
<div class="line">
<img class="smallImg" src="../img/icon-域名" />
<input placeholder="请输入账号" type="text" />
</div>
<div class="line">
<img class="smallImg" src="../img/icon-域名" />
<input placeholder="请输入密码" type="password" />
</div>
<button type="button" class="logBut">登 录</button>
</div>
</div>
<script>
// 去除浏览器控制台中的警告提示信息
域名uctionTip = false;
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el:\'#app\',
data:{
unknown: [ \'login1\' , \'login2\' ]
},
methods: {
changeLogin(){
const arr = [ \'login1\' , \'login2\' ];
域名own = arr[ 域名r( 域名om() * 2 ) ]
}
}
});
</script>
</body>
</html>
需求3、要绑定的class名字确定，但是：个数不确定，也需要动态绑定
class样式绑定小结
- 1、字符串写法，适用于：class名字不确定时使用
- 2、数组写法，适用于：class名字、个数都不确定时使用
- 3、对象写法，适用于：class名字确定、但个数不确定（ 如：例子中的login1可能用，可能不用，而login2也是一样，所以这就是各种组合 ）
域名.2、style行内样式绑定 - 了解即可
class和style样式绑定小结
- 1、class样式绑定
- 写法 ：class = "xxxx"，其中xxxx可以使字符串、数组、对象
- 字符串写法适用于：类名不确定、要动态获取（ 交由Vue管理，随时调试 ）
- 数组写法：要绑定多个样式、class名字和个数都不确定
- 对象写法：要绑定多个样式、class名字确定而个数不确定（ 个数不确定是因为不知道某个样式用不用 ）
- 2、style样式绑定
- 写法 ：style = “xxx"，其中xxx可以是对象、数组
- 对象写法是推荐用的一种
- 3、原则
- 在Vue中静态不变的东西，就放在Vue模板中即可（ 即：那个div容器中 ），而动态改变的东西就放在Vue实例身上
域名、条件渲染
域名.1、v-if
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1 - v-if</title>
<script src="../../js/域名"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<!-- v-if和java中的if一样，只要结果为true就执行，为false就不执行
所以：这里面不用true，用 1 === 1 也行，
当然：使用v-bind绑定，写到data中，只要最后结果为boolean值即可
相应地：有了v-if，那当然也有v-else-if、v-else（ 不过这个有点特殊
这是什么条件都不满足的时候，最终执行的[ 类似于java的try....catch....finally
中的finally ]
-->
<div v-if = "true">
<img :src="result" alt="不见了影响你开法拉利不？" :style="obj">
</div>
</div>
<script>
// 去除浏览器控制台中的警告提示信息
域名uctionTip = false;
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el:\'#app\',
data:{
result: \'img/域名\',
obj: {
width: \'500px\',
hight: \'500px\'
}
},
});
</script>
</body>
</html>
- 注意：v-if、v-else-if、v-else组合用时，需要留意代码是紧挨着的即可，这就好比：java的Mybatis框架的pageHelper分页插件，用startPage和pageInfo联合使用一样（ 数据查询完了之后放到pageInfo<>()中，这二者中间就不可以夹杂另外的语句，否则报错 ）
域名.2、v-if配套工具template
- 在弄这个之前，回到前面的v-if代码
- 所以：使用v-if和template改造
域名.3、v-show
-
v-if会了，v-show就会了，用法和单纯的v-if一模一样
-
不过它和v-if的原理不一样
v-if和v-show小结
- 1、v-if
- 写法
- （1）、v-if = “表达式”
- （2）、v-else-if = “表达式”
- （3）、v-else = “表达式”
- 适用于：切换频率较低的场景，因为：v-if是直接把不展示的DOM元素给移除掉
- 特点：不展示的DOM直接移除
- 注意：v-if可以和v-else-if、v-else一起使用，但是：要求结构不可以被“打断”（ 代码紧挨着 ）
- 写法
- 2、v-show
- 写法：v-show = “表达式”
- 适用于：切换频率较高的场景
- 特点：不展示的DOM元素未被移除，仅仅是使用display:none样式给隐藏掉了而已
- 3、注意：使用v-if时，元素可能无法获取到，而使用v-show，则：一定可以获取到
- 因为：v-show是做了样式修改，但是DOM节点还在，所以是可以操作这个DOM节点的，但是：v-if是直接把DOM元素给移除掉了（ 万一是误操作而导致把v-if的值弄为false了，那后续万一其他地方用到了v-if移除的节点呢？不就裂开了吗 ）
域名、列表渲染
域名.1、认识v-for
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1 - 认识v-for</title>
<script src="../../js/域名"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<!-- 1、遍历数组 -->
<h2>人员信息</h2>
<!-- 简写形式 -->
<ul>
<li v-for = "p in persons" :key="域名">
{{域名}} ----- {{域名}}
</li>
<!--
v-for就和js中的for in差不多
:key="域名" 此处：是给每一个li节点一个唯一的id（ 和身份证号一样 就相当于是<li id = ‘xxx’> ），此时不写没事，但是最好都带上，后续有用
p 代表的就是：从persons中遍历出来的每一条数据
-->
</ul>
<!-- 完整写法 -->
<ul>
<li v-for = "(val,index) in persons" :key="域名">
{{域名}} ----- {{域名}} ------ {{index}}
</li>
</ul>
<!-- 2、遍历对象 -->
<h2>神奇之地</h2>
<ul>
<li v-for = "(val,index) in like" :key="index">
{{val}} ------ {{index}}
</li>
</ul>
<!-- 其实另外还有：v-for还可以遍历字符串、某个数字（ 循环这个数字这么多次 ），但是这两种基本上都不用，所以不 
-](/upload/image/20220528/4mdlilhfiku.png "【仿真】Carla介绍与基本使用[1](附代码基础版)-")
