目录
一、Vue总体介绍
Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅容易上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。用来做单页面应用,页面跳转用的vue插件路由来实现跳转。
vue官网:https://cn.vuejs.org/
vue官网已经更新到了vue3,但是我们还是先从vue2开始。
我们使用vue之前需要先引入vue框架,直接去官网中复制script标签:
学习->教程->安装:
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>
<!-- 引入vue框架 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<!-- 模板 根组件只有一个模板-->
<div id="app">
<!-- 文本插值 -->
{{msg}}
<br>----------------------------
<my-info></my-info>
<my-info></my-info>
<my-info></my-info>
{{qq}}
<!-- 事件绑定 使用v-on:事件类型='函数名' -->
<!-- @事件类型 绑定事件 -->
<!-- <button v-on:click="handler">获取qq</button> -->
<button @click="qq='111222333'">获取qq</button>
{{time}}
</div>
<script>
// 自己定义组件实例
let Info={
template:`
<div>{{msg}}</div>
`,
// data:{
// msg:"hello world"
// }
data(){
return {
msg:"hello world"
}
}
};
// 创建vue实例 Vue构造函数方式
let vm=new Vue({
// 局部注册组件实例
components:{
'my-info':Info
},
// 将模板与实例进行绑定
el:"#app",
// 数据模型 存放vue变量
data:{
msg:'hello Vue2',
qq:'获取qq',
time:new Date()
},
// 声明函数
methods:{
handler(){
this.qq='111222333'
}
}
});
setInterval(()=>{
vm.time=new Date()
},1000);
</script>
</body>
</html>
二、MVVM模型
MVVM模型:
- M:模型 Model,对应data中的数据
- V:视图 View,对应vue中的模板
- VM:视图模型 ViewModel,对应Vue实例对象
可以将上图中的DOM Listeners(dom监听器)
和 Data Bindings(数据绑定)
看作两个工具,它们是实现双向数据绑定的关键:
- 从View侧看,ViewModel中的
DOM Listeners
工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据; - 从Model侧看,当我们更新Model中的数据时,
Data Bindings
工具会帮我们更新页面中的DOM元素。
简单来说: ViewModel 是连接视图和数据模型的纽带,数据模型发生了变化时,vm通知视图修改;视图发生了变化时,vm通知数据模型进行相对应的修改。
vue借鉴了MVVM模型:
三、模板语法
vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有 Vue的模板都是合法的 HTML,所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
1、插值语法 {{}}
当一个 Vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
- 渲染最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
- 在双大括号里面可以写任何js表达式
- 使用v-once指令,执行一次性的插值,当数据发生改变,插值处的内容不会更新
<body>
<div id="app">
<!-- 1.文本插值 mustache语法 {{}} -->
{{msg}}
<!-- 2.{{使用js表达式}} -->
{{count * 100}}
{{Number(msg)}}
{{Boolean(msg)}}
<!-- 3. v-once 使用v-once指令,执行一次性的插值,当数据发生改变,插值处的内容不会更新 -->
<div v-once>{{msg}}</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue',
count: 10
}
});
//设置两秒后修改msg的值,使用v-once后插值处内容不会改变
setTimeout(()=>{
vm.msg='我被修改了'
},2000)
</script>
</body>
2、v-html 指令
如果我们向后台请求的数据是一段HTML代码,如果我们直接通过{{}}来输出,会将HTML代码也一起输出。双大括号会将数据解析为普通文本,而非 HTML 代码。但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容。如果我们希望解析出HTML展示可以使用v-html指令:该指令后面往往会跟上一个string类型,会将string的html解析出来并且进行渲染。
<body>
<div id="app">
<!-- 使用插值语法无法解析html代码片段 -->
{{p}}
<!-- 使用v-html指令可以解析代码片段 -->
<div v-html="p"></div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
p:'<a href="https://www.baidu.com">百度一下</a>'
}
});
</script>
</body>
结果如下:
3、v-bind 指令
双大括号语法不能作用在元素属性上,遇到这种情况应该使用v-bind指令 。
v-bind指令可以简写成一个冒号:
<body>
<div id="app">
<!-- 绑定变量 v-bind 或者 简写成: -->
<div v-bind:title="title">hello vue</div>
<div :title="title">hello world</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
title: "我是一个标题"
}
});
</script>
</body>
4、v-on 指令
可以使用v-on给当前元素绑定事件,也可以使用简写形式@
<body>
<div id="app">
{{msg}}
<!-- 绑定事件 v-on:事件名称="函数名(或者直接写js代码)"-->
<button v-on:click="update">点击我</button>
<!-- 简写 @ -->
<button @click="msg='我又被修改了'">点击我</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: "hello vue"
},
methods:{
update(){
this.msg = '我被修改了'
}
}
});
</script>
</body>
5、条件渲染
v-if(可以单独使用),表达式为true的时候渲染使用v-if属性的元素,否则使用v-else渲染;
v-show(切换css样式中display属性),频繁切换css样式,使用v-show。
不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
v-if 和 v-show的区别:
v-if 是惰性的dom开销,只有满足条件的情况下才会去加载dom节点,不满足条件直接不渲染dom元素。使用场景:较少的dom开销时使用。
v-show 满足条件的时候显示元素,不满足条件的时候调用display:none隐藏元素,但是不管是否满足条件都加载dom元素。使用场景:需要频繁的切换css样式时使用。
<body>
<div id="app">
<!-- 条件渲染 v-if v-else-if v-else v-show-->
<div v-if="type==='email'">
<form>
<input type="text" placeholder="请输入邮箱">
</form>
</div>
<div v-else-if="type==='telephone'">
<form>
<input type="text" placeholder="请输入电话">
</form>
</div>
<div v-else>错误</div>
<div v-show="isShow">我是一个div</div>
</div>
<script>
new Vue({
el: "#app",
data: {
type: "telephone",
isShow: false
}
})
</script>
</body>
6、列表渲染 v-for
v-for 用于将列表数据进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。
key属性
在使用v-for时,我们需要给对应的元素或组件添加上一个:key属性。
为什么需要这个key属性呢?
这个其实和Vue的虚拟DOM的Diff算法有关系。
当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新的节点
-
我们希望可以在B和C之间加一个F,Diff算 法默认执行起来是这样的。
-
即把C更新成F,D更新成C,E更新成D,最 后再插入E,是不是很没有效率?
所以我们需要使用key来给每个节点做一个唯一标识
-
Diff算法就可以正确的识别此节点
-
找到正确的位置区插入新的节点。
所以一句话,key的作用主要是为了高效的更新虚拟DOM。
<body>
<div id="app">
<!-- 列表渲染数组 -->
<ul>
<li v-for="(item,index) in animal" :key="item">{{item}}--{{index}}</li>
</ul>
<!--列表渲染对象 -->
<ul>
<li v-for="(key,value,index) in obj" :key="index">{{key}}--{{value}}--{{index}}</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
animal: ['老虎', '猴子', '狮子'],
obj: {
name: 'zhangsan',
age: 18
}
}
})
</script>
</body>
7、style绑定 和 class绑定
操作元素的class列表和内联样式是数据绑定的一个常见需求,因为它们都是attribute,所以我们可以用v-bind处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将v-bind用于class和style时,Vue做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
<style>
.red{
color:red;
}
.color{
font-size: 18px;
background-color: pink;
}
</style>
<body>
<div id="app">
<!-- 动态绑定style -->
<div :style="{color:currentColor}">我是一个div</div>
<div :style="styleObj1">我是第二个div</div>
<div :style="[styleObj1,styleObj2]"> 我是第三个div</div>
<!-- 动态绑定类名 -->
<div :class="{red:true}">我是第四个div</div>
<div :class="{red:false,color:true}">我是第五个div</div>
<div :class="[{red:true},{color:false}]">我是第六个div</div>
</div>
<script>
new Vue({
el:"#app",
data:{
currentColor:'red',
styleObj1:{
fontSize:'18px',
backgroundColor:'blue'
},
styleObj2:{
backgroundColor:'red'
}
}
})
</script>
</body>