01 Vue基础

1. vue 概述#

Vue：渐进式JavaScript框架

vue官网 https://cn.vuejs.org/v2/guide/

声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建

• 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue

• 灵活：在一个库和一套完整框架之间自如伸缩

• 高效：20kB运行大小，超快虚拟DOM

2. vue基本使用

2.1 传统开发模式对比

原生JS

<div id="msg"></div>
<script type="text/javascript">
	var msg = 'Hello World';
	var div = document.getElementById('msg');
	div.innerHTML = msg;
</script>

jq

<div id="msg"></div>
	<script type="text/javascript" src="js/jquery.js"></script>  
	<script type="text/javascript">
		var msg = 'Hello World';
		$('#msg').html(msg);
	</script>

2.2 Vue.js之HelloWorld基本步骤

<div id="app">
	<div>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>  
<script type="text/javascript">
new Vue({
	el: '#app',
	data: {
		msg: 'HelloWorld'
	}
})
</script>

2.3 Vue.js之HelloWorld细节分析

1.实例参数分析

• el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
• data：模型数据（值是一个对象）

2.插值表达式用法

• 将数据填充到HTML标签中
• 插值表达式支持基本的计算操作

3.Vue代码运行原理分析

• 概述编译过程的概念（Vue语法→原生语法）

3. Vue模板语法

3.1 模板语法概述

1.把数据填充到HTML标签中

把数据填充HTMl标签中，这个过程叫前端渲染，产物则是静态html内容

2.前端渲染方法

• 原生js拼接字符串
• 使用前端模板引擎
• 使用vue特有的模板语法

3.原生js拼接字符串

基本上就是将数据以字符串的方式拼接到HTML标 签中

缺点：不同开发人员的代码风格差别很大，随着业 务的复杂，后期的维护变得逐渐困难起来

4.使用前端模板引擎

优点：大家都遵循同样的规则写代码，代码可读性 明显提高了，方便后期的维护。

缺点：没有专门提供事件机制。

5.vue模板语法概览

• 差值表达式
• 指令
• 事件绑定
• 属性绑定
• 样式绑定
• 分支循环结构

3.2 指令

1.什么是指令？

• 什么是自定义属性
• 指令的本质就是自定义属性
• 指令的格式：以v-开始（比如：v-cloak）

2.v-cloak指令用法

• 插值表达式存在的问题：“闪动”(经常刷新浏览器插值表达式会出问题)

• 如何解决该问题：使用v-cloak指令

• 解决该问题的原理：先隐藏，替换好值之后再显示最终的值

    <div id="app">
        <div v-cloak>{{msg}}</div>
        <div>{{1 + 2}}</div>
    </div>
    <script src="./js/vue.js"></script>
    <script type="text/javascript">
        // v-cloak指令的语法
        // 1、提供样式
        // [v-cloak]{
        //     display:none
        // }
        // 2、差值表达式标签中添加v-cloak指令
        // 背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换
  
        var vm = new Vue({
            el: '#app', // ele节点
            data: {
                msg: 'Hello Vue'
            }
        })
    </script>
  

3.数据绑定指令

• v-text

  • 填充纯文本 相比插值表达式更加简洁

• v-html 填充HTML片段

  • 存在安全问题
  • 本网站内部数据可以使用，来自第三方的数据不可以用

• v-pre 填充原始信息

  • 显示原始信息，跳过编译过程（分析编译过程）

    <div id="app">
        <div v-cloak>{{msg}}</div>
        <div>{{1 + 2}}</div>
        <div v-text='msg'>
        </div>
        <div v-html='msg1'></div>
        <div v-pre>{{msg}}</div>
    </div>
    <script src="./js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app', // ele节点
            data: {
                msg: 'Hello Vue',
                msg1: '<h1>HTML</h1>'
            }
        })
    </script>
  

4.数据响应式

• 如何理解响应式

  • html5中的响应式（屏幕尺寸的变化导致样式的变化）
  • 数据的响应式（数据的变化导致页面内容的变化）

• 什么是数据绑定

  • 数据绑定：将数据填充到标签中

