声明式和命令式 {#声明式和命令式}

原生开发和 Vue 开发的模式和特点，我们会发现是完全不同的，这里其实涉及到两种不同的编程范式:
命令式编程声明式编程

命令式编程关注的是 how to do自己完成整个 how 的过程;
声明式编程关注的是 what to do, 由框架(机器)完成 how的过程;

在原生的实现过程中，我们是如何操作的呢?

我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令;

这样的编写代码的过程，我们称之为命令式编程;

在早期的原生 JavaScript 和 jQuery 开发的过程中，我们都是通过这种命令式的方式在编写代码的;

在 Vue 的实现过程中，我们是如何操作的呢?

我们会在 createApp 传入的对象中声明需要的内容，模板 template、数据 data、方法 methods;
这样的编写代码的过程，我们称之为是声明式编程;
目前 Vue、React、Angular、小程序的编程模式，我们称之为声明式编程;

MVVM 模型 {#MVVM-模型}

MVC 和 MVVM 都是一种软件的体系结构

MVC 是 Model -- View --Controller 的简称，是在前期被使用非常框架的架构模式，比如 iOS、前端；
MVVM 是 Model-View-ViewModel 的简称，是目前非常流行的架构模式；

通常情况下，我们也经常称 Vue 是一个 MVVM 的框架。
Vue 官方其实有说明，Vue 虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。

指令 {#指令}

点击查看不常用vue指令
v-oncev-textv-htmlv-prev-cloakv-on支持修饰符

v-once用于指定元素或者组件只渲染一次

当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；

该指令可以用于性能优化；

用于更新元素的 textContent
如果我们希望这个内容被 Vue 可以解析出来，那么可以使用 v-html 来展示

v-pre用于跳过元素和它的子元素的编译过程，显示原始的 Mustache 标签：

跳过不需要编译的节点，加快编译的速度；

这个指令保持在元素上直到关联组件实例结束编译。
和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。

v-on 支持修饰符，修饰符相当于对事件进行了一些特殊的处理：

stop - 调用 event.stopPropagation()。
prevent - 调用 event.preventDefault()。
capture - 添加事件侦听器时使用 capture 模式。
self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
{keyAlias} - 仅当事件是从特定键触发时才触发回调。
once - 只触发一次回调。
left - 只当点击鼠标左键时触发。
right - 只当点击鼠标右键时触发。
middle - 只当点击鼠标中键时触发。
passive - { passive: true } 模式添加侦听器
点击查看常用vue指令
v-onv-if v-else-if v-elsev-showv-show和v-if的区别v-bindv-for

我们可以使用 v-on 来监听一下点击的事件:

|-----------------|---------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 |  <button v-on:click="counter++"></button>  <button v-on:click="btnClick">按钮1</button> |

v-on:click 可以写成@click，是它的语法糖写法:

|-------------|------------------------------------------------------------------| | 1 2 |  <button @click="btnClick">按钮2</button> |

当然，我们也可以绑定其他的事件:

|-------------|--------------------------------------------------------------------------| | 1 2 |  <button @mousemove="mouseMove">div的区域</button> |

如果我们希望一个元素绑定多个事件，这个时候可以传入一个对象:

|-------------|---------------------------------------------------------------------------------------------| | 1 2 |  <button v-on="{click: btnClick, mousemove: mouseMove}">特殊按钮3</button> |

v-on 参数传递

当通过 methods 中定义方法，以供 @click 调用时，需要注意参数问题

情况一:如果该方法不需要额外参数，那么方法后的()可以不添加。
但是注意:如果方法本身中有一个参数，那么会默认将原生事件 event 参数传递进去
情况二:如果需要同时传入某个参数，同时需要 event 时，可以通过 $event 传入事件。

v-if 的渲染原理:

v-if 是惰性的;
当条件为 false 时，其判断的内容完全不会被渲染或者会被销毁掉;
当条件为 true 时，才会真正渲染条件块中的内容;
v-show 和 v-if 的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件:
首先，在用法上的区别:
v-show 是不支持 template;
v-show 不可以和 v-else 一起使用;

其次，本质的区别:

v-show 元素无论是否需要显示到浏览器上，它的 DOM 实际都是有存在的，只是通过 CSS 的 display 属性来进行切换;
v-if 当条件为 false 时，其对应的原生压根不会被渲染到 DOM 中;

开发中如何进行选择呢?

如果我们的原生需要在显示和隐藏之间频繁的切换，那么使用 v-show;
如果不会频繁的发生切换，那么使用 v-if;

绑定 class -- 对象语法
对象语法: 我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class。

|------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <template id="my-app">  <div :class="classname">{{message}}</div>   <div class="anzhiyu" :class="{nba: true, 'james': true}"></div>  <div :class="{'active': isActive}">哈哈哈</div> <button @click='toggle'>切换</button>  <div :class="classObj">哈哈哈哈</div>  <div :class="getClassObj()">呵呵呵</div> </template> |

绑定 class -- 数组语法
数组语法:我们可以把一个数组传给 :class，以应用一个 class 列表

|-------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 | <template id="my-app">  <div :class="['anzhiyu',nba]">MaMal@</div>  <div :class="['anzhiyu', nba, isActive ? 'active' : '']">呵呵呵</div>  <div :class="['anzhiyu',nba,{'actvie': isActive }]">嘻嘻嘻</div> </template› |

绑定 style 介绍

v-for 基本使用

v-for 的基本格式是 "item in 数组":
- 数组通常是来自 data 或者 prop, 也可以是其他方式;
- item 是我们给每项元素起的一个别名，这个别名可以自定来定义;
我们知道，在遍历一个数组的时候会经常需要拿到数组的索引:
- 如果我们需要索引，可以使用格式: "(item, index) in 数组";
- 注意上面的顺序:数组元素项 item 是在前面的，索引项 index 是在后面的;

|---------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 | <template id="my-app"> <h2>电影列表</h2> <ul> <li v-for="item in movies">{{ item }}</li> </ul> </template> <template id="my-app"> <h2>电影列表-有索引</h2> <ul> <li v-for="(movie, index) in movies">{{ index + 1 }} - {{ movie }}</li> </ul> </template> |

v-for 支持的类型

v-for 也支持遍历对象，并且支持有一二三个参数:
- 一个参数: "value in object";
- 二个参数: "(value, key) in object";
- 三个参数: "(value, key, index) in object";
v-for 同时也支持数字的遍历:
- 每一个 item 都是一个数字;
v-for 也可以遍历其他可迭代对象(Iterable)

|------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <template id="my-app">  <ul> <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li> </ul>  <ul> <li v-for="item in message">{{item}}</li> </ul>  <ul> <li v-for="item in 100">{{item}}</li> </ul> </template> |

template 元素 {#template-元素}

类似于v-if，你可以使用 template 元素来循环渲染一段包含多个元素的内容:

我们使用 template 来对多个元素进行包裹，而不是使用 div 来完成;

|------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 | <template id="my-app"> <ul>  <template v-for="(value, key) in info"> <li>{{key}}</li> <li>{{value}}</li> <hr /> </template> </ul> </template> |

数组更新检测 {#数组更新检测}

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替换数组的方法

上面的方法会直接修改原来的数组;
但是某些方法不会替换原来的数组，而是会生成新的数组，比如 filter()、concat() 和 slice();

v-for 中的 key 是什么作用? {#v-for-中的-key-是什么作用}

在使用 v-for 进行列表渲染时，我们通常会给元素或者组件绑定一个 key 属性。

这个 key 属性有什么作用呢?我们先来看一下官方的解释:

key 属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes;
如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法;
而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除/销毁 key 不存在的元素;

官方的解释对于初学者来说并不好理解，比如下面的问题:

什么是新旧 nodes，什么是 VNode?

没有 key 的时候，如何尝试修改和复用的?
有 key 的时候，如何基于 key 重新排列的?

认识 VNode {#认识-VNode}

我们先来解释一下 VNode 的概念:

因为目前我们还没有比较完整的学习组件的概念，所以目前我们先理解 HTML 元素创建出来的 VNode; VNode 的全称是 Virtual Node，也就是虚拟节点;
事实上，无论是组件还是元素，它们最终在 Vue 中表示出来的都是一个个 VNode;
VNode 的本质是一个 JavaScript 的对象;

|-----------|---------------------------------------------------------------------------| | 1 | <div class="title" style="font-size: 30px; color: red;">哈哈哈</div> |

|---------------------------------|-------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 | const vnode = { type: "div", props: { class: "title", style: { "font-size": "30px", color: "red", }, }, children: "哈哈哈", }; |

vnode