Vue 核心技术

1.1 Vue简介

1.1.1 官网

• 英文官网
• 中文官网

1.1.2 介绍与描述

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

1.1.3 Vue的特点

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

1.1.4 与其它JS框架的关联

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

1.1.5 Vue 周边库

1. Vue CLI: 项目脚手架
2. Vue Resource
3. Axios
4. Vue Router: 路由
5. Vuex: 状态管理

6. element-ui:基于 Vue 的 UI 组件库(PC端)

   ......

1.2 初识 Vue

    
    
    
    
    


    
    

        
Hello {{name}}
    

    

1.3 模板语法

1.3.1 模板的理解

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

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

1.3.2 插值语法

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

1.3.3 指令语法

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

1.3.4 示例代码

    
    
    
    
    


    
    

        
插值语法
        
你好，{{name}}
        

        
指令语法
        去百度
        

        去百度
        

        去百度
    

    

1.4 数据绑定

1.4.1 单向数据绑定

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

1.4.2 双向数据绑定

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

1.4.3 示例代码

    
    
    
    
    



    
    

        

        
        单向绑定普通写法:
        

        
        单向绑定简写:
        
        

        
        
        双向绑定普通写法:
        

        
        双向绑定简写:

        
        
        

        


    

    

1.5 MVVM模型

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

1.6 事件处理

1.6.1 绑定监听

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

    
    
    
    
    


    
    

        
欢迎来到 {{name}} 学习
        点我去学习1
        点我去学习2
        点我去学习3
        点我去学习4
        点我去学习5
    
    
    

1.6.2 事件修饰符

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

    
    
    
    
    
    


    

    

        
        
        点我去百度

        
        点我去百度


        
        

            点我提示信息
        
        

            点我提示信息
        
        
        
        点我提示信息

        
        

            div01
            

                div02
            
        

        
        

            点我提示信息
        

        \
        

        

        
        
            
1
            
2
            
3
            
4
            
5
        

        
        

            点我去百度
            点我去百度
        

    

    

1.6.3 按键修饰符

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

    
    
    
    
    


    
    

        
欢迎来到{{name}}学习
        
        

        

        

        


        

        

        

        

        

        

        

        

    

    

1.7 计算属性与监视属性

1.7.1 计算属性 computed

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

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

   
   
   
       
       
       
       
       
   
   
       
       
   
           姓： 
   
           名： 
   
           
           全名：{{fullName}} 
   
           
   
       
   
       
   
   

   
   
   
       
       
       
       
       
   
   
       
   
           姓： 
   
           名： 
   
           
           全名：{{fullName}} 
   
       
   
       
   
   

1.7.2 监视属性 watch

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

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

   
   
   
       
       
       
       
       
   
   
       
       
   
           
   今天天气很{{info}}
           切换天气
       
   
       
   
   

   
   
   
       
       
       
       
       
   
   
       
       
   
           
   今天天气很{{info}}
           切换天气
           
   
           
   x的值是:{{numbers.x}}
           点我让x + 1
           
   y的值是:{{numbers.y}}
           点我让y + 1
           
   
           
   
           彻底替换掉numbers
       
   
       
   
   

   
   
   
       
       
       
       
       
   
   
       
   
           
   今天天气很{{info}}
           切换天气
       
   
       
   
   

1.8 class 与 style 绑定

1.8.1 理解

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

1.8.2 class 绑定

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

1.8.3 style 绑定

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

1.8.4 示例代码

    
    
    
    
    
    


    
    


        
        
{{name}}
 


        
        
{{name}}
 


        
        
{{name}}
 

        
        
        
{{name}}
 

        
{{name}}
 


        
        
{{name}}
 



    

    

1.9 条件渲染

1.9.1 条件渲染指令

1. v-if 与 v-else
2. v-show

1.9.2 比较 v-if 与 v-show

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

1.9.3 示例代码

    
    
    
    
    


    
    

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

        
        


    

    

1.10 列表渲染

1.10.1 列表显示指令

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

1.10.2 示例代码

1. 基本列表

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

2. key 的原理

   
   
   
       
       
       
       
       
   
   
       
       
   
           
   遍历数组
           在前面添加一个赵六
           
           
   
               
   
                   {{p.name}} - {{p.age}}
                   
               
           
       
   
       
   
   

3. 列表过滤

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

4. 列表排序

   
   
   
       
       
       
       
       
   
   
       
   
           
   遍历数组
           
           升序排序
           降序排列
           原序排序
           
   
               
   {{p.name}} - {{p.age}} - {{p.sex}}
           
       
   
       
   
   

5. 更新时的一个问题

   
   
   
       
       
       
       
       
   
   
       
   
           
   人员列表
           更新马冬梅的信息
           
   
               
   
                   {{p.name}} - {{p.age}} - {{p.sex}}
               
           
       
   
       
   
   

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

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

7. 模拟一个数据监测

8. Vue.set 的使用

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

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

   
   
   
       
       
       
       
       
   
   
       
   
           
   学校信息
           
   学校名称：{{school.name}}
           
   学校地址：{{school.address}}
           
   校长是：{{school.leader}}
           
   
           
   学生信息
           在最前面添加一个爱好
           修改第一个爱好
           
   姓名：{{student.name}}
           
   性别：{{student.sex}}
           
   年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}
           
   爱好
           
   
               
   
                   {{h}}
               
           
           
   朋友们
           
   
               
   
                   {{f.name}}--{{f.age}}
               
           
       
   
       
   
   

10. 总结 Vue 的数据监测

    
    
    
        
        
        
        
        
    
    
        
        
    
            
    学生信息
            添加性别 
    
            修改性别 
    
            在列表首位添加一个朋友 
    
            修改第一个朋友的名字为：赵六 
    
            添加一个爱好 
    
            修改第一个爱好为：篮球 
    
            过滤掉爱好中的rap 
    
            
    姓名: {{ student.name }}
            
    年龄: {{ student.age }}
            
    性别: {{ student.sex }}
            
    爱好: 
            
    
                
    
                    {{ h }}
                
            
            
    朋友: 
            
    
                
    
                    {{ f.name }} - {{f.age}}
                
            
        
    
        
    
    

1.11 收集表单数据

    
    
    
    
    


    
    

        

            
            账号：

            年龄： 


            密码：

            性别：
            男
            女

            爱好：
            唱
            跳
            Rap

            所属校区
            
                请选择校区
                北京
                上海
                深圳
                武汉
            
            


            其他信息：
             


            阅读并接受《用户协议》

            提交
        
    

    

1.12 过滤器

1.12.1 理解过滤器

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

1.12.2 示例代码

    
    
    
    
    
    


    
    

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

    

    

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

    

1.13 内置指令与自定义指令

1.13.1 常用内置指令

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

1.13.2 自定义指令

1. 注册全局指令

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

2. 注册局部指令

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

3. 使用指令

   v-my-directive='xxx'

1.14 Vue实例生命周期

1.14.1 生命周期流程图

1.14.2 vue生命周期分析

1. 初始化显示

   • beforeCreate()
   • created()
   • beforeMount()
   • mounted()

2. 更新状态: this.xxx=value

   • beforeUpdate()
   • updated()

3. 销毁 Vue 实例: vm.$destory()

   • beforeDestory()
   • destoryed()

1.14.3 示例代码

    
    
    
    
    


    

        

        
n 的值: {{ n }}
        点我 n + 1 

        点我销毁 Vm
    

    

1.14.4 常用的生命周期方法

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