• v-once  只编译一次 
  

  •  显示内容之后不再具有响应式功能
    

    <div id="app">
        <div>{{msg}}</div>
        <div v-once>{{info}}</div>
        <!-- 应用场景 -->
        <!-- 显示的信息后续不需要再修改 可以提高性能 -->
    </div>
    <script src="./js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app', // ele节点
            data: {
                msg: 'Hello Vue',
                info: '你好'
            }
        })
    </script>
  

3.3 双向数据绑定

1.什么是双向数据绑定？

用户修改表单域数据 影响模型数据

2.双向数据绑定分析

• v-model指令用法

>3.MVVM设计思想

• M(model)
• V(view)
• VM(View-Model)

3.4 事件绑定

1.Vue如何处理事件？

• v-on指令用法

  <input type=‘button' v-on:click='num++'/>

• v-on简写形式

  <input type=‘button' @click='num++'/>

2.事件函数的调用方式

• 直接绑定函数名称

  Hello

• 调用函数

  Say hi

3.事件函数参数传递

• 普通参数和事件对象

     <button v-on:click='say("hi",$event)'>Say hi</button>
  

4.事件修饰符

• .stop 阻止冒泡

•   <a v-on:click.stop="handle">跳转</a>
  

• .prevent 阻止默认行为

    <a v-on:click.prevent="handle">跳转</a> 
  

5.按键修饰符

• .enter 回车键

    <input v-on:keyup.enter='submit'>
  

• .esc 退出键
  

6.自定义按键修饰符

• 全局 config.keyCodes 对象
  • Vue.config.keyCodes.f1 = 112

3.5 属性绑定

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

• v-bind指令用法
  • 跳转

2.v-model的低层实现原理分析

演示

<div id="app">
    <input type="text" :value="msg" v-on:input="handle">
    <input type="text" :value="msg" v-on:input="msg=$event.target.value">
    <input type="text" name="" id="" v-mode="msg">
</div>
<script src="./js/vue.js "></script>
<script type="text/javascript ">
    var vm = new Vue({
        el: '#app', // ele节点
        data: {
            msg: 'hello'
        },
        methods: {
            handle: function(event) {
                this.msg = event.target.value
            }
        }

    })
</script>

3.6 样式绑定

1.class样式处理

• 对象语法

    <div v-bind:class="{ active: isActive }"></div> 
  

• 数组语法

    <div v-bind:class="[activeClass, errorClass]"></div>
  

2.style样式处理

• 对象语法

    <div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div> 
  

• 数组语法

    <div v-bind:style="[baseStyles, overridingStyles]"></div>
  

演示 class 样式处理

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .active {
            border: 1px solid red;
             100px;
            height: 100px;
        }
        
        .error {
            background-color: orange;
        }
        
        .test {
            color: blue;
        }
        
        .base {
            font-size: 28px;
        }
    </style>
</head>

<body>

    <div id="app">
        <div :class="[activeClass,errorClass,{test:istest}]">
            测试1
        </div>
        <div :class="arrClasses">
            测试2
        </div>
        <div :class="objClasses">
            测试3
        </div>
        <div class="base" :class="objClasses">
            测试4
        </div>
        <button @click="hangdle">切换</button>
    </div>
    <script src="./js/vue.js "></script>
    <script type="text/javascript ">
        // 样式绑定相关语法细节
        // 1、对象绑定和数组绑定可以结合使用
        // 2、class绑定的值可以简化操作
        // 3、默认的class如何处理？会保留
        var vm = new Vue({
            el: '#app', // ele节点
            data: {
                // 简写前
                activeClass: 'active',
                errorClass: 'error',
                istest: true,

                // 简写后
                arrClasses: ['active', 'error'],
                objClasses: {
                    active: true,
                    error: true,
                    test: true
                }
            },
            methods: {
                hangdle: function() {
                    this.objClasses.active = !this.objClasses.active
                    this.objClasses.error = !this.objClasses.error
                    this.objClasses.test = !this.objClasses.test
                }
            }
        })
    </script>
</body>

</html>

3.7 分支循环结构

1.分支结构

• v-if
• v-else
• v-else-if
• v-show

2.v-if与v-show的区别

• v-if控制元素是否渲染到页面
• v-show控制元素是否显示（已经渲染到了页面）

3.循环结构

• v-for遍历数组

    <li v-for='item in list'>{{item}}</li>
  
    <li v-for='(item,index) in list'>{{item}} + '---' +{{index}} </li>
  

