Vue全家桶之Vue基础
一、Vue概述
Vue:渐进式JavaScript框架
声明式渲染-组建系统-客户端路由-集中式状态管理-项目构建
二、Vue基本使用
1.传统开发模式
原生JS
jQuery
2.Vue.js之Hello World基本步骤
<div id="app">
<div>{{msg}}</div>
</div>
new Vue({
el : '#app',
data : {
msg : 'HelloWorld'
}
})
3.Vue.js之Hello World细节分析
实例参数分析
el: 元素的挂载位置(值可以是css选择器或者dom元素)
data:模型数据(值是一个对象)
插值表达式用法
将数据填充到HTML标签中
插值表达式支持基本的计算操作
Vue代码运行原理分析
概述编译过程的概念(Vue语法-原生语法)
三、Vue模板语法
1.模板语法概述
如何理解前端渲染?
把数据填充到HTML标签中。
前端的渲染方式:
原生js拼接字符串
使用前端模板引擎
使用vue特有的模板语法
原生jd拼接字符串:
基本上就是将数据以字符串的方式拼接到HTML标签中。
使用前端模板引擎:
基于art-template的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。
模板语法概览:
插值表达式
指令:
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model 双向绑定
v-slot
v-pre
v-cloak 解决闪动问题
v-once
事件绑定
属性绑定
样式绑定
分支循环结构
2.指令
什么是指令?-什么是自定义属性、指令的本质就是自定义属性、指令的格式:以v-开始
①v-cloak指令用法
插值表达式存在闪动问题，使用v-cloak指令可以解决
解决原理:先隐藏，替换好值之后再显示最终的值。
示例:
提供样式
[v-cloak] {
display :none;
}
在表达式所在标签添加v-cloak指令
<div v-cloak>
{{msg}}
</div>
②数据绑定-将数据填充到标签
v-text 填充纯文本，无闪动
<span v-text="msg"></span>
v-html 填充html片段，存在安全问题
<div v-html="html"></div>
v-pre 填充原始信息，显示原始信息，跳过编译过程
<span v-pre>{{msg}}</div>
③数据响应式
v-once 只编译一次，显示内容之后不再具有响应式功能，应用场景:如果显示的信息后续不需要修改，可使用v-once,可提高性能。
3.数据双向绑定指令
v-model指令
<input type="text" v-model="uname"/>
限制input select textarea components
MVVM设计思想,model-view-view,model
4.事件绑定
Vue如何处理事件?
v-on指令，简写@
<input type='button' v-on:click='num++' />
<input type='button' @click='num++' />
事件函数的调用方式:
直接绑定函数名
<button v-on:click='say'></button>
调用函数
<button v-on:click='say()'></button>
事件函数参数传递:
普通参数和事件对象
<button v-on:click='say("hi",$event)'></button>
事件修饰符:
.stop阻止冒泡
<a @click.stop="handle">跳转</a>
.prevent阻止默认行为
<a @click.prevent="handle">跳转</a>
按键修饰符:
.enter回车键
<input @keyup.enter='submit'>
.esc退出键
<input @keyup.delete='handle'>
自定义按键修饰符:
全局config.keyCodes对象
Vue.config.keyCodes.f1 = 112
规则:自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应的event.keyCode值。
5.属性绑定
①Vue如何动态处理属性?
v-bind指令用法,简写:
<a v-bind:href='url'>跳转</a>
缩写<a :href='url'>跳转</a>
②v-model的底层实现原理分析
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
6.样式绑定
①class样式处理
对象语法
<div v-bind:class="{ active:isActive}"></div>
数组语法
<div v-bind:class="[activeClass,errorClass]"></div>
②style样式处理
对象语法
<div v-bind:style="{color: activeColor,fontSize:fontSize}"></div>
数组语法
<div v-bind:style="[baseStyles,overridingStyles]"></div>
7.分支循环结构
①分支结构
v-if
v-else
v-else-if
v-show
②v-if 和v-show区别
v-if控制元素是否渲染到页面
v-show控制元素是否显示(已经渲染到了页面)
③循环结构
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>
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>
四、基础案例
Tab选项卡
五、Vue常用特性
1.常用特性概览
表单操作
自定义指令
计算属性
侦听器
过滤器
声明周期
2.表单操作
①基于Vue的表单操作
input 单行文本
textarea 多行文本
select 下拉多选
radio 单元框
checkbox 多选框
②表单域修饰符
number : 转化为数值
trim : 去掉开始和结尾的空格
lazy : 将input事件切换为change事件
<input v-model.number="age" type="number">
3.自定义指令
①为何需要自定义指令?
内置指令不满足需求
②自定义指令的语法规则(获取元素焦点)
Vue.directive('focus' {
inserted : function (el) {
//获取元素的焦点
el.focus();
}
})
③自定义指令用法
<input type="text" v-focus>
④带参数的自定义指令(改变元素背景色)
Vue.directive('color', {
inserted: function (el,binding) {
el.style.backgroundColor = binding.value.color;
}
})
⑤指令的用法
<input type="text" v-color='{color: "orange"}'>
⑥局部指令，只能在本组件中使用，与data同级
directives:{
focus : {
inserted: function (el) {
el.focus()
}
}
}
4.计算属性
①为何需要计算属性？
表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁。
②计算属性的用法:
computed: {
reversedMessage: function () {
return this.msg.split('').reverse().join('')
}
}
③计算属性与方法的区别
计算属性是基于它们的依赖进行缓存的
方法不存在缓存
5.侦听器
①侦听器的应用场景
数据变化时执行异步或开销较大的操作
②侦听器的用法
watch:{
firstName: function (val) {
this.fullName = val + this.lastName;
},
lastName : function (val) {
this.fullName = this.firstName + val;
}
}
案例:验证用户名是否可用
需求:输入框输入姓名，失去焦点时验证是否存在，如果已经存在，提示从新输入，如果不存在，提示可以使用。
分析:
通过v-model实现数据绑定
需要提供提示信息
需要侦听器监听输入信息的变化
需要修改触发的事件
6.过滤器
①过滤器的作用
格式化数据，比如将字符串格式转化为首字母大写，将日期格式转化为指定的格式等。
②自定义过滤器
Vue.filter('过滤器名称'，function (value) {
//过滤器业务逻辑
})
③过滤器的使用
<div>{{msg|upper}}</div>
<div>{{msg|upper|lower}}</div>
<div v-bind:id="id | formatId"></div>
④局部过滤器
filters: {
capitalize:function () {
}
⑤带参数的过滤器
Vue.filter('format'，function (value,arg1) {
//value就是过滤器传递过来的参数
})
⑥过滤器的作用
<div>{{date | format('yyyy-MM-dd')}}</div>
案例:使用过滤器格式化日期
7.生命周期
①主要阶段
挂载(初始化相关属性)
beforeCreate
created
beforeMount
mounted
更新(元素或组件的变更操作)
beforeUpdate
updated
销毁(销毁相关属性)
beforeDestroy
destroyed
②Vue实例的产生过程
beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
created 在实例创建完成后被立即调用。
beforeMount在挂载开始之前被调用。
mounted el 被新创建的vm.$el替换，并挂载到实例上去之后会调用该钩子。
beforeUpdate数据更新时调用，发生在虚拟DOM打补丁之前。
updated由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy实例销毁之前调用。
destroyed实例销毁后调用。
六、综合案例
图书管理
1.补充知识
①变异方法(修改原有数据)
push() 添加数组至末尾
pop() 删除最后一个元素
shift() 删除第一个元素
unshift() 添加元素至开头
splice()
sort() 排序
reverse() 反转数组
②替换数组(生成新数组)
filter()
concat() 合并数组
slice() 拷贝数组
③修改响应式数据
Vue.set(vm.items,indexOfitem,newValue)
Vue.$set(vm.items,indexOfitem,newValue)
参数一表示要处理的数组名称
参数二表示要处理的数组索引
参数三表示要处理的数组的值
常用特性应用场景:
过滤器(格式化日期)
自定义指令(获取表单焦点)
计算属性(统计图书数量)
侦听器(验证图书存在性)
生命周期(图书数据处理)
