概述：
VUE是一个MVVM的前端js库，渐进式（需要什么用什么）的JavaScript框架，他封装了一些内容（基础指令及相关组件）供我们使用，里面用到的思维主要是数据驱动视图的思维（MVVM的核心）。
![]()
view主要对应的是dom操作
viewmodel 主要里面内置对应的虚拟dom （通过编译将对应的实体dom抽取为虚拟dom对象 ----- 监听数据的改变 --- 影响对应的虚拟dom ---- 通过虚拟dom比对（diff算法） ---- 完成对应的实体dom渲染）
model主要是是数据存储对象
**通过数据来驱动视图的改变**
插值表达式 {{}}
-
里面填写的变量为data里面的变量
-
支持对应的js语法
-
支持运算符及表达式
-
支持对应的基础数据类型
vue的相关指令（语法和插值表达式一致）
vue的相关支持使用v-开头
v-html（innerHTML） 及 v-text （innerText）v-text相当直接写插值表达式
<!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>Document</title>
</head>
<body>
<div id="app">
v-if 及 v-show
根据对应的内容条件判断是否显示对应的标签
区别
v-if 判断当前的内容是否应该进行渲染 如果为true就渲染 为false就不渲染
v-show 不管怎么样都渲染 如果为false设置display为none
使用场景
切换较多使用v-show 切换只有一次使用v-if （v-if会重新渲染 v-show只渲染一次）
<!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>Document</title>
</head>
<body>
<div id="app">
属性绑定的相关 v-bind
v-bind的写法
v-bind:属性名="data中的变量"
v-bind的简写 :属性名
:属性名='属性值'
通过属性绑定改变样式的俩种方式
<!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>Document</title>
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div id="app">
事件绑定 使用v-on
基础写法
v-on:事件名.事件修饰符 = 'methods里面的处理函数'
事件修饰符
事件修饰符注意事项
事件修饰符可以链式调用
事件绑定的简写
@事件名.事件修饰符 = 'methods里面的处理函数'
<!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>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="handlerClick">点击触发</button>
-
对应的事件处理函数不能是箭头函数（this会指向window）
-
对应的事件触发的this指向当前的vue实例
-
当前的this要访问对应的属性 使用this.属性名来访问（el）
-
当前需要在vue实例中访问对应的data中的数据 使用this.属性名
v-for 循环渲染
简单使用
v-for="(item,key) in data数据" :key='key'
<!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>Document</title>
</head>
<body>
<div id="app">
v-for 为什么要绑定key
v-for和v-if一起使用 先执行什么？（v-for和v-if谁的优先级高）
v-pre（跳过编译）
v-cloak（等待编译结束才显示）
v-once （只编译一次）
<!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>Document</title>
</head>
<body>
<div id="app">
v-model
双向数据绑定（实现原理 Object.defineProperty + obServer）
v-model针对表单标签进行双向数据绑定 主要绑定的是value值
<!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>Document</title>
</head>
<body>
<div id="app">
