目录
一、Vue 指令学习 二、vue 解决闪动问题 v-cloak 三、数据绑定的指令 3.1 v-text （我就是 innerText） 3.2 v-html （会 innerHTML 吗） 3.3 v-pre 跳过预编译 3.4 v-once (一次编译，不在变换） 3.5 v-model 双向数据绑定 四、事件绑定 v-on使用 4.1 简单事件处理 4.2 使用函数处理事件 4.3 事件函数传参 4.4 事件修饰符 五、属性绑定 v-bind 指令 5.1 v-bind 使用 5.2 v-bind 就是 v-model ? 5.3 v-bind 绑定样式 六、分支与循环 v-if v-for 6.1 分支结构 6.1.1 使用 v-if 6.1.2 使用 v-show 6.2 循环结构 v-for 七、小案例 7.1 简易计算器 7.2 Tab 选项卡实现
记录 Vue 的复习使用，以加深理解为主，并非零基础入门
一、Vue 指令学习文档在手，随时查阅：官方文档——指令学习
- Vue 中的指令本质上是自定义属性
- Vue 中指令的格式：以 v-xxx （比如 v-if，v-for 什么的）
插值表达式的使用 及 vue 的初体验：
{{msg}}
会在页面上正常显示 Hello World
二、vue 解决闪动问题 v-cloak我们在使用插值表达式的时候，游览器第一次渲染的时候可能会出现一下 表达式的字符串，然后就被替换 data 中的数据内容，这种情况解决就如官方文档的方式皆可以解决了。
vue.js 第一天
{{msg}}
- 填充纯文本内容，相当于 js 中的 innerText
- 相比插值表达式更简单
vue 模板指令学习
{{msg}}
- 填充 HTML 片段，相当于 js 中的 innerHTML
- 但是存在安全性问题，只能使用本站的数据作为数据源，第三方数据可以
vue 模板指令学习
可以看到 html 的部分会被转义
- 填充原始信息
- 显示原始信息
- 跳过编译过程
{{msg}}
显示原始字符串
v-once 只编译一次：显示内容之后不在具有响应式功能
(当你显示的信息后续不会在修改了，你就可以用 v-once，提高性能)
{{msg}}
{{info}}
使用 v-model 进行双向绑定，那么数据的变化是相互的，使用时只需给它绑定一个值即可，而且数据的双向绑定常常用于表单。这里就要引出 vue 搭建项目的一个设计思想了，即 MVVM。
- M（model）
- V（view）
- VM（View-Model）
双向数据绑定是基于分而治之的思想来做的
- 视图 ——> 模型 事件监听
- 模型 ——> 视图 数据绑定
msg:{{msg}}
数据是相互变化的
使用 v-on 我们可以绑定很多的事件，比如：click, blur 等等，都是我们学 js 时常见的事件。我们下面就定义了一个简单的 click 事件，每当点击一下，数字就进行加一处理
num: {{num}}
和 js 基本一样，我们指定一个函数专门处理某个特定事件，然而这个事件也要专门定义在 vue 中的 methods 中，效果同上
num: {{num}}
事件函数传参
- 如果事件直接绑定函数名称，默认传递事件对象（$event）作为第一个参数
- 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称是必须是 $event
num: {{num}}
事件函数传参
简要了解一下 事件冒泡 与 阻止冒泡就懂了
事件修饰符
跳转
跳转
v-bind 的作用
动态处理属性的值,下面的实例中，我们给 href 绑定了一个 url 值，这样他就可以跳转到指定的路径了。
我们深入 v-model 的源码可以发现， v-model 之所以能够实现双向绑定是因为它的底层使用 属性绑定实现的。
v-model 底层原理: 使用输入域中最新的数据覆盖原来的数据
样式绑定由两种形式
- 使用对象的形式
- 使用数组的形式
测试样式
测试样式二
- v-if
- v-else
- v-else-if
只会渲染一个 div
v-if 控制元素是否渲染到页面
在判断结构中加入表达式即可完成数据的筛选
优秀
良好
一般
太差了
结果肯定是打印最差的
. v-show
控制元素是否显（已经渲染到页面上了）
会在 dom 中显示出来，display 的值被设置为了 none
使用场景：
频繁显示隐藏一个元素使用 v-show（因为频繁的操作 DOM 会造成极大的消耗
测试 flag
我们可以看到 dom 时存在的。
使用 v-for 可以轻松遍历元素，下面看一看 v-for 的简单使用，我们可以遍历值的同时，把下表也能遍历出来
数字列表
- {{item}} -- {{index}}
-
>{{item.id}}
>{{item.title}}
{{value + '---' + key + '---' + index}}
实现逻辑如下：
- 使用 v-model 指令实现数值 a 和数值 b 的绑定
- 给计算按钮绑定事件，实现计算逻辑
- 将计算结果响应到对应位置
>数值A:
>数值B:
加法计算结果:v-text="resultA">
减法计算结果:v-text="resultB">
乘法计算结果:v-text="resultC">
除法计算结果:v-text="resultD">
核心是，找到对应的下标板块，显示指定的模块
- {{item.title}}
>{{item.des}}
