Vue 核心技术

1.1 Vue简介

1.1.1 官网

1.1.2 介绍与描述

动态构建用户界面的渐进式 JavaScript 框架
作者:尤雨溪

1.1.3 Vue的特点

遵循 MVVM 模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注UI，也可以引入其它第三方库开发项目

1.1.4 与其它JS框架的关联

借鉴 Angular 的模板和数据绑定技术
借鉴 React 的组件化和虚拟 DOM 技术

1.1.5 Vue 周边库

Vue CLI: 项目脚手架
Vue Resource
Axios
Vue Router: 路由
Vuex: 状态管理
element-ui:基于 Vue 的 UI 组件库(PC端)
......

1.2 初识 Vue




    
    
    
    初识Vue
    


    
    
        Hello {{name}}

1.3 模板语法

1.3.1 模板的理解

html 中包含了一些 js 语法代码，语法分为两种，分别为：

插值语法（双大括号表达式）
指令（以v-开头）

1.3.2 插值语法

功能：用于解析标签体内容

1.3.3 指令语法

功能：解析标签属性、解析标签体内容、绑定事件
举例：v-bind:href='xxxx'，xxxx 会作为 js 表达式被解析
说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

1.3.4 示例代码




    
    
    
    Vue 模板语法
    


    
    
        插值语法
        你好，{{name}}
        
        指令语法
        去百度
        

        去百度
        

        去百度

1.4 数据绑定

1.4.1 单向数据绑定

语法：v-bind:href="xxx" 或简写为 :href
特点：数据只能从 data 流向页面

1.4.2 双向数据绑定

语法：v-model:value="xxx" 或简写为 v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向 data

1.4.3 示例代码

1.5 MVVM模型

M：模型(Model)：对应 data 中的数据
V：视图(View)：模板
VM：视图模型(ViewModel)：Vue 实例对象

1.6 事件处理

1.6.1 绑定监听

v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参：event
隐含属性对象：$event




    
    
    
    事件的基本使用
    


    
    
        欢迎来到 {{name}} 学习

1.6.2 事件修饰符

prevent: 阻止事件的默认行为 event.preventDefault()
stop: 停止事件冒泡 event.stopPropagation()

1.6.3 按键修饰符

keycode: 操作的是某个 keycode 值的键
keyName: 操作的某个按键名的键(少部分)




    
    
    
    键盘事件
    


    
    
        欢迎来到{{name}}学习

1.7 计算属性与监视属性

1.7.1 计算属性 `computed`

要显示的数据不存在，要通过计算得来。
在 computed 对象中定义计算属性。

在页面中使用插值语法来显示计算的结果。




    
    
    
    姓名案例-计算属性实现
    


    
    
        姓： 

        名： 

        
        全名：{{fullName}}




    
    
    
    姓名案例-计算属性简写
    


    
        姓： 

        名： 

        
        全名：{{fullName}}

1.7.2 监视属性 `watch`

通过通过 vm 对象的 $watch() 或 watch 配置来监视指定的属性

当属性变化时，回调函数自动调用，在函数内部进行计算




    
    
    
    天气案例-监视属性
    


    
    
        今天天气很{{info}}




    
    
    
    天气案例-深度监视
    


    
    
        今天天气很{{info}}
        
        
        x的值是:{{numbers.x}}
        
        y的值是:{{numbers.y}}




    
    
    
    天气案例-监视属性-简写
    


    
        今天天气很{{info}}

1.8 `class` 与 `style` 绑定

1.8.1 理解

在应用界面中，某个(些)元素的样式是变化的
class/style 绑定就是专门用来实现动态样式效果的技术

1.8.2 `class` 绑定

:class='xxx'
表达式是字符串：'classA'
表达式是对象：{classA:isA,classB:isB}
表达式是数组：['classA','classB']

1.8.3 `style` 绑定

:style="{color:activeColor,fontSize:fontSize+'px'}"
其中 activeColor/fontSize 是 data 属性

1.8.4 示例代码




    
    
    
    绑定样式
    
    


    
    

        
        {{name}}
 


        
        {{name}}
 


        
        {{name}}
 

        
        
        {{name}}
 

        {{name}}
 


        
        {{name}}

