自定义指令
我们可以通过自定义指令为标签操作属性,样式,事件等内容,但是指令要求以”v-”开头
例如:
<input type="text" v-foc>
<input type="text" v-sty>
directives:{
foc:{//修改事件
inserted:function(el){
el.focus()
}
},
sty:{//修改样式
inserted:function(el){
el.style.backgroundColor="pink"
}
}
}
参数
el:获取绑定指令的元素 |
binding:一个对象 |
name:获得v-后面的指令名 |
value :获得属性值 |
exprestion:被绑定的属性关键字 |
arg:获得付给的变量名 |
modifiers:获得后缀子属性名称,返回一个对象 |
钩子函数
inserted 被绑定元素被插入父节点时调用
bind 指令第一次绑定到元素时调用,只调用一次
update 被绑定元素在模板更新时调用
compoentUpdated 被绑定元素在模板完成一次更新周期时调用
unbind指令与元素解绑时进行调用,只调用一次
例如:
bind:function(el,binding){
console.log(el)
console.log(binding.name)
console.log(binding.value)
console.log(binding.expression)
console.log(binding.arg)
console.log(binding.modifiers)
el.value=binding.value
for(var key of Object.keys(binding.modifiers)){
if(key=="a"){
el.style.backgroundColor="green"
}
}
}
混入
混入类似于继承,可以实现多继承,让vue可以拿到其他对象下的属性和方法,提供代码利用率,减少代码的重复写作
例如:
var obj={
methods:{
fun: function(){
console.log("这是obj的函数")
}
}
}
new Vue({
el:"#app",
mixins:[obj,emp],//数组下可以继承多个对象
})
<div id="app">{{fun()}}</div>
路由
路由是用来跳转路径的,但是vue是单页面开发,所以路由没有跳转新页面,而是切换了不同组件进行显示
例如:
//创建两个页面的组件
var login={template:'<div><h2>这是登录页面</h2><div>'}
var res={template:'<div><h2>这是注册页面</h2><div>'}
var routes=[//配置组件的路径
{path:'/a',component:login},
{path:'/b',component:res}
]
var router=new VueRouter({routes})//创建路由对象
new Vue({
el:"#app",
router//应用路由
})
<!--router-view显示组件-->
<router-link to="/a">登录</router-link>超链接跳转
<router-link to="/b">注册</router-link>
<!--router-view显示组件-->
<router-view></router-view>
路由的属性参数
to:定义跳转路径 |
replace:设置导航跳转后,不被history对象记录 |
tag:让路由更换html标签显示 |
active-class:路由被激活的样式,但是必须是class属性名 |
event:改变路由所触发的事件,默认是点击 |
append:设置路由查找子文件夹路径 /a/b |
例如:
<router-link to="/a" replace tag="h2" active-class="box"
event="mouseover">登录</router-link>
生命周期
生命周期的过程分为:创建前,创建后,挂载前,挂载后,更新前,更新后,销毁前,销毁后
beforecreate:组件刚好被创建的时候调用,在此所有变量和函数都未初始化
created:在组件创建完成后调用,此时变量和函数都已初始化完毕
beforeMount:在组件挂载前调用,此时el可以寻找到标签元素
mounted:在组件挂载后调用,此时可以操作dom元素
beforeUpdate:在组件更新前调用,此时可以拿到新旧的虚拟dom做对比
Updated:在组件更新后调用,此时也可以操作dom,但是拿的是新的dom值
beforeDestroy:在组件销毁前调用,用来解除组件的数据,例如销毁轮播图,变量,函数等
destroyed:在组件销毁后调用,此时组件已被销毁,无法调用组件了
例如:
new Vue({
el:"#app",
data:{str:"hello"},
methods:{
fun:function(){
console.log("函数被执行了")
}
},
beforeCreate:function(){
console.log("---------创建前---------")
},
created:function(){
console.log("---------创建后---------")
},
beforeMount:function(){
console.log("---------挂载前---------")
},
mounted:function(){
console.log("---------挂载后---------")
},
beforeUpdate:function(){
console.log("---------更新前---------")
},
Updated:function(){
console.log("---------更新后---------")
},
beforeDestory:function(){
console.log("---------销毁前---------")
},
destoryed:function(){
console.log("---------销毁后---------")
console.log(this.el)
console.log(this.str)
consolr.log(this.fun)
}
})