1.Vue简介
1.1作者:尤雨溪
1.2官网:https://cn.vuejs.org/index.html
1.3介绍:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
1.4 Vue是MVVM框架
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。
如图
看到了这里是不是一脸懵逼,没事,接着来看具体的操作,后面再慢慢理解。
2.Vue的基本使用
在Vue的起步中,区分开发环境和生产环境,两者的不同,开发环境可以清晰的看清源码,生产环境就是将源码进行压缩,占比大小更小,我们学习过程中使用生产环境
2.1把Vue.js保存到本地
-
把Vue.js的官网地址复制到浏览器打开
-
ctrl + A 全选代码
-
创建一个vue.js的文件,把赋值的js代码粘贴进去即可
-
检验vue.js是否成功复制到本地
<!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>
</head>
<body>
<div>11111</div>
<script src="js/vue.js"></script>
<!-- 测试 -->
<script>
alert(Vue);
</script>
</body>
</html>
如果显示,则成功了!
注意:在vscode里面写的代码,需要ctrl+s保存之后才会生效哦!!!
2.2关于Vue的数据驱动视图
<!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="app">
当前数字为:{{a}} <br>
<button @click="add">点我加1</button>
<button @click="minus">点我减1</button>
</div>
<script>
new Vue({
el: "#app", // 挂载点
data: { // 数据
a: 10
},
methods: { // 方法
add(){
this.a++
},
minus(){
this.a--
}
}
});
</script>
</body>
</html>
效果:
可以发现我们并没有对视图进行更新,但是Vue自动帮我更新了视图数据,是不是很神奇,哈哈哈!
2.3 Vue的插值语法
插值语法是通过一对{{}}进行书写,内部是对data数据管理中心的属性进行渲染,也可以是表达式moustache(胡子)是双大括号学名,也叫(胡子语法)
在2.2那个例子里面已经使用过了插值语法
当然 插值语法内部也可以是表达式 例如
{{ a >= 100 ? 20 : 10}}
但是注意不至于复杂的运算,比如含有if的语句
补充:所有的对象中的清单内容,都是Vue规定,内置的,不可以自由发挥
例如 el就是挂载点,data就是数据,methods就是方法 名字不可以被改变
2.4 指令
2.4.1 v-if
v-if 的作用是通过一个布尔表达式进行对dom的上树和下树的渲染
基本使用 如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="false">我是第一行dom元素</p>
<p v-if="true">我是第二行dom元素</p>
</div>
<script>
new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
</html>
效果如下: 发现第一行元素没有了
但是我们在实际的开发中 ,不是直接用布尔值来放在v-if里面使用的,而是通过data带有布尔值的进行渲染
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="!boo">我是第一行dom元素</p>
<p v-if="boo">我是第二行dom元素</p>
</div>
<script>
new Vue({
el: "#app",
data: {
boo : false
},
methods: {
}
})
</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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 如果a的值大于了5 则显示 -->
{{a}}
<p v-if="a > 5">我是第一行dom元素</p>
<br>
<button @click="add">点击我加1</button>
</div>
<script>
new Vue({
el: "#app",
data: {
a :1
},
methods: {
add(){
this.a++
}
}
})
</script>
</body>
</html>
当然 有v-if,那必然有v-else和v-else-if
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 如果a的值大于了5 则显示 -->
{{a}}
<p v-if="a < 5">我小于5</p>
<p v-else-if="a >= 5 && a <= 10">我大于5,但是小于等于10</p>
<p v-else="a > 10">我大于10</p>
<br>
<button @click="add">点击我加1</button>
</div>
<script>
new Vue({
el: "#app",
data: {
a :1
},
methods: {
add(){
this.a++
}
}
})
</script>
</body>
</html>
需要注意的是v-else的使用前提是必须先有v-if并且中间不允许有任何的元素间隔 下面这样是不行的
~~<p v-if='boo >= 0 && boo <= 5'>我是5</p>
<div></div>
<p v-else="boo > 20">我是大于20</p>~~
2.4.2 v-show
v-show和v-if的显示情况类似,但是原理不一样,v-show是通过控制元素的display属性,对元素的显示和隐藏进行逻辑判断,并没有实现元素的下树
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 如果a的值大于了5 则显示 -->
{{a}}
<p v-show="a > 5">我大于5</p>
<br>
<button @click="add">点击我加1</button>
</div>
<script>
new Vue({
el: "#app",
data: {
a :1
},
methods: {
add(){
this.a++
}
}
})
</script>
</body>
</html>
使用场景:v-show和v-if的使用场景区分是如果页面切换的特别频繁使用v-show,如果页面的涉及范围特别大并且不是特别频繁的切换使用v-if,因为主要区分是涉及到页面的加载性能
2.4.3 v-for
v-for是vue 的循环指令,作用是遍历数组(对象)的每一个值
- 遍历数组
<!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="app">
<ul>
<li v-for="(item,index) in arr">{{index}}-{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#app", // 挂载点
data: { // 数据
arr: [1,2,3,4,5,6,7]
},
});
</script>
</body>
</html>
此时的item代表的是数组的元素,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="app">
<ul>
<li v-for="(item,index) in obj">{{index}}-{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#app", // 挂载点
data: { // 数据
obj:{
name: "小王",
age: 18,
height: 65,
high: 170
}
},
});
</script>
</body>
</html>
此时我们发现一个有趣的现象,为什么这个 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="app">
<ul>
<li v-for="(item,key,index) in obj">{{index}}-{{key}}-{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#app", // 挂载点
data: { // 数据
obj:{
name: "小王",
age: 18,
height: 65,
high: 170
}
},
});
</script>
</body>
</html>
此时发现有下标值了,于是我们得出结论,当我们遍历对象的时候,需要注意,第一个值为属性值,第二值为属性名,第三个才是下标值
- 遍历json
<!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>
<style>
table,tr,td{
border: 1px solid #222;
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="app">
<table>
<tr v-for="item in arr">
<td v-for="value in item">{{value}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: "#app", // 挂载点
data: { // 数据
arr: [
{name:"小王",age:18,height:65},
{name:"小刘",age:19,height:63},
{name:"小红",age:17,height:42},
{name:"小刚",age:21,height:70}
]
},
});
</script>
</body>
</html>
两个for循环搞定,第一for遍历出行,第二个for遍历出行中的列,我们实际开发中遍历json数据的居多
- 补充
<li v-for="(item,key,index) in obj" :key="index">{{index}}-{{key}}:{{item}}</li>
key是用来给每一项值加元素标识,作用是为了区分元素,为了实现最小量的更新
利用v-for打印九九乘法表
<!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>
<style>
table,tr,td{
border: 1px solid #222;
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="app">
<table>
<tr v-for="i in arr">
<td v-for="j in i">{{i}}*{{j}}={{i*j}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: "#app", // 挂载点
data: { // 数据
arr: [1,2,3,4,5,6,7,8,9]
},
});
</script>
</body>
</html>