零基础可以学的vue（1）

接下来的一段时间，我会持续更新vue相关的知识，如有想学的，可以点点关注哦！ 一、vue简介

概念：是一套用于构建用户界面的渐进式 框架。

构建用户界面：用vue往html页面中填充数据，非常的方便。

渐进式：vue不强求程序员一次性接受并使用它的全部功能和特性，由浅入深地学习和使用，学多少，就可 以在项目中用多少。

框架：框架指的是程序员必须遵守的规则和约束。

二、vue的基本使用

vue的基本使用:4个步骤

    
    
        
姓名：{{username}}
        
年龄：{{age}}
    
    
    
    

三、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类型
.trim	自动过滤用户输入的首尾空白字符
.lazy	让v-model绑定的值，在“change”时更新，而非“input”时更新

5.条件渲染指定

①条件渲染指令通过条件判断来控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

 v-if

 v-show

②v-if 和 v-show 的区别

实现原理不同：

 v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；

 v-show 指令会动态为元素添加或移除 样式，从而控制元素的显示与隐藏；

性能消耗不同：

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 数据的变化，会导致页面结构的重新渲染。示意图如下：

好处：减少了程序员对 DOM 的 *** 作。 注意：数据驱动视图是 单向的数据绑定 。

---

双向数据绑定

① data 数据的变化，会导致页面的重新渲染

② 表单数据的变化，会被自动更新到 data 数据中

MVVM介绍

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。

MVVM 指的是 Model、View 和 ViewModel。

它把每个 HTML 页面都拆分成了这三个部分，如图所示：

 MVVM 的工作原理

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构

当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中