• key的作用：帮助Vue区分不同的元素，从而提高性能

    <li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}} </li>
  

4.循环结构

• v-for遍历对象

    <div v-for='(value, key, index) in object'></div>
  

• v-if和v-for结合使用

    <div v-if='value==12' v-for='(value, key, index) in object'></div>
  

4. Vue常用特性

4.1 常用特性概览

• 表单操作
• 自定义指令
• 计算属性
• 侦听器
• 过滤器
• 生命周期

4.2 表单操作

1.基于vue的表单操作

• Input 单行文本
• textarea 多行文本
• select 下拉多选
• radio 单选框
• checkbox 多选框

2.表单域修饰符

• number：转化为数值

• trim：去掉开始和结尾的空格

• lazy : 将input事件切换为change事件

    <body>
        <div id="app">
            <input type="text" v-model.number="age">
            <input type="text" v-model.trim="info">
            <input type="text" v-model.lazy="msg">
            <div>{{msg}}</div>
            <button @click='handle'>点击</button>
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script type="text/javascript">
            //   表单域修饰符
            var vm = new Vue({
                el: '#app',
                data: {
                    age: "",
                    info: "",
                    msg: ""
                },
                methods: {
                    handle: function() {
                        console.log(this.age + 13);
                        console.log(this.info.length);
                    }
                }
            });
        </script>
    </body>
  

4.3 自定义指令

1.为何需要自定义指令？

内置指令不满足需求

2.自定义指令的语法规则（获取元素焦点）

Vue.directive('focus' {
	inserted: function(el) { 
		// 获取元素的焦点 
		el.focus();
	}
}) 

3.自定义指令用

<input type="text" v-focus>

4.带参数的自定义指令（改变元素背景色）

Vue.directive(‘color', {
	inserted: function(el, binding) {
		el.style.backgroundColor = binding.value.color;
	}
})

5.指令的用法

<input type="text" v-color='{color:"orange"}'>

6.局部指令

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

4.4 计算属性

1.为何需要计算属性？

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

2.计算属性的用法

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

演示

<body>

    <div id="app">
        <!-- 复杂 -->
        <div>{{msg}}</div>
        <div>{{reverseString}}</div>
    </div>
    <script src="./js/vue.js"></script>
    <script type="text/javascript">
        // 计算属性

        var vm = new Vue({
            el: '#app', // ele节点
            data: {
                msg: "Nihao"
            },
            methods: {
                handle: function(event) {}
            },
            computed: {
                reverseString: function() {
                    return this.msg.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

3.计算属性与方法的区别

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

5.5 侦听器

1.侦听器的应用场景

数据变化时执行异步或开销较大的操作

2.侦听器的用法

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

5.6 过滤器

1.过滤器的作用是什么？

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

2.自定义过滤器

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

3.过滤器的使用

<div>{{msg | upper}}</div> 
<div>{{msg | upper | lower}}</div> 
<div v-bind:id=“id | formatId"></div> 

4.局部过滤器

filters:{
	capitalize: function(){}
} 

5.带参数的过滤器

Vue.filter(‘format’, function(value, arg1){ 
	// value就是过滤器传递过来的参数
 })

6.过滤器的使用

<div>{{date | format('yyyy-MM-dd')}}</div> 

5.7 生命周期

1.主要阶段

• 挂载（初始化相关属性）
  • beforeCreate
  • created
  • beforeMount
  • mounted
• 更新（元素或组件的变更操作）
  • beforeUpdate
  • updated
• 销毁（销毁相关属性）
  • beforeDestroy
  • destroyed

2.Vue实例的产生过程

• beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
• created 在实例创建完成后被立即调用。
• beforeMount在挂载开始之前被调用。
• mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
• beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
• updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
• beforeDestroy 实例销毁之前调用。
• destroyed 实例销毁后调用。

5.8 vue数组方法

1.变异方法(修改原有数据)

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

2.替换数组(生成新的数组)

• filter()
• concat()
• slice()

3.修改响应式数据

• Vue.set(vm.items, indexOfItem, newValue)
• vm.$set(vm.items, indexOfItem, newValue)
  • 参数一表示要处理的数组名称
  • 参数二表示要处理的数组的索引
  • 参数三表示要处理的数组的值