第二章 Vue 核心技术

2.1 Vue 入门开发

2.1.1 创建工程

• 在本地创建文件夹D:\Project\vue\WebStudy
  
• 打开 VS Code ，点击 File > Open Folder ， 找到 D:\Project\vue\WebStudy 打开
• 单击 WEBSTUDY 右侧的新建目录图标，创建目录： vue-01-core
  

2.1.2 创建 HTML 和 安装 vue 模块

• 在 vue-01-core 目录下新建一个页面 01-helloworld.html
• 在 vue-01-core 目录下的命令行窗口，安装2.6.10版本的 vue 模块
  

2.1.3 编写HTML页面

• 编写步骤：

• 采用 <script> 标签引入 vue.js 库

• 定义一个 <div>

• new Vue() 实例化Vue应用程序
  el 选项： 元素element的缩写，指定被 Vue 管理的 Dom 节点入口（值为选择器 )，必须是一个普通的HTML 标签节点，一般是 div。
  data 选项：指定初始化数据，在 Vue 所管理的 Dom 节点下，可通过模板语法来进行使用

• 标签体显示数据： {{xxxxx}}

• 表单元素双向数据绑定： v-model

• 注意： el 的值不能为 html 或 body

• 源码实现
  

2.2 分析 MVVM 模型

常见面试题：什么是 MVVM 模型？

• MVVM 是 Model-View-ViewModel 的缩写，它是一种软件架构风格
  Model：模型， 数据对象（data选项当中的）
  View：视图，模板页面（用于渲染数据）
  ViewModel：视图模型，其实本质上就是 Vue 实例

• 它的哲学思想是: 通过数据驱动视图，把需要改变视图的数据初始化到 Vue中，然后再通过修改 Vue 中的数据，从而实现对视图的更新。

• 声明式编程:按照 Vue 的特定语法进行声明开发，就可以实现对应功能，不需要我们直接操作Dom元素
  命令式编程：Jquery它就是，需要手动去操作Dom才能实现对应功能。

2.3 Vue Devtools 插件安装

Vue Devtools 插件让我们在一个更友好的界面中审查和调试 Vue 项目。

• 火狐浏览器 扩展与主题 - 搜索Vue Devtools-点击添加
  
• 安装效果如下
  
• 当你访问Vue开发的页面时，按 F12 可 Vue 标签页
  

2.4 模板数据绑定渲染

可生成动态的HTML页面，页面中使用嵌入 Vue.js 语法可动态生成

1. {{xxxx}} 双大括号文本绑定
2. v-xxxx 以 v- 开头用于标签属性绑定，称为指令

2.4.1 双大括号语法 {{}}

• 格式： {{表达式}}
• 作用：
  使用在标签体中，用于获取数据
  可以使用 JavaScript 表达式
• 案例源码：
  

2.4.2 一次性插值 v-once

• 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

2.4.3 输出HTML指令 v-html

• 格式： v-html=‘xxxx’

• 作用：
  如果是HTML格式数据，双大括号会将数据解释为普通文本，为了输出真正的 HTML，你需要使用 v-html 指令。
  Vue 为了防止 XSS 攻击，在此指令上做了安全处理，当发现输出内容有 script 标签时，则不渲染
  XSS 攻击主要利用 JS 脚本注入到网页中，读取 Cookie 值（Cookie一般存储了登录身份信息），读取到了发送到黑客服务器，从而黑客可以使用你的帐户做非法操作。
  XSS 攻击还可以在你进入到支付时，跳转到钓鱼网站。

• 案例源码：

• 效果图
  

2.4.4 元素绑定指令 v-bind

• 完整格式： v-bind:元素的属性名=‘xxxx’
• 缩写格式： :元素的属性名=‘xxxx’
• 作用：将数据动态绑定到指定的元素上
• 案例源码
  
• 效果图
  

2.4.5 事件绑定指令 v-on

• 完整格式： v-on:事件名称=“事件处理函数名”
• 缩写格式： @事件名称=“事件处理函数名” 注意： @ 后面没有冒号
• 作用：用于监听 DOM 事件
• 案例源码： 每点击1次，数据就加1
  
• 效果图
  

2.5 计算属性和监听器

2.5.1 计算属性 computed

• computed 选项定义计算属性

• 计算属性 类似于 methods 选项中定义的函数
  计算属性 会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。
  函数 每次都会执行函数体进行计算。

• 需求：输入数学与英语分数，采用 methods 与 computed 分别计算出总得分

• 案例源码
  computed 选项内的计算属性默认是 getter 函数，所以上面只支持单向绑定，当修改数学和英语的数据才会更新总分，而修改总分不会更新数据和英语

