目录
一、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/[email protected]"></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>