一.vue框架的两大核心
（1） 数据驱动
（2）组件化
1.1、mv*模式
库vs框架
把一小部分通用的业务逻辑进行封装（函数），多个封装形成一个模块或者文件，多个模块或者文件就发展成库或者框架。
库 函数库，不会改变变成的思想，如：jQuery。
框架 框架改变了编程思想，代码的整体结构，如：vue，react，小程序等等。
1.2、MVC架构模式
-
MVC的出现使用在后端（全栈时代） -
M：model，模型，主要完成业务功能，在数据库相关的项目中，数据库的正删改查属于模型。 -
V：view，视图，主要负责数据的显示（HTML+CSS）； -
C：conteoller，控制器，主要负责每个业务的核心流程，在项目中体现在路由以及中间件上（noodeJS）； -
优点：耦合度低，复用性高，生命周期成本低，部署快，可维护性高，有利软件工程化管理。 -
缺点：由于模型和视图要严格分离，这样也给调试应用程序带来了一定的困难。
1.3、MVP架构模式
-
MVP是单词model view presenter的首字母缩写，分别表示数据层、视图层、发布层，他是MVC架构的一种演变。 -
M：model，模型，主要完成业务功能，在数据库项目中，数据库的增删改查属于模型。 -
V：view，视图，主要负责数据的显示。 -
P：presenter，负责业务流程的逻辑处理，presenter是从model中获取数据并提供给view的层，presenter还负责处理后端业务。
MVP模式与MVC模式的区别
?在MVP中view并不直接使用model，而在MVC中view可以绕过controller从直接model中读取数据。
1.4、MVVM架构模式
MVVM是model-view-viewmodel的缩写，MVVM模式把presenter改名为viewmodel，基本与MVP模式相似。
唯一区别：MVVM采用数据双向绑定的方式 （vue是MVVM）
总结：
? 架构只是一种思维方式，不管是MVC，MVP，MVVM，都只是一种思考问题解决问题的思维，其目的是要解决编程过程中，模块内部高内聚，模块与模块之间低耦合，可维护性，已测试等问题。
二.vue框架初识
ue官网](https://cn.vuejs.org/)
1.1、vue的介绍
- 构建数据驱动的web应用开发框架；
- vue是一套用于构建用户界面的渐进式框架；
- vue被设计为可以自底向上逐层应用；
- vue的核心库只关注视图层；
- vue框架的核心：数据驱动和组件化；
- 便于与第三方库或既有项目整合，另一方面，当与单文件组件和vue生态系统支持的库结合使用时，vue也完全能够为复杂的单页面程序提供驱动。
- vue不支持IE8及以下版本
1.2、vue框架理解：
-
首先，一个页面包括：结构（HTML模板），表现（css），行为（js） -
其次，原生js的做法：写好HTML模板和css样式，用js产生数据（逻辑），通过dom的方式控制数据显示在HTML中的那个位置，包括如何显示（DOM的方式改变样式） -
vue框架：vue中，写好HTML模板，声明式的告知vuejs库，数据显示在何处，在vue对象中处理数据，不用做DOM操作。
- 简单理解：new出来一个vue实例，传一堆配置参数，控制一片html。
- 记住一点：有了vue，不用程序员操作DOM了。
1.3数据驱动和声明式渲染
(1)数据驱动
?数据驱动，就是通过控制数据的变化来改变（驱动）DOM。背后使用了观察者模式，靠数据的变化来控制页面的变化。这是vue框架的核心，（养成数据驱动的思路和编程习惯）；
(2)声明式渲染
声明的意思就是告知，广而告知，即告知程序（vue框架），在何处渲染什么数据；
三.vue语法（view层）
1.1data选项
功能：
?data选项中存储的是页面中需要显示的数据，是初始化数据的位置，是元数据，是vue的一个实例属性，可以接受的数据类型：number/striing/array/json/undefined/null/function
1.2数据绑定
把data中的数据，显示在html中的某处
1.3插值表达式
?功能：可以让html标签里的内容变成动态的（从data中获取），使用mustache语法
?格式：{{变量|属性名|表达式|函数调用等等}}
<div id="app">
<span>Message:{{msg}}</span>
</div>
new Vue({
el:"#app",
data:{
msg:"hello"
}
});
这种写法叫做：声明式渲染；
1.4内容指令
指令名：v-text 和 v-html
指令是什么？ 指令就是html标签的自定义属性
1、v-text="数据名"
功能：可以让html标签里的内容变成动态的（从data中获取），相当于innerText。
<p v-text="str">内容：</p>
对比v-text和插值{{}}表达式：
? 1）、当网络速度慢时，插值表达式会在页面上出现 {{}} 的显示，但是指令v-text不会，因为，v-text是自定义属性，最多不做解读。当，标签中的内容全部来自于属性，那么，可以使用v-text。
? 2）、插值表达式更加灵活，可以在标签里面的某个地方显示，但是v-text会让整个标签的内容全部变化。
2、v-html="数据" 非转义输出
? 功能：可以让html标签里的内容变成动态的（从data中获取），但是不会对内容中的html标签进行转义。相当于innerHTML。
<p v-html="str">内容：</p>
双花括号和 v-text（相当于innerText）会将数据解释为普通文本。
v-html相当于innerHTML
1.5属性指令
? 指令名：v-bind
?功能：可以让html标签里的**属性（名和值）**变成动态的（从data中获取）
1、 属性值动态绑定：v-bind:html属性="数据" 简写 :html属性=“数据”`
2、 属性名动态绑定： v-bind:[属性名]="数据"
<div v-bind:id="dynamicId"></div>
javascript表达式
在dom里面插入数据，除了可以写原始的数据，还可以使用javascript表达式，
格式：{{数据+表达式}} 、 v-指令="数据+表达式"
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ 'i love you'.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
注意：
不能使用语句 ，条件语句可以使用三元**表达式**代替
1.6条件渲染(指令)
指令名: v-if 和 v-show
功能：一段dom可以根据条件进行渲染
| v-show=“布尔” | v-if=“布尔” |
|---|
| （原理上）区别 | 操作css的display属性 | 操作dom（添加和删除dom完成的） | | 使用场景 | 适合频繁切换 | 适合不频繁切换 | | 性能消耗 | 初始渲染消耗（就算元素不显示，也得创建元素） | 频繁切换消耗 |
面试题：v-if 和 v-show有什么区别？
–
相同点：v-if 和 v-show都是控制dom元素的显示和隐藏。
不同点： ? 1、原理：v-show是通过控制元素的样式属性display的值，来完成和显示隐藏； ? v-if是通过对dom元素的添加和删除，完成显示和隐藏。
? 2、使用场景：有原理得出使用场景的区别 ? v-show：使用dom元素频繁切换场景。
? v-if：当dom元素的切换不频繁，可以使用。特别是，首次元素处于隐藏的情况下。
另外，v-if指令还可以结合v-else-if ， v-else一起使用。
<p v-if="age<10"> 宝宝 </p>
<p v-else-if="age<18">大宝宝</p>
<p v-else>非宝宝</p>
列表渲染(循环指令)
指令名: v-for；
功能：把数据进行循环显示在html里（渲染）。推荐操作的数据类型：数组、对象、字符串、数字。
用in或者用of都可以：
<li v-for="值 in 数据">{{值}}</li>
<li v-for="值 of 数据">{{值}}</li>
<li v-for="(值,索引) in 数组">{{值}}/{{索引}}</li>
<li v-for="(对象,索引) in 数组">{{对象.key}}/{{索引}}</li>
<li v-for="(值,键) in 对象">
<li v-for="(数,索引) in 数字">
<li v-for="(单字符,索引) in 字符">
注意：空数组，null，undefined不循环
也可以进行循环嵌套
v-for和v-if使用在同一个标签里时，v-for 的优先级比 v-if 更高，即：v-for套着v-if，先循环再判断
列表渲染时的key:
?在标签里使用属性key，可以唯一标识一个元素。
1、当 Vue.js 用 v-for 更新已渲染过的元素列表时，它默认用“就地复用”策略。即：尽量不进行dom元素的操作，只替换文本。
2、如果你希望进行dom操作，就用key，因为key的目的是为了唯一标识一个元素。
有了key后，可以跟踪每个节点的身份，从而重用和重新排序现有元素
? 建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为（就地复用）以获取性能上的提升。
注意：
key不要使用（数组）下标，并不是会报错，而是失去了唯一标识的意义。
事件绑定(指令)
指令名：v-on
?v-on 指令可以简写为：@
功能：绑定事件，vue通过v-on指令把事件和=处理函数进行绑定
?事件处理函数需要放在methods选项当中去，事件名不带on，函数可以按照ES5的写法，也可以按照ES6的写法。
<input type="button" v-on:事件名="方法">
<input type="button" v-on:事件名="方法(参数)">
<input type="button" v-on:事件名="方法($event,参数)">
new Vue({
el:,
data:{},
methods:{
方法一：function(ev,参数){
业务
这里面的this是vue对象本身
}
方法2(ev,参数){
业务
}
}
})
获取事件对象
1、不传参，默认第一个参数，就是时间对象
button type="button" @click="fn02()">修改数据</button>
………………
fn02(ev){
console.log('事件对象',ev);
},
2、传参，时间对象需要手动传入（使用vue框架官方提供的$event）
<button type="button" @click="fn03('qq',$event)">修改数据</button>
………………
fn03(str,ev){
console.log('事件对象',ev);
console.log('参数',str);
},
事件处理函数的this
1、methods选项里的函数里的this都是vue对象本身，所以，事件处理函数里的this也是vue对象本身。
2、vue提供的选项的值如果是函数时，不可用箭头函数，会造成this丢失
事件修饰符
<div @click.修饰符="函数"></div>
.stop 阻止单击事件继续传播（阻止事件流）
.prevent 阻止默认行为
.capture 使用事件捕获模式
.self 点到自己时才触发，不是从其它地方（事件流的流）流过来的
.once 只会触发一次
.passive onScroll事件 结束时触发一次，不会频繁触发，移动端使用
注意：
? 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.stop.self 会阻止所有的点击，而 `v-on:click.self.stop 阻止自身的点击，stop就不起作用了
<div class="greenbox" @click="fnGreen">
<!-- <div class="redbox" @click.self.stop="fnRed"> -->
<div class="redbox" @click.stop.self="fnRed">
<div class="bluebox" @click="fnBlue"></div>
</div>
</div>
按键修饰符
<!--普通键-->
<div @keyup.修饰符="函数"></div>
.left 左
.enter 回车
.13 可以使用建码
<!--系统(组合)键-->
<div @keyup.修饰符="函数"></div>
.ctrl
.alt
.shift
.exact 精准控制，@键盘事件，修饰符1，修饰符2.exact
只有1+2才可触发 1+2+3不可以
<!--鼠标-->
<div @mousedown.修饰符="函数"></div>
.left
.right
.middle 鼠标中键
双向绑定（指令）_表单控件元素
指令名：v-model
功能：视图控制数据，数据也可控制视图,这就是双向绑定，可通过属性+事件来实现双向绑定。而vue中直接提供了一个指令v-model直接完成（v-model 本质上不过是语法糖）。v-model指令只能使用在表单元素上。
不使用v-model完成双向绑定
<input type="text" :value="data数据" v-on:input="changeIptValue">
使用v-model完成双向绑定
<input type="text" v-model="data数据">
表单修饰符
input v-model.修饰符="数据" />
.number 把标签的值转成数字赋给vue的数据
.trim 删除前后空格
.lazy 确认时才修改model数据
指令总结
?指令（Directives）是带有v- 前缀的特殊属性。其实就是html标签的里的自定义属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM，以下是官方的指令，程序员也可以自定义指令。
-
v-text：更新元素的textContent。如果要更新部分的textContent，需要使用{{Mustache}}插值。 -
v-html：更新元素的 innerHTML -
v-bind：动态地绑定一个或多个属性（特性），或一个组件 prop 到表达式。 -
v-show：根据表达式值的真假，切换元素的 display （CSS 属性）。 -
v-if：根据表达式的值的真假条件渲染元素（与编程语言中的if是同样的意思） -
v-else：表示否则（与编程语言中的else是同样的意思） -
v-else-if：（与编程语言中的else if是同样的意思） -
v-for：可以循环数组，对象，字符串，数字， -
v-on：绑定事件监听器。事件类型由参数指定。 -
v-model：在表单控件或者组件上创建双向绑定 -
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。 -
v-cloak：防闪烁，模板没编译完，电脑配置差，有可能会看到{{}}，体验不佳，不如用css先隐藏，之后再显示，包括被包裹的子元素。这个指令保持在元素上直到关联实例结束编译。和 CSS 规则，如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 -
v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
指令缩写：
v-bind 缩写 是冒号
v-on 缩写是 @
|