第一篇：了解Vue

[TOC]

Vue的基础

Vue概述：2014/2 Vue.js正式发布；2015/10/27 正式发布1.0.0版本；2016/4/27 发布2.0预览版本

• 渐进式JavaScript框架
  • 声明式渲染 => 组件系统 => 客户端路由 => 集中式状态管理 => 项目构建
  • 官网：https://cn.vuejs.org/v2/guide/

特性：

• 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
• 灵活：在一个库和一套完整框架之间自由伸缩
• 高效：20kb运行大小，超快虚拟DOM

Vue基本使用

{{msg}}

{{1 + 2}}
{{msg + '!!!'}}

1. 实例参数分析
   • el：元素的挂载位置(值可以是CSS选择器或者DOM元素)
   • data：模型数据(值是一个对象)
2. 插值表达式用法
   • 将数据填充到HTML标签中
   • 差值表达式支持基本的计算操作
3. Vue代码运行的原理
   • 概述编译过程的概念(Vue语法 => 原生语法)

Vue的模板语法

1. 如何理解前端渲染？
   • 把数据填充到HTML标签中
2. 前端渲染方式
   • 原生js拼接字符
     • 把数据以字符串的方式拼接到HTML标签中
     • 缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来
   • 使用前端模板引擎
     • 有自己的一套模板语法规范
     • 优点：遵循同样的规范写法代码，代码可读性明显提高了，方便后期的维护
     • 缺点：没有专门提供事件机制
   • 使用Vue特有的模板语法
     • 差值表达式
     • 指令
     • 事件绑定
     • 属性绑定
     • 样式绑定
     • 分支循环结构

指令

1. 什么是指令？
   • 指令的本质就是自定义属性
   • 指令的格式：以v开始(比如：v-cloak)
2. v-cloak指令的用法
   • 差值表达式存在的问题："闪动"
   • 如何解决该问题：使用v-cloak指令
   • 解决该问题的原理：先隐藏，替换好值之后再显示最终的值

{{msg}}

3. 数据绑定指令
   • v-text 填充纯文本
     • 相比差值表达式更加简洁
   • v-html 填充HTML片段
     • 存在安全问题,容易导致XSS攻击
     • 本网站内部数据可以使用，来自第三方的数据不可以用
   • v-pre 填充原始信息
     • 显示原始信息，跳过编译过程(分析编译过程)

    

    

    
{{msg}}

Vue使用

1. 数据响应式

   • 如何理解响应式？
     • html5中的响应式(屏幕尺寸的变化导致样式的变化)
     • 数据的响应式(数据的变化导致页面内容的变化)
   • 什么是数据数据绑定
     • 数据绑定：将数据填充到标签中
   • v-once 只编译一次
     • 显示内容之后不再具有响应式功能

   // v-once使用场景：如果显示的信息后续不需要再修改，就可以使用v-once，这样可以提高性能
   

2. 双向数据绑定 v-model

   • 什么是双向数据绑定
   • MVVM设计思想(M(module) V(view) VM(View-Module))

3. 事件绑定

   • v-on指令用法
   • v-on简写形式

4. 事件函数的调用方式

   • 直接绑定函数名称
     • Hello
     • 自带事件对象
   • 调用函数
     • Hello
     • 事件函数参数传递：普通参数和事件对象Hello

5. 事件修饰符

   • .stop阻止冒泡
     • 跳转
   • .prevent阻止默认行为
     • 跳转
   • .self只有当前元素自身触发时才会触发这个函数

6. 按键修饰符

   • .enter回车键
   • .delete删除键

7. 自定义按键修饰符

   • 全局config.keyCodes对象
     • Vue.config.keyCodes.f1 = 112
   • 规则：自定义修饰符的名字是自己定义的，但是对应的值必须是案件对应的event.keyCode值

8. Vue如何动态处理属性？

   • v-bind指令用法
     • 跳转
     • 缩写形式
     • 跳转

9. v-model的底层原理分析

   
       
   {{name}}
       
       
       
   
   
   

10. 样式绑定

    1. class样式处理
       • 对象语法
       • 数组语法
       • 样式相关语法细节：
         • 对象绑定和数组绑定可以结合使用
         • class绑定的值可以简化操作
         • 默认的class如何处理
    2. style样式处理
       • 对象语法
       • 数组语法

```html


    切换
    
{{name}}


```

```html


    移除
    
{{name}}



```

```html

    切换
    
{{name}}
    

    



```

11. 分支循环结构

    • v-if：控制元素是否渲染到页面
    • v-else
    • v-else-if
    • v-show：控制元素是否显示(已经渲染到页面)

    
        
    优
        
    良
        
    可
        
    差
        
        
    测试v-show
        点击
    
    
    

12. 循环结构

    • v-for遍历数组
      • {{item}}
      • {{item + '---' + index}}
    • key的作用：帮助Vue区分不同的元素，从而提高性能
      • {{item}} + '---' {{index}}
    • v-for遍历对象
    • v-if和v-for结合使用

Vue常用特性

1. 表单操作

   • input 单行文本
   • textarea 多行文本
   • select 下拉多选
   • radio 单选框
   • checkbox 多选框
   • 表单域修饰符：
   • number：转化为数值
   • trim：去掉开始和结尾的空格
   • lazy：将input时间切换为change事件

2. 自定义指令

   • 为何需要自定义指令？ 内置指令不满足需求

   • 自定义指令的语法规则(获取元素焦点)

     // 自定义指令
     Vue.directive('focus' ,{
         inserted: function (el) {
             // 获取元素的焦点
             el.focus();
         }
     })
     

   • 自定义指令的用法

   • 钩子函数

   • 钩子函数参数：

     • el：指令所绑定的元素
     • binding：一个对象，包含以下属性：
       • name：指令名，不包含v-前缀
       • value：指令绑定的值
       • ...
     • vnode：Vue生成的虚拟节点
     • oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用

   • 局部指令：如果想要注册局部指令，组件中也接受一个directive的选项：

     directive: {
         focus: {
             // 指令的定义
             inserted: function (el) {
                 el.focus()
             }
         }
     }
     

3. 计算属性

   • 为何需要计算属性？表达式的计算逻辑可能会比较复杂，使用计算属性可以是模板内容更加简洁

   • 计算属性用法：

     computed: {
         reversedMessage: function () {
             return this.msg.split('').reverse().join()
         }
     }
     

   • 计算属性和方法的区别：

     • 计算属性是基于它们的依赖进行缓存的
     • 方法不存在缓存

4. 侦听器

   • 侦听器应用场景：数据变化时执行异步或开销比较大的操作

   • 侦听器的用法

     watch: {
         firstName: function (val) {
             // val变化之后的值
             this.fullName = val + this.lastName;
         },
         lastName: function (val) {
             this.fullName = this.firstName + val;
         }
     }
     

5. 过滤器

   • 作用：格式化数据，比如将字符串格式化为首字母大写，将日期格式转化为指定的格式等

   • 自定义过滤器

     Vue.filter('过滤器名称', function(value) {
         // 过滤器业务逻辑
     })
     

   • 过滤器的使用:

     {{msg | upper}}
     {{msg | upper | lower}}
     
     

   • 局部过滤器

     filters: {
         capitalize: function() {}
     }
     

   
       
   {{name}}
       
       
   {{msg | upper}}
       
   {{msg | upper | lower}}
       
   测试数据
   
   
   

   • 带参数的过滤器

     {{data | format('yyy-MMM-dd')}}