vue生命周期
beforeCreated 组件实例刚刚被创建
created 实例创建完成
beforeMount 模板编译之前
mounted 模板编译之后*
beforeUpdate 组件更新之前
updated 组件更新完毕*
beforeDestory 组件销毁之前
destory 组件销毁之后
---
vue循环
* v-for="value in list"
{{value}}
也可以默认添加重复数据
* v-for="(value,index) in list"
第一个值为value
第二个为index
* track-by="$index" ==> :key="index"
提高信息
自定义键盘信息
* vue 1.0
Vue.directive('on').keyCodes.ctrl =13
* vue 2.0
Vue.config.keyCodes.ctrl = 17
过滤器
* 内置的过滤器全部删除
* 使用自定义过滤器
---lodash 工具库
* 自定义过滤器
Vue.filter('tofo',function(s,r){
});
{{number | tofo('12',"ss")}}
组件通信
vm.$emit
vm.$on
- 子组件想拿到父组件的数据
通过 props
-* 2.0中不支持子组件(直接)修改父组件中的数据
现在想同步更改数据？
a).父组件给子组件传递的时候传递一个数据的时候传递一个对象 {obj}
给子组件绑定一个 :msg='json'
然后组件components 中使用 props:['json'] 进行获取
获取以后就可以对json中的数据进行更改了
可以单一事件管理组件通信
<body>
<div id="app">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</body>
<script>
var Event = new Vue();
var A = {
template:`
<div>
<h1>我是A组件</h1> -》 {{a}}
<input type='button' value="把A数据给C" @click="send"/>
</div>
`,
data(){
return {
a:"我是a数据"
}
},
methods:{
send(){
Event.$emit("a-msg",this.a)
}
}
}
var B = {
template:`
<div>
<h1>我是B组件</h1> -》 {{a}}
<input type='button' value="把B数据给C" @click="send"/>
</div>
`,
data(){
return {
a:"我是b数据"
}
},
methods:{
send(){
Event.$emit('b-msg',this.a)
}
}
}
var C = {
template:`
<div>
<h1>我是C组件</h1>
<p>这是A的数据:{{a}}</p>
<p>这是B的数据:{{b}}</p>
</div>
`,
data(){
return {
a:'',
b:''
}
},
mounted(){
Event.$on('a-msg',function(a){
this.a =a ;
}.bind(this));
Event.$on('b-msg',function(a){
this.b =a ;
}.bind(this));
}
}
new Vue({
el:"#app",
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
</script>
2.0中的动画
<transition name="fade">
运动东西(元素，属性、路由....)
</transition>
class定义:
.fade-enter{} //初始状态
.fade-enter-active{} //变化成什么样 -> 当元素出来(显示)
.fade-leave{}
.fade-leave-active{} //变成成什么样 -> 当元素离开(消失)
<style>
p{
width:300px;
height:300px;
background: red;
}
.fade-enter-active, .fade-leave-active{
transition: 1s all ease;
}
.fade-enter-active{
opacity:1;
width:300px;
height:300px;
}
.fade-leave-active{
opacity:0;
width:100px;
height:100px;
}
.fade-enter,.fade-leave{
opacity:0;
width:100px;
height:100px;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:false
},
methods:{
beforeEnter(el){
console.log('动画enter之前');
},
enter(el){
console.log('动画enter进入');
},
afterEnter(el){
console.log('动画进入之后');
el.style.background='blue';
},
beforeLeave(el){
console.log('动画leave之前');
},
leave(el){
console.log('动画leave');
},
afterLeave(el){
console.log('动画leave之后');
el.style.background='red';
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show">
<transition name="fade"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
>
<p v-show="show"></p>
</transition>
</div>
配合animate.css的使用
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<div id="xo" v-show="show"></div>
</transition>
多个元素一块运动
<transition-group enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<div class="xo" v-show="show" :key='1'></div>
<div class="xo" v-show="show" :key='2'></div>
</transition-group>
vue-router 2.0
<div id="app">
<ul>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</ul>
<div>
<router-view></router-view>
</div>
</div>
<template id="news">
<div>
<h1>这是新闻页</h1>
<ul>
<router-link to="/liuyang/age/10">刘洋</router-link>
<router-link to="/xiaoming/age/33">小明</router-link>
<router-link to="/xiaohong/age/20">小红</router-link>
</ul>
<router-view></router-view>
</div>
</template>
<template id="user">
<div>
{{$route.params}}
</div>
</template>
<script>
var Home = {
template:"<h1>这是主页</h1>"
}
var News = {
template:"#news"
}
var User = {
template:"#user"
}
var routes = [
{path:'/home',component:Home},
{
path:'/news',
component:News,
children:[
{
path:'/:username/age/:age',
component:User
}
]
},
{path:'*',redirect:'/home'}
];
var router = new VueRouter({
routes:routes
});
new Vue({
router:router,
el:"#app"
})
</script>