Vue笔记 one（常用指令、双向绑定）
VUE ONE STUDY
概述
1. Vue是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2. 框架和库有什么区别？
框架：是一套完整的解决方案，对项目“入侵性”大，如果需要更换框架，则需重构整个项目！
库：提供某一个小功能，对项目“入侵性”小，如果某些库无法完成某些要求，可以很容易的切换到其他库实例中使用。
3. 为什么要学习框架？
提高开发效率，在企业中，时间 = 金钱。
4. Vue有什么优势？
Vue 核心概念之一：
通过数据来驱动界面更新，无需 DOM 操作来更新界面
Vue 核心概念之二：
组件化开发，我们可以将网页拆分成一个一个来编写。
将来再通过封装好的组件拼接成一个完成的网页。
↓
01 - Vue基本模板 创建一个 HTML 文件
<div id="app">{{ name }}
div>
引入 Vue.js
<script src='js/vue.js'></script>
创建 Vue 的实例
let vue = new Vue({el: "#app",data: {name: "xiaomi Container"}
})
说明
02 - 数据单向绑定
MVVM 设计模式
在 MVVM 设计模式中由 3 个部分组成
M：model 数据模型（保存数据，处理业务逻辑代码）
V：view 视图（展示数据，与用户交互）
VM：View Model 数据模型和视图的桥梁（M是中国人，V是美国人，VM就是翻译）
Vue 中的单向传递
Model => View Model => view
Model：实例对象中中的data
view：被控制区域
View Model：Vue实例对象
<div id="app"><p>{{ name }}<p>
div>
let vue = new Vue({el: "#app",data: {name: "By xiaomi", }
})
说明
03 - Vue数据双向绑定
在 vue 中想要实现双向绑定可以使用 v-model 指令。
<div id="app"><input type="text" v-model="name"><input type="text" v-model="name">
div>
let vue = new Vue({el: "#app",data: {name: "By xiaomi",}
})
说明
04 - 常用指令v-once
在我们的 Vue 中，一旦数据发生了改变，则页面会重新渲染，如果我们需要数据发生了改变，而且页面值渲染一次，哪就得用到我们 Vue 中指令 v-once来实现了。
<div id="app"><p v-once>原始数据 {{ name }}p><p v-once>当前数据 {{ name }}p>
div>
let vue = new Vue({el: "#app",data: {name: "By xiaomi",}
})
说明
05 - 常用指令v-cloak
首先了解这个 v-cloak 指令之前我们先了解一下，Vue数据绑定过程
第一步：先将未绑定的数据的界面展示给用户
第二步：然后再根据模型中的数据和控制区域生成绑定数据之后的 HTML 代码。
第三步：最后再将绑定数据之后的 HTML 渲染到页面上。
所以会导致一个问题，在还没有 生成绑定数据的 HTML 代码的时候，已经显示了 未绑定数据的 HTML 代码这样会用户体验效果不好，所以就出现了 v-cloak 指令来解决这个问题。
<div id="app"><p v-cloak>{{ name }}p>
div>
let vue = new Vue({el: "#app",data: {name: "By xiaomi",}
})
注意点: 这里不仅仅只要添加 x-cloak 这个指令，还得配合 CSS 来进行隐藏。
[v-cloak] {display: none;
}
设置之后，我们就不会出现数据还没进行绑定渲染就开始显示未绑定数据了。
06 - 常用指令v-text 和 v-html
在我们的 Vue 中有进行插值的方式有 3 种
{{ key }}
插值的方式是不会解析 HTML 代码的！
<div id="app"><p v-cloak>{{ name }}p>
div>
let vue = new Vue({el: "#app",data: {name: "By xiaomi"}
})
v-text="key"
<div id="app"><p v-cloak="name">+++++p>
div>
v-text 方式也不会解析 HTML 代码
注意：
v-text会覆盖原有的数据！
let vue = new Vue({el: "#app",data: {name: "By xiaomi"}
})
v-html="key"
<div id="app"><p v-html="name">++++++p>
div>
v-html 方式会解析 HTML 代码！！
注意：
v-html 也会覆盖原有的数据！
let vue = new Vue({el: "#app",data: {name: "By xiaomi"}
})
说明
07 - 常用指令v-if v-else-if v-else
什么是 v-if 指令？
条件渲染：如果 v-if 取值是true就渲染元素，如果不是则不渲染元素
注意点: 如果条件不满足根本就不会创建这个元素（重点）
v-if 可以从模型中获取数据
v-if 也可以直接编一个表达式
v-else 不能单独出现
v-if 和 v-else 中间不能出现别的内容
<div id='app'><p v-if="true">我是段落p><p v-if="false">我是段落p>
div>
注意：
我是段落
这一段是根本不会创建的！
let vue = new Vue({el: '#app',data: {name: 'By xiaomi',}
});
v-if 运用条件表达式
<div id='app'><p v-if="age >= 18">我是段落p>
div>
如果 age 改为 17 则
= 18">我是段落
这个元素将不会创建
let vue = new Vue({el: &