1.9 条件渲染

1.9.1 条件渲染指令

v-if 与 v-else
v-show

1.9.2 比较 `v-if` 与 `v-show`

如果需要频繁切换 v-show 较好
当条件不成立时，v-if 的所有子节点不会解析(项目中使用)

1.9.3 示例代码




    
    
    
    条件渲染
    


    
    
        
        
         欢迎来到{{name}}
         欢迎来到{{name}}
        
        
         欢迎来到{{name}}
         欢迎来到{{name}}

1.10 列表渲染

1.10.1 列表显示指令

遍历数组：v-for/index
遍历对象：v-for/key

1.10.2 示例代码

基本列表




    
    
    
    基本列表
    


    
    
        
        遍历数组
        
        
        
        
            {{p.name}} - {{p.age}}
        
        
        
        
        遍历对象
        
        
            {{k}} - {{v}}
        
        
        
        
        遍历字符串
        
            {{index}} - {{char}}
        
        

        
        遍历指定次数
        
            {{i}}

key 的原理




    
    
    
    key的原理
    


    
    
        遍历数组
        
        
        
            
                {{p.name}} - {{p.age}}

列表过滤




    
    
    
    列表过滤
    


    
        遍历数组
        
        
            {{p.name}} - {{p.age}} - {{p.sex}}

列表排序




    
    
    
    列表排序
    


    
        遍历数组
        
        
        
        
        
            {{p.name}} - {{p.age}} - {{p.sex}}

更新时的一个问题




    
    
    
    更新时的一个问题
    


    
        人员列表
        
        
            
                {{p.name}} - {{p.age}} - {{p.sex}}

Vue 监测数据改变的原理-对象




    
    
    
    Vue 数据检测改变的原理-对象
    


    
        学校名称: {{name}}
        学校地址: {{address}}

模拟一个数据监测




    
    
    
    模拟一个数据检测

Vue.set 的使用




    
    
    
    Vue.set的使用
    


    
        学校信息
        学校名称：{{shcool.name}}
        学校地址：{{shcool.address}}
        
        学生信息
        
        学生姓名：{{student.name}}
        学生年龄：真实-{{student.age.rAge}} 对外-{{student.age.sAge}}
        学生性别：{{student.sex}}
        学生朋友
        
            
                {{f.name}} - {{f.age}}

Vue 监测数据改变的原理-数组




    
    
    
    Vue监测数据改变的原理-数组
    


    
        学校信息
        学校名称：{{school.name}}
        学校地址：{{school.address}}
        校长是：{{school.leader}}
        
        学生信息
        
        
        姓名：{{student.name}}
        性别：{{student.sex}}
        年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}
        爱好
        
            
                {{h}}
            
        
        朋友们
        
            
                {{f.name}}--{{f.age}}

总结 Vue 的数据监测




    
    
    
    总结Vue中的数据监测
    


    
    
        学生信息
         

         

         

         

         

         

         

        姓名: {{ student.name }}
        年龄: {{ student.age }}
        性别: {{ student.sex }}
        爱好: 
        
            
                {{ h }}
            
        
        朋友: 
        
            
                {{ f.name }} - {{f.age}}

1.11 收集表单数据




    
    
    
    收集表单数据
    


    
    
        
            
            账号：

            年龄： 


            密码：

            性别：
            男
            女

            爱好：
            唱
            跳
            Rap

            所属校区
            
            


            其他信息：
             


            阅读并接受《用户协议》

1.12 过滤器

1.12.1 理解过滤器

功能：对要显示的数据进行特定格式化后再显示
注意：并没有改变原本的数据，是产生新的对应的数据

1.12.2 示例代码




    
    
    
    过滤器
    
    


    
    
        显示格式化后的时间
        
        计算属性实现，现在是{{ fmtTime }}
        
        计算属性实现，现在是{{ getFmtTime() }}
        
        过滤器实现，现在是{{ fmtTime | timeFormat }}
        
        过滤器实现，现在是{{ fmtTime | timeFormat2("YYYY-MM-DD") | strSlice }}

    

    
        显示格式化后的时间
        
        过滤器实现，现在是{{ msg | strSlice }}

