Vue.js特性:渐进式技术栈
- 轻量级的框架
- 双向数据绑定
- 指令
- 插件化
Vue实例书写模板:
new Vue({
el: '#app',
template: '<h1>hello {{msg}}</h1>',
data: {
msg: 'world'
}
})
- 访问Vue实例的属性:
变量名.$Vue属性名
- 访问 Vue 实例
data
元素的属性:
变量名.属性名
生命周期钩子
有很多,具体查看官方文档,经常使用的有:
-
created:实例创建后,未挂载,
$el
还不可用 -
mounted:挂在到实例后调用(相当于 jQuery 的
$(document).ready()
) - beforeDestory:实例销毁前调用,用于解绑监听事件
用法/插值表达式
{{}}
中还可以使用 JS 表达式进行简单的运算或三元运算
注:文本插值的形式,其中不能书写表达式,支持单个表达式(var a=6;
是多行表达式,var a; a=6;
),不能使用流控制(如:if
等,使用三元运算符)
过滤器(使用管道符‘|’)
语法:{{ data | filter1 | filter2 }}
(可以多次过滤)
用于格式化文本(字母大小写,货币位号符,时间等)
注:还可以传参 {{ data | formatData(a,b) }}
其中第一个参数和第二个参数,分别对应实例中过滤器的第二、三个参数,实例中的第一个参数必须是 data
中数据( Vue 实例的 filter
属性)
指令和事件:快速完成 DOM 操作、循环渲染、显示和隐藏
-
v-text=''
:解析文本和{{}}
作用一样 -
v-html=''
:解析html -
v-bind:属性名=''
:动态更新HTML元素上的属性,如id
,class
等 -
v-on:动作名='函数名'
:绑定事件监听器
函数名:方法名写在 Vue 实例中的methods
属性内,函数形式,函数内的 this 指向的是当前 Vue 实例本身,可以直接使用this.xxx
形式访问或者修改数据。注:当函数中还有函数时,就要使用箭头函数,要不然无法访问当前 Vue 实例
Vue 中用到的所有方法都定义到 methods
中
语法糖
在不影响功能的前提下,使用简洁方法实现同样效果
v-bind:
====> :
(冒号)
v-on:
====> @
计算属性
- 遇到复杂逻辑时,最后返回一个结果,还可以依赖多个 Vue 实例的数据:只要其中任意数据变化,计算属性就会重新执行,视图也会更新
-
getter和setter:每个计算属性都会有这两个方法,默认使用
getter
方法,setter
手动修改计算属性的值时触发 - 计算属性还可以用于动态设置元素的样式名称
class
和内联样式style
小技巧:
- 计算属性可以依赖其它计算属性
- 不仅可以依赖当前 Vue 实例,还可以依赖其它 Vue 实例
-
计算属性缓存:计算属性都可以调用 methods 中的方法实现,如:
{{函数名()}}
- 页面方法:如果调用方法,只要页面重新渲染,会重新执行
- 计算属性:不管是否渲染,所依赖数据未发生变化,就永远不变
计算属性依赖缓存,当遍历大数组和做大量计算时,应当使用计算属性
v-bind绑定class和style
- 绑定class
-
对象语法:
v-bind:class="{ '类名':data属性名 }"
对象的键是类名,值时布尔值(true:类名存在;false:类名不存在)当表达式过长或逻辑复杂时,还可以绑定计算属性 - 数组语法:当需要多个 class 时,可以使用数组语法。数组成员为 data 属性对应类名
-
数组语法、对象语法混用:第一个成员是对象,第二个成员是数组,如:
:class="[{ active:isActive },errorClass]"
-
对象语法:
- 绑定内联样式:
v-bind:style
方法与 class 类似(对象语法、数组语法)
对象语法:键代表 style 属性,值代表属性对应的 data 属性
注意:CSS 属性名称使用驼峰命名或短横线分隔命名
切记:Vue 中要是大写字母都会转换为 “-” 加小写,如:dsfADbcG
====>dsf-a-dbc-g
使用: style 时,Vue.js 会自动给特殊的 CSS 属性名称增加前缀,比如:transform 无需再添加前缀
Vue.js内置指令
基本指令
-
v-cloack
: 一般与display:none
进行结合使用
作用:解决页面初始化慢导致的闪动问题 -
v-once
: 只渲染一次,后续都不会再重新渲染
条件渲染指令
-
v-if
、v-else-if
、v-else
:用法为连着出现在三个标签内,哪个满足条件显示哪个,后接布尔值,如:
<p v-if='6>3'>1</p>
<p v-else-if='3<6'>2</p>
<p v-else>3</p>
//此时页面显示1
-
v-show
:知识改变 CSS 属性 display 后接布尔值(true:显示;false:消失)
注:v-if
和v-show
的区别-
v-if
:实时渲染:页面显示渲染,不显示移除 -
v-show
:永远存在页面中,只是改变 CSS 的display
值
-
-
v-for
:列表渲染。遍历多个对象;遍历一个对象的多个属性
注:当 Vue 在渲染页面时,出于效率考虑,会服用已有元素,只会渲染了变化的元素
解决方法:加 key ,唯一。提供 key 值决定是否复用该元素
Vue检测不到数组的变动:1. 改变数组指定项 Vue.set( app.arr, 1, "car")
2. 改变数组长度 app.arr.splice(1)
方法和事件
如果方法中带有参数,调用没加括号,默认传入原生事件 event
所以:方法中有参数时,调用加括号
修饰符
-
stop
:阻止事件冒泡。如:v-on:click.stop=''
-
prevent
:阻止默认事件,谁的默认事件给谁加 -
self
:只是作用在元素本身,而非子元素时调用 -
one
:只执行一次的方法
监听键盘事件 @key.13=''
===> 指定的 keyCode
v-model:用于表单类元素上双向绑定事件
input
和 textarea
注:所显示的值只依赖于所绑定的数据,不再关心初始化时的 value
- 单选按钮:
- 单个单选按钮,直接用
v-bind
绑定一个布尔值(用v-model
不行) - 如果是组合使用,就用
v-model
来配合value
使用,绑定选中的单选框的value
值,此处绑定的初始值value
随便给
- 单个单选按钮,直接用
- 复选框:
- 单个复选框:直接用布尔值,可以用
v-model
和v-bind
- 多个复选框:如果是组合使用就用
v-model
配合value
使用,v-model
绑定一个数组,如果绑定的是字符串,则会转为true
、false
,与其绑定的复选框的checked
属性相对应。
- 单个复选框:直接用布尔值,可以用
- 下拉框:
- 单选:绑定的
value
值初始化可以为数组、字符串,有value
则匹配value
值,无则匹配text
值 - 多选:就需要
v-model
配合value
使用,v-model
绑定一个数组,与复选框类似 - v-model 一定是绑定在 select 标签上
- 单选:绑定的
总结:
- 单选:初始化最好给定字符串,
v-model
绑定静态字符串或布尔值 - 多选:初始化最好给定一个数组
修饰符
-
lazy
:v-model
与input
绑定时,默认同步数据,加lazy
可使其失去焦点或回车后更新 -
number
:将输入的字符串转化为 number 类型 -
trim
:自动过滤首尾空格
组件
作用:提高代码复用性(挂载都用变量名标签)
- 全局注册:优点:所有实例都可以用;缺点:权限大,容错率低
Vue.component('变量',{
template: '组件'
})
- 局部注册:在 Vue 实例中定义
new Vue({
el: '#app',
components: {
'变量名': {
template: '组件'
}
}
})
- Vue 组件模板在某些 html 标签中受限,如:
<table>
<table><tbody is='变量名'></tbody></table>
注意:1. 必须使用小写字母加 ‘-’ 形式命名;2. template
中内容必须被一个 DOM 元素包裹,可嵌套;3. 在组件定义中,除了 template
,还可以有 data
、computed
、methods
;4. 其中 data
在组件中必须是一个方法
父组件向子组件传递数据
- 在子组件中使用
props
从父组件接收参数。注:在props
定义的属性,都可以在组件中直接使用 -
props
来自父组件,而组件中data return
的数据是子组件自己的,作用域是组件本身,可以在template
、computed
、methods
使用 -
props
的值有两种:一种是字符串数组;一种是对象 - 可以使用
v-bind
动态绑定父组件内容
v-bind 使用与否向子组件传递数据区别:使用v-bind
:会将后边内容转化为可转化的类型;不使用v-bind
:传递数据时,默认字符串
单向数据流:通过 props 传递数据单向,子传父不行
目的:解耦。避免子组件修改父组件状态
两种情景:
- 父组件传递初始值进来,子将其作为初始值保存起来,在自己作用域下随意使用(在 data 中再申明数据,应用父 props )
- props 作为需要被转变的原始值传入(使用计算属性进行重算)
命名规则:Vue中使用驼峰
- 在组件中的 html 必须使用短横线命名
- 在组件中,父组件给子组件数据,必须短横线。在 template 中,必须使用驼峰命名
- 在组件中的 data 中,用 this.xxx 引用时,只能是驼峰命名
子组件给父组件传递数据
子组件通过 $emit()
发布订阅模式,父组件订阅该模式:$emit('fn',参数1)
参数1传入父组件函数
$emit()
的代码 实际上会传一个 input 事件, input 后的参数就是传递给 v-model 绑定的属性值
v-model其实是一个语法糖:1. v-bind 绑定一个 value 元素;2. v-on 指令给当前元素绑定 input 事件
要使用 v-model 必须:1. 接收一个 value 属性;2. 在有新的 value 触发 input 事件
非父组件通信:可以使用一个空 Vue 实例作为中转
父: var bus=new Vue()
子A: bus.$emit('变量名',x)
触发A事件
子B: bus.$on('变量名',function(){})
子B创建的钩子监听
父链:this.$parent
子链:通过给子组件添加 ref 属性增加索引 ref='a'
。this.$refs.c
自定义指令
与组件相同,分为全局注册和局部注册(组件中使用 directives )
提供的钩子函数:
-
bind
:只调用一次,指令第一次绑定到元素时 -
inserted
:绑定元素插入父节点时调用 -
update
:绑定元素所在模板更新时调用,不管绑定值是否变化 -
componentUpdated
:完成一次更新周期调用 -
unbind
:解绑,只调用一次
钩子函数的参数:
-
el
:指令所绑定元素 -
binding
:一个对象包含以下属性:name
:指令名;value
:指令绑定值;oldValue
:指令绑定的前一个值;expression
:绑定值的字符串形式;arg
:传给指令的参数;modifiers
:包含修饰符的对象 -
vnode
:Vue 编译生成的虚拟节点 -
oldVnode
:上一个虚拟节点,仅在update
和componentUpdated
钩子中可用
render函数
template
可以在 DOM 结构中的 <script> 内,在 JS 文件中 component
使用 template: '#id'
引入。 注: template 下只允许有一个子节点
- 在 render 函数的方法中,参数必须是
createElement
,类型为Function
- render 函数:在该函数中
return
的是createElement
函数 - 在
createElement
函数中第一个参数(必选)可以是string
、Object
、Function
-
string
: html 标签 -
object
:一个含有数据选项的对象{ template : '<p></p>' }
-
function
:方法返回含有数据选项的对象
-
- 第二个参数可选:数据对象,只能是 Object 。可以有
class:{类名:true}
、style:{}
、attrs:{id:'id名'}
、domProps:{innerHTML:'<span></span>'}
(用来写原生的 DOM 属性) - 第三个参数可选: string 或 array
//createElement函数的三个参数
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串,组件选项对象,或者
// 解析上述任何一种的一个 async 异步函数。必需参数。
'div',
// {Object}
// 一个包含模板相关属性的数据对象
// 你可以在 template 中使用这些特性。可选参数。
{
// (详情见下一节)
},
// {String | Array}
// 子虚拟节点 (VNodes),由 `createElement()` 构建而成,
// 也可以使用字符串来生成“文本虚拟节点”。可选参数。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
this.$slots在render函数中
- 第三个参数就是 vnode
var header=this.$slots.header
-
createElement('header',header)
'header' 标签;header 第三个参数,数组
注意:render函数中第二个参数,绑定监听事件时
return createElement('input',{
on:{
input:function(event){
var a=this //此时的this指的是window
}
}
})
所以要在 render 函数中指定 Vue 实例,如:
render:function(createElement){
var self=this //此时的 this 就是 Vue 实例
}
作用域插槽在 render 函数
scope 最好写在 template
标签
scope 后边是 render 函数传来的数据
return createElement('div',this.$scopedSlots.default({
text:'我是子组件数据' // scope后的数据
}))
函数化组件
标记组件为 functional
,当该值为 true 时,意味它是无状态 (没有响应式数据),无实例 (没有 this
上下文)。
此时, context 转变,作为 render 函数的第二个参数,this.$slots.default
更新为 context.children
,之后 this.level
更新为 context.props.level
。
vue-router
- 安装
npm install --save vue-router
- 引用
import router from 'vue-router'
使用Vue.use(router)
- 配置路由文件,在 Vue 实例中注入
//配置路由文件
new Vue({
router : [{
path : '/', //跳转路径
component : //跳转组件
}]
})
//在 Vue 实例中注入
new Vue({
el : '#app',
router : router,
component : { App },
template : '<App></App>'
})
- 确定视图加载位置
<router-view></router-view>
vue-router 路由跳转
<router-link to='/'><router-link>
vue-router 传参数
- 必须在路由内添加路由的
name
- 必须在
path
后添加:/+传递的参数
(配置路由文件)
<router-link :to="{
name : xxx,
params : { msg: yyy }
}"></router-link>
读取参数: $route.params.xxx
方式:====/helloworld/xxx
<router-link :to="{
path : '/helloworld',
query : { msg: yyy }
}"></router-link>
方式:====/helloworld?name=xxx&msg=yyy
(不常用)
Axios
- 安装
npm install axios
- 引入加载
import axios from 'axios'
- 将
axios
全局挂载到 Vue 原型import Vue from 'vue'
Vue.prototype.$http=axios
- 发请求
this.$http.get('xxx').then(function(res){}).catch(function(err){console.log(err)})
两种传参形式:
axios.get( '/user' , { params : { ID : 1234 } } )
-
axios.get( '/user' , { ID : 1234 } )
(只有一个参数时)或axios.get('xxxxx?page=1&limit=15')
Axios之POST
post 传递数据两种格式:
form-data?page=1&limit=15
x-www-form-urlencoded{page:1,limit:10}
在 axios 中, post
请求接收的参数必须是 form-data
qs 插件------- qs.stringify
Vuex之store
用来管理状态,共享数据,在各个组件之间管理外部状态
- 引入 Vuex ,并
use
方法使用 - 创建状态仓库(
store
,state
不能改)
var store=new Vuex.Store({
state:{xxx:xxx},//状态
mutations:{}
})
- 直接通过
this.$store.state.xxx
拿到全局状态
Vuex相关操作
View
====> actions
(非必须,可添加异步)====> mutations
====> state
====> View
- 在
store
仓库中使用mutations:{a:function(state){}}
调用:this.$store.commit(xxx)
此处xxx
是mutations
中定义的方法名 -
store
中定义actions:{b:function(context){context.commit('a')}}
(可有可无,可添加异步)
调用:this.$store.dispatch(xxx)
-
store
中定义getters:{c:function(state){return xxxx}}
调用:this.$store.getters.xxxx
(判断状态)
注意: actions
提交的是 mutations
,而不是直接变更状态; actions
可以包含异步操作,但 mutation
只能同步操作
mixin
优先使用组件本身的属性