Directive 指令
v-for:
<li v-for=’food in foodList’>{{fppd}}
{{}}
new Vue({
el:
data:{
foodList:[…]
}
})
v-bind:
:src
:class=’klass’
new Vue({
el:
data:{
Klass:’btn btn-default’
}
})
:class ={active:isActive}
new Vue({
el:
data:{
isActive:true
}
})
v-on:
v-on:click=’CLICK’
new Vue({
el:
methods:{
CLICK(){
Console.log(‘clicked’)
}
}
}
})
示例二：
v-on=’{ mouserenter:onEnter,mouseleave:onLeave }’
示例三：
<form v-on:submit=’onSubmit’>
</form>
示例四：
<form v-on:submit=’onSubmit($event)’>
</form>
示例五：//vue把这个也封装了
<form v-on:submit.prevent=’onSubmit($event)’>
</form>
示例六:
<form v-on:keyup=’fun’>
</form>
示例七：
<form v-on:keyup.enter=’fun’>
</form>
v-model:
v-model.lazy //blur的时候才会触发
v-model.trim
v-model.number //字符串转字母
computed:{
sum(){
return this.math + this.pyshics +this.english
}
}
组件：
Vue.component(‘alert’,{
Template:
Methods:{
}
})
<alert><alert/>
new Vue({
el:’#seg1’
})
new Vue({
el:’#seg2’
})
父子通信：
props:[‘a’,’b’]
子父通信：
$emit()
任意平行间组件通讯：
事件调度器 var Event = new Vue()
“我说， 花花说” 案例
$.emit(‘xxx’,…)
$.on(‘xxx’,…)
Filter:
使用管道符 |
{{length|meter}}
Vue.filter(‘meter‘,function(val){
return val + ‘元‘
})
自定义指令：
自定义指令前面要加v，格式是v-directive
定义的时候就不用了
自定义指令配置传参：
比如我想：
我可以：
。。。（这里写的不详细，以后可以再来看）
组合Mixins：
官网示例：
var mixin = {
created: function () { console.log(1) }
}
var vm = new Vue({
created: function () { console.log(2) },
mixins: [mixin]
})
// => 1
插槽Slots:
Vue-Router:
引入vue-router.js
Var routes = [
{
Path:’/’,
Component:{
Template:`
<div>
<h1>首页</h1>
</div>
`
},
{
Path:’/about’,
Component:{
Template:`
<div>
<h1>关于我们</h1>
</div>
`
}
}
]
Var router = new VueRouter({
Routes:routes
})
New Vue({
El:’#app’,
Router:router
})
<Router-link to=’/’></Router-link >
传参：
:params
{{$route.params.name}}
子路由：
Children：{
Path:
Component:
}
手动访问和传参：
this.router.push(‘/about’)
this.router.push({name:’user’,params:{name:’..’}})
命名视图:
Components:{
A:{
Template:``
}
B:{
Template:``
}
}
<Route-view name=’A’
<Router-view name=’B’
导航钩子：
Router.beforeEach(function(to,from,next){})
Router.afterEach(function(to,from,next){})
路由匹配：
Console.log(‘to.matched:’,to.matched.some(function(item){
}))
元数据:
Path:’/’,
Meta:{
Login_required.true
}
//item.meta.Login_required
原文：https://www.cnblogs.com/eret9616/p/9326767.html