2.5.2 计算属性（双向绑定）

• 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
• 案例源码：
  

2.5.3 监听器 watch

• 当属性数据发生变化时,对应属性的回调函数会自动调用, 在函数内部进行计算

• 通过 watch 选项 或者 vm 实例的 $watch() 来监听指定的属性

• 需求：

• 通过 watch 选项 监听数学分数， 当数学更新后回调函数中重新计算总分sumScore3

• 通过 vm.$watch() 选项 监听英语分数，当英语更新后回调函数中重新计算总分sumScore3

• 源码实现：
  注意: 在data 选择中添加一个 sumScore3 属性
  

2.6 Class 与 Style 绑定 v-bind

通过 class 列表和 style 指定样式是数据绑定的一个常见需求。它们都是元素的属性，都用 v-bind 处理，其中表达式结果的类型可以是：字符串、对象或数组。

2.6.1 语法格式

• v-bind:class=‘表达式’ 或 :class=‘表达式’
  class 的表达式可以为：
  字符串 :class=“activeClass”
  对象 :class="{active: isActive, error: hasError}"
  数组 :class="[‘active’, ‘error’]" 注意要加上单引号,不然是获取data中的值
• v-bind:style=‘表达式’ 或 :style=‘表达式’`
  style 的表达式一般为对象
  :style="{color: activeColor, fontSize: fontSize + ‘px’}"
  注意：对象中的value值 activeColor 和 fontSize 是data中的属性

2.6.2 案例源码

• 效果图
  

2.7 条件渲染 v-if

2.7.1 条件指令

• v-if 是否渲染当前元素
• v-else
• v-else-if
• v-show 与 v-if 类似，只是元素始终会被渲染并保留在 DOM 中,只是简单切换元素的 CSS 属性 display 来显示或隐藏

2.7.2 案例源码

• 源码实现
  
• 效果图
  

2.7.3 v-if 与 v-show 比较

1. 什么时候元素被渲染
   v-if 如果在初始条件为假，则什么也不做，每当条件为真时，都会重新渲染条件元素
   v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换
2. 使用场景选择
   v-if 有更高的切换开销
   v-show 有更高的初始渲染开销
   因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行后条件很少改变，则使用 v-if 较好

2.8 列表渲染 v-for

2.8.1 列表渲染指令

1. v-for 迭代数组
   语法： v-for="(alias, index) in array"
   说明： alias : 数组元素迭代的别名； index : 数组索引值从0开始(可选)
   举例
   items 是源数据数组， item 是数组元素迭代的别名。
   注意：使用 key 特殊属性， 它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素

2. v-for 迭代对象的属性
   语法： v-for="(value, key, index) in Object"
   说明： value : 每个对象的属性值; key : 属性名(可选); index : 索引值(可选)
   举例：
   注意: 在遍历对象时，是按 Object.keys() 的结果遍历，但不能保证它的结果在不同的 JavaScript 引擎下是顺序一致的。

3. 可用 of 替代 in 作为分隔符

2.8.2 案例源码

• 源码实现
  

2.9 事件处理 v-on

2.9.1 事件处理方法

• 完整格式： v-on:事件名=“函数名” 或 v-on:事件名=“函数名(参数……)”

• 缩写格式： @事件名=“函数名” 或 @事件名=“函数名(参数……)” 注意： @ 后面没有冒号

• event ：函数中的默认形参，代表原生 DOM 事件
  当调用的函数，有多个参数传入时，需要使用原生DOM事件，则通过 $event 作为实参传入

• 作用：用于监听 DOM 事件

• 案例源码
  

2.9.2 事件修饰符

• .stop 阻止单击事件继续传播 event.stopPropagation()
• .prevent 阻止事件默认行为 event.preventDefault()
• .once 点击事件将只会触发一次
  
  

2.9.3 按键修饰符

• 格式： v-on:keyup.按键名 或 @keyup.按键名
• 常用按键名：
  .enter
  .tab
  .delete (捕获“删除”和“退格”键)
  .esc
  .space
  .up
  .down
  .left
  .right
• 源码实现
  

2.10 表单数据双向绑定v-model

• 单向绑定：数据变，视图变；视图变（浏览器控制台上更新html），数据不变；上面的都是单向绑定
• 双向绑定：数据变，视图变；视图变（在输入框更新），数据变；

2.10.1 基础用法

v-model 指令用于表单数据双向绑定，针对以下类型：

• text文本
• textarea多行文本
• radio单选按钮
• checkbox 复选框
• select 下拉框

2.10.2 案例源码