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指令用法
- 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.事件函数的调用方式
-
直接绑定函数名称
-
调用函数
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)
- 参数一表示要处理的数组名称
- 参数二表示要处理的数组的索引
- 参数三表示要处理的数组的值