从HTML到现在一路跟过来的小伙伴们，坚持固然不容易，但我相信大家已经学到了不少，那么我们开始马不停蹄的进入前端的框架吧，下面讲的是Vue2，大家继续加油鸭！！！！

Vue2

Vue2官方文档地址，喜欢阅读文档的小伙伴可以点击进入官网。

1、Vue2 简介

Vue是什么？ 官网的Vue的解释如下： Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的两个特性：

1、数据驱动视图

数据的变化会驱动视图自动更新好处：程序员只管把数据维护好，那么页面结构会被vue自动渲染出来

2、双向数据绑定

在网页中，form表单负责采集数据，Ajax负责提交数据

js数据变化，会被自动渲染到页面上页面上表单采集的数据发生变化，会被vue自动获取到，并更新到js数据中

注意：数据驱动视图和双向数据绑定的底层原理是MVVM（Model数据源、View视图、ViewModel就是vue的实例）

学了JS的小伙伴应该都知道，有很多操作都是基于DOM元素进行的，需要获取DOM元素，Vue则不需要获取DOM元素就可以对DOM元素进行操作，下面我们就进入Vue的正式学习吧！

1.1、Vue Devtools

在使用 Vue 时，推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

1.2、安装引入Vue2

命令行运行 npm install vue@^2

或者引入Vue2

2、插值表达式

插值表达式 {{ }} 是一种Vue的模版语法

作用：利用表达式进行插值，渲染到页面中

​ 语法:{{表达式}}

​ 注意点：(1) 使用的数据必须存在

​ (2)支持的是表达式，而非语句

​ (3)不能在标签属性中使用{{}}插值

Document

{{ info}}-{{arr}}

data中的数据最终会被添加到实例上

① 访问数据：“实例.属性名”

② 修改数据：“实例.属性名” = “值”

3、Vue指令

Vue 会根据不同的指令，针对标签实现不同的功能 指令：带有 v-前缀 的特殊标签属性， 不同的指令，完成不同的功能

3.1、v-if、v-else、v-else-if

v-if 作用：控制元素显示隐藏（条件渲染）

语法：v-if = “表达式” 表达式值true显示，false隐藏

v-else、v-else-if 作用：辅助v-if进行判断渲染

语法：v-else v-else-if = “表达式”

注意：需要紧挨着 v-if 一起使用

原理：基于条件判断，是否创建或移除元素节点

场景：要么显示，要么隐藏，不频繁切换的场景

Document

A

B

C

浏览器页面只显示了一个A 控制台查看元素，只创建了一个满足条件的p元素

3.2 v-show

作用：控制元素显示隐藏

语法：v-show = “表达式” 表达式值true显示，false隐藏

原理：切换 display：none / block控制显示隐藏

场景：频繁切换显示隐藏的场景

Document

456

654

浏览器页面只显示了654 浏览器控制台查看元素，发现两个div都存在，只是具有不同的样式 这里就可以看出来，v-if与v-show都可以控住元素的显示和不显示，但是也存在区别： v-if控制元素显示与隐藏，通过js创建dom元素或删除元素 v-show通过css的display显示与隐藏

区分：频繁切换元素显示与隐藏用v-show,其余可以用v-if

3.3、 v-on

作用：注册事件 = 添加监听 + 提供处理逻辑

语法：

① v-on：事件名 = “内联语句” => 简写： @事件名 = "内联语句 "

② v-on：事件名=“methods中的函数名” => 简写： @事件名 = “methods中的函数名”

​ 调用函数时不传递参数，事件对象（$event）就是默认的第一个形参

​ v-on 调用参数，当涉及到参数传递时 ，改写为 事件名 = “methods中的函数名（参数1，参数2）”

Document

{{ num }}

3.4、v-for

作用：基于数组循环，多次渲染整个元素

遍历数组语法：v-for = “(item,index) in 数组“

​ item 表示每一项 index 表示下标

​ 当参数只有一个时，可以省略括号

v-for 中的 key

语法：key属性 = “唯一标识”

key的作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用

Document

百度

京东

京东

  • {{index}}-{{ item.bookName }}

  • {{i}}

注意点：1.key的值只能是字符串或数字类型

​ 2.key的值必须具有唯一性

​ 3.推荐使用id作为key的唯一值，不推荐使用index作为key

4.v-for 不建议与 v-if 一起使用，v-for优先级更高，消耗性能

3.5、 v-bind

作用：动态的设置html的标签属性 -> src、url、title ……

语法：v-bind：属性名 = “表达式” —> 简写 ：属性名 = “表达式”

对于样式控制的增强

(1)、操作class

​ 语法：:class = “对象/数组”

​ ①对象 --> 键就是类名，值是布尔值。如果值是true，有这个类，否则没有这个类

​ ②数组 --> 数组中所有的类，都会添加到盒子上，本质就是一个class列表

(2)、操作style

​ 语法：:style = ‘样式对象’

Document

class="box"

style="width: 100px; height: 100px; background-color: red"

>

:style="{width:'100px',height:'100px', backgroundColor: 'blue'}"

>