接下来的一段时间，我会持续更新vue相关的知识，如有想学的，可以点点关注哦！
一、vue简介
概念：是一套用于构建用户界面的渐进式 框架。
构建用户界面：用vue往html页面中填充数据，非常的方便。
渐进式：vue不强求程序员一次性接受并使用它的全部功能和特性，由浅入深地学习和使用，学多少，就可 以在项目中用多少。
框架：框架指的是程序员必须遵守的规则和约束。
二、vue的基本使用
vue的基本使用:4个步骤
<span style="background-color:#f8f8f8"><span style="color:#333333"><body>
<!-- 4.创建被vue所控制的DOM区域 -->
<div id="app">
<p>姓名：{{username}}</p>
<p>年龄：{{age}}</p>
</div>
<!--1. 引入vue.js -->
<script src="./lib/vue.js"></script>
<script>
//2.创建一个vue的实例对象
const vm = new Vue({
// 3.使用el选项，指定被vue所控制的DOM区域
el: '#app',
//data 选项，用来定义数据，供页面渲染时使用
data: {
username: '肖战',
age: '18'
}
})
</script>
</body></span></span>三、vue的调试工具
1.vue-devtools的作用
安装vue-devtools调试工具帮助我们在浏览器中调试vue程序的。
2. 离线安装
先打开浏览器，然后按照以下步骤：
①点击三个小点
②更多工具
③扩展程序
④开发者模式按钮必须打开
⑤拖动安装包到扩展程序页面
⑥点击添加扩展程序按钮
1.1 配置vue-devtools
点击详情，勾选如下的两个选项：
1.2 使用vue-devtools调试页面，并设置vuex的配置
在浏览器中访问了一个使用了vue开发的页面，打开浏览器开发者工具，可以发现一个vue面板，即可使用vue-devtools调试当前的页面。
四、vue指令
1.内容渲染指令
① {{}} 插值表达式：将 vue 中定义的数据动态渲染到 DOM 元素内容的指定的位置。 只能渲染纯文本内容。
② v-html指令的作用：将包含了html标签的字符串，渲染成真正的html标签
③表达式的概念
在插值表达式语法中，除了支持绑定简单的数据值之外，还支持 JavaScript 表达式的运算。
什么是表达式：能够得到一个值的式子
2.属性绑定指令
如果需要为元素的属性动态绑定属性值，就可以使用 v-bind 属性绑定指令。
3.事件绑定指令
vue 提供了事件绑定指令，用来给 DOM 元素绑定事件。
注意：原生 DOM 对象有 click、input、keyup 等原生事件，替换为 vue 的事件绑定形式后，分别为：
v-on:click、v-on:input、v-on:keyup
①通过 v-on 绑定的事件处理函数，需要在 methods 中进行声明
②事件绑定的简写形式：
由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）
③事件处理函数中，只有一行代码时可以写到行内
④在使用 v-on 指令绑定事件时，可以使用 ( ) 进行传参。
事件修饰符
在原生事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 可以对事件的行为进行控制。
vue 中要想做这些事情是使用事件修饰符，常用的 2 个事件修饰符如下：
| 事件修饰符 | 说明 |
|---|---|
| .prevent | 阻止默认行为（例如：阻止a链接的跳转，阻止表单的提交） |
| .stop | 阻止事件冒泡 |
按键修饰符
在监听键盘事件时，我们经常需要判断详细的按键。在 vue 中，只需要为键盘事件添加按键修饰符。
注意：按键修饰符只能配合键盘事件一起使用。
4.数据双向绑定指令
vue 中提供了 v-model 指令来做数据的双向绑定，帮助我们快速处理表单的值。
数据双向绑定的特点：数据变化视图更新，视图变化数据更新。
注意：v-model 只能运用在表单元素上。
v-model 指令的修饰符
为了方便对表单输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：
| 修饰符 | 作用 | 示例 |
|---|---|---|
| .number | 自动将用户输入的值变成number类型 | <input type="text" v-model.number="n1"> |
| .trim | 自动过滤用户输入的首尾空白字符 | <input type="text" v-model.trim="str1"> |
| .lazy | 让v-model绑定的值，在“change”时更新，而非“input”时更新 | <input type="text" v-model.lazy="str2"> |
5.条件渲染指定
①条件渲染指令通过条件判断来控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：
v-if
v-show
②v-if 和 v-show 的区别
实现原理不同：
v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏；
性能消耗不同：
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：
如果需要非常频繁地切换，则使用 v-show 较好
如果在程序运行时条件很少改变，则使用 v-if 较好
v-if 的配套指令
v-else / v-else-if
v-if 可以单独使用，或者配合 v-else / v-else-if 指令一起使用。
注意：v-else / v-else-if 指令必须配合 v-if 指令一起使用，否则它将不会被识别！
v-for 中的索引
v-for 指令还支持一个可选的第二个参数，即当前项的索引。
v-for 中的 key
使用 key 维护列表的状态
官方推荐在使用 v-for 指令的时候，要添加一个 key 属性。
key 的作用：用来给循环的元素添加一个唯一的标识，来防止可能会出现的列表无法被正确渲染的问题。
key 的注意事项
① 使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表渲染紊乱）
② key 的值只能是字符串或数字类型
③ key 的值必须具有唯一性（建议把数据项 id 属性的值作为 key 的值）
6.列表渲染指令
vue 提供了 v-for 列表渲染指令，用来辅助我们循环渲染一个列表结构。
注意：想要循环渲染哪个元素，v-for 就加在哪个元素身上。
五、vue的特性
主要有两方面：
①数据驱动试图
②双向数据绑定
数据驱动试图
在使用了 vue 的页面中，data 数据的变化，会导致页面结构的重新渲染。示意图如下：
双向数据绑定
① data 数据的变化，会导致页面的重新渲染
② 表单数据的变化，会被自动更新到 data 数据中
MVVM介绍
MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。
MVVM 指的是 Model、View 和 ViewModel。
它把每个 HTML 页面都拆分成了这三个部分，如图所示：
MVVM 的工作原理
ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。
当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