1.13 内置指令与自定义指令

1.13.1 常用内置指令

v-text: 更新元素的 textContent
v-html: 更新元素的 innerHTML
v-if: 如果为 true, 当前标签才会输出到页面
v-else: 如果为 false, 当前标签才会输出到页面
v-show: 通过控制 display 样式来控制显示/隐藏
v-for: 遍历数组/对象
v-on: 绑定事件监听,一般简写为 @
v-bind: 绑定解析表达式，可以省略 v-bind
v-model: 双向数据绑定
v-cloak: 防止闪现，与 css 配合: [v-cloak]{display:none}

1.13.2 自定义指令

注册全局指令

Vue.directive('my-directive',function(el,binding){
    el.innerHTML=binding.value.toupperCase()
})

注册局部指令

directives:{
    'my-directive':{
        bind(el,binding){
            el.innerHTML = binding.value.toupperCase()
        }
    }
}

使用指令
```
v-my-directive='xxx'
```

1.14 Vue实例生命周期

1.14.1 生命周期流程图

1.14.2 vue生命周期分析

初始化显示
- beforeCreate()
- created()
- beforeMount()
- mounted()
更新状态: this.xxx=value
- beforeUpdate()
- updated()
销毁 Vue 实例: vm.$destory()
- beforeDestory()
- destoryed()

1.14.3 示例代码




    
    
    
    分析生命周期
    


    
        
        n 的值: {{ n }}

1.14.4 常用的生命周期方法

mounted(): 发送 ajax 请求，启动定时器等异步任务
beforeDestory(): 做收尾工作，如：清除定时器

Vue 核心技术

1.1 Vue简介

1.1.1 官网

1.1.2 介绍与描述

1.1.3 Vue的特点

1.1.4 与其它JS框架的关联

1.1.5 Vue 周边库

1.2 初识 Vue

Hello {{name}}

1.3 模板语法

1.3.1 模板的理解

1.3.2 插值语法

1.3.3 指令语法

1.3.4 示例代码

插值语法

你好，{{name}}

指令语法

1.4 数据绑定

1.4.1 单向数据绑定

1.4.2 双向数据绑定

1.4.3 示例代码

1.5 MVVM模型

1.6 事件处理

1.6.1 绑定监听

欢迎来到 {{name}} 学习

1.6.2 事件修饰符

1.6.3 按键修饰符

欢迎来到{{name}}学习

1.7 计算属性与监视属性

1.7.1 计算属性 computed

1.7.2 监视属性 watch

今天天气很{{info}}

今天天气很{{info}}

x的值是:{{numbers.x}}

y的值是:{{numbers.y}}

今天天气很{{info}}

1.8 class 与 style 绑定

1.8.1 理解

1.8.2 class 绑定

1.8.3 style 绑定

1.8.4 示例代码

1.9 条件渲染

1.9.1 条件渲染指令

1.9.2 比较 v-if 与 v-show

1.9.3 示例代码

欢迎来到{{name}}

欢迎来到{{name}}

欢迎来到{{name}}

欢迎来到{{name}}

Angular

React

Vue

1.10 列表渲染

1.10.1 列表显示指令

1.10.2 示例代码

遍历数组

遍历对象

遍历字符串

遍历指定次数

遍历数组

遍历数组

遍历数组

人员列表

学校名称: {{name}}

学校地址: {{address}}

学校信息

学校名称：{{shcool.name}}

学校地址：{{shcool.address}}

学生信息

学生姓名：{{student.name}}

学生年龄：真实-{{student.age.rAge}} 对外-{{student.age.sAge}}

学生性别：{{student.sex}}

学生朋友

学校信息

学校名称：{{school.name}}

学校地址：{{school.address}}

校长是：{{school.leader}}

学生信息

姓名：{{student.name}}

性别：{{student.sex}}

1.7.1 计算属性 `computed`

1.7.2 监视属性 `watch`

1.8 `class` 与 `style` 绑定

1.8.2 `class` 绑定

1.8.3 `style` 绑定

1.9.2 比较 `v-if` 与 `v-show`