前端技术栈学习：Vue2、Vue cli脚手架、ElementUI组件库、Axios

1 基本介绍

（1）Vue 是一个前端框架, 易于构建用户界面

（2）Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或项目整合

（3）支持和其它类库结合使用

（4）开发复杂的单页应用非常方便

（5）Vue 是 Vue.js 的简称

官网: https://cn.vuejs.org/

git 地址: https://github.com/vuejs

2 MVVM 机制示意图

解读 MVVM 思想(上图)

• M∶即 Model，模型，包括数据和一些基本操作
• V∶即View，视图，页面渲染结果
• VM∶即 View-Model，模型与视图间的双向操作(无需开发人员干涉)
• 在 MVVM之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到View 中。而后当用户操作视图，我们还需要通过 DOM获取 View 中的数据， 然后同步到Model 中。
• 而 MVVM中的VM 要做的事情就是把DOM 操作完全封装起来，开发人员不用再关心 Model 和View 之间是如何互相影响的
• 只要我们 Model 发生了改变，View上自然就会表现出来
• 当用户修改了View，Model 中的数据也会跟着改变。
• 结果：把开发人员从繁琐的 DOM操作中解放出来，把关注点放在如何操作 Model上, 大 大提高开发效率 

3 快速入门

官网文档：https://cn.vuejs.org/v2/guide/index.html

下载: https://cn.vuejs.org/v2/guide/installation.html 

3.1 需求

• 初步体会 Vue.js 的数据绑定功能 
• 体会 Vue.js 开发框架的主体结构

注意：为了让 IDEA 识别 Vue 代码，需要安装插件 Vue.js 

3.2 代码实现

（1）创建新文件夹 D:\idea_java_projects\vue , 直接拖到 Idea 工具，使用 idea 打开

（2）将下载好的 vue.js 拷贝到 D:\idea_java_projects\vue\vue.js

（3）创建 D:\idea_java_projects\vue\vue_quick_start.html

    
    




    
    
欢迎你{
  {message}}-{
  {name}}

 （4）运行效果如下

3.3 注意事项和使用细节

（1）注意代码顺序，要求 div 在前，script 在后，否则无法绑定数据

（2）从案例可以体会声明式渲染：Vue.js 采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统， 做到数据和显示分离

（3）Vue 没有繁琐的 DOM 操作，如果使用 jQuery，我们需要先找到 div 节点，获取到 DOM 对象，然后进行节点操作, 显然 Vue 更加简洁

4 数据单向渲染

4.1 基本说明

（1）v-bind 指令可以完成基本数据渲染/绑定

（2）v-bind 简写形式就是一个冒号（:）

4.2 应用实例

4.2.1 需求分析

需求: 演示 v-bind 的使用, 可以绑定元素的属性 

4.2.2 代码实现 

（1）把准备好的 1.jpg 拷贝到 D:\idea_java_projects\vue\1.jpg

（2）创建 D:\idea_java_projects\vue\单向数据渲染.html

    
    



  
{
  {message}}
    
  
    
  

（3）效果如下

4.3 注意事项和使用细节 

（1）插值表达式是用在标签体的

（2）如果给标签属性绑定值，则使用 v-bind 指令 

5 数据双向绑定

5.1 基本说明

v-model 可以完成双向数据绑定

5.2 应用实例 

5.2.1 需求分析

需求：在输入框中输入信息，会更新到相应绑定的位置 

5.2.2 代码实现

（1）创建 D:\idea_java_projects\vue\双向数据渲染.html 

    
    



  
{
  {message}}
    
  


  


  
你输入的爱好是: {
  {hobby.val}}

 （2）完成测试

6 事件绑定 

6.1 基本说明

（1）使用 v-on 进行事件处理，比如: v-on:click 表示处理鼠标点击事件，v-on:blur 表示失去焦点事件

（2）事件调用的方法定义在 vue 对象声明的 methods 节点中

（3）v-on:事件名 可以绑定指定事件

（4）官方文档：https://cn.vuejs.org/v2/guide/events.html 

6.2 应用实例

6.2.1 需求分析

需求: 演示 Vue 事件绑定操作 

6.2.2 代码实现 

（1）创建 D:\idea_java_projects\vue\event.html

    
    



  
{
  {message}}
    
  点击输出
  点击输出
  点击输出
  点击输出

6.2.3 注意事项和使用细节

（1）如果方法没有参数，可以省略()[需要浏览器支持]

（2）v-on 指令的简写形式 @ [需要浏览器支持] 

7 修饰符

7.1 基本说明

（1）修饰符 (Modifiers) 是以(.)指明的后缀，指出某个指令以特殊方式绑定。

（2）例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()即阻 止事件原本的默认行为

（3）事件修饰符

• .stop 阻止事件继续传播
• .prevent 阻止标签默认行为
• .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进 行处理
• .self 只当在 event.target 是当前元素自身时触发处理函数
• .once 事件将只会触发一次
• .passive 告诉浏览器你不想阻止事件的默认行为

（4）键盘事件的修饰符

比如: 项目经常需要监听一些键盘事件来触发程序的执行，而 Vue 中允许在监听的时候添加键盘修饰符

绝大多数常用的按键码的别名：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

（5）v-model 的修饰符

比如: 自动过滤用户输入的首尾空格

（6）官 方 文 档 ： https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6 

7.2 应用实例

需求:

（1&#x