vue03
vue过渡
-
自带
动画:
.fade-transition{
transition: 1s all ease;
}
进入：
.fade-enter{
opacity: 0;
}
离开：
.fade-leave{
opacity: 0;
transform: translateX(200px);
} -
animate.css
引入animate.css (接着用上面标签)然后在标签里加上class='animated',然后设置vue里的transtions属性 transitions:{ //定义所有动画名称 fade:{ enterClass:'zoomInLeft',(animate.css的类) leaveClass:'zoomOutRight' } }
vue组件
全局组件
var Aaa=Vue.extend({
template:'我是标题3
'
});
Vue.component('aaa',Aaa);
*组件里面放数据:
data必须是函数的形式，函数必须返回一个对象(json)
var Aaa=Vue.extend({
data(){
return {
msg:'我是标题^^'
};
},
template:'{{msg}}
'
});
Vue.component('aaa',Aaa);
局部组件
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
aaa:Aaa
}
});
--------------------------------------
另一种编写方式:
Vue.component('my-aaa',{
template:'好'
});(全局)
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
template:'标题2
'
}
}
});(局部)
配合模版
1. template:'标题2->{{msg}}
'
2. 单独放到某个地方
a).
js里边:template:'#aaa'
b).
标题1
-
{{val}}
动态组件
组件数据传递
-
子组件就想获取父组件data
在调用子组件： 父组件模版里给子组件绑定个属性父组件的components:{ 子组件'bbb':{ props:['mmm'], template:' 我是bbb组件->{{mmm}}
' } }
props两种参数:
props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
}
- 父级获取子级数据
子组件methods里定义方法,方法内部this.$emit('child-msg',this.a),父组件的模版中绑定传递的时间名@child-msg=父组件的一个方法,该方法接收一个参数,即为子组件传过来的参数
我是父级 -> {{msg}}
子组件-
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父组件的数据',
}
},
template:'#aaa',
methods:{
get(msg){
// alert(msg);
this.msg=msg;
}
},
components:{
'bbb':{
data(){
return {
a:'我是子组件的数据'
}
},
template:'#bbb',
methods:{
send(){
this.$emit('child-msg',this.a);
}
}
}
}
}
}
});
vm.$dispatch(事件名,数据) 子级向父级发送数据
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: event:{}
在vue2.0里面已经，报废了
插槽slot
类似ng里面 transclude （指令）
给模版中slot标签添加属性name='slotname',
然后在dom里的模版里添加属性slot='slotname'
就可以插入到对应位置了
- 1111
- 2222
- 3333
- 111
- 222
- 333
xxxx
这是默认的情况
welcome vue
这是默认的情况2
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
});
viewrouter 0.7.13+vue1.0
//1. 准备一个根组件
var App=Vue.extend();
//2. Home News组件都准备
var Home=Vue.extend({
template:'我是主页
'
});
var News=Vue.extend({
template:'我是新闻
'
});
//3. 准备路由
var router=new VueRouter();
//4. 关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});
//5. 启动路由
router.start(App,'#box');
//6. 跳转
router.redirect({
'/':'home'
});
-
多层路由
我是主页
我是新闻
{{$route.params | json}}
{{$route.path}}
{{$route.query | json}} //1. 准备一个根组件 var App=Vue.extend(); //2. Home News组件都准备 var Home=Vue.extend({ template:'#home' }); var News=Vue.extend({ template:'#news' }); var Detail=Vue.extend({ template:'#detail' }); //3. 准备路由 var router=new VueRouter(); //4. 关联 router.map({ 'home':{ component:Home, subRoutes:{ 'login':{ component:{ template:'我是登录信息' } }, 'reg':{ component:{ template:'我是注册信息' } } } }, 'news':{ component:News, subRoutes:{ '/detail/:id':{ component:Detail } } } }); //5. 启动路由 router.start(App,'#box'); //6. 跳转 router.redirect({ '/':'home' });
扩展
vue-loader:
其他loader -> css-loader、url-loader、html-loader.....
后台: nodeJs -> require exports
broserify 模块加载，只能加载js
webpack 模块加载器， 一切东西都是模块, 最后打包到一块了
require('style.css'); -> css-loader、style-loader
vue-loader基于webpack
.css
.js
.html
.php
.....
a.vue
b.vue
.vue文件:
放置的是vue组件代码
html
简单的目录结构:
|-index.html
|-main.js 入口文件
|-App.vue vue文件，官方推荐命名法
|-package.json 工程文件(项目依赖、名称、配置)
npm init --yes 生成
|-webpack.config.js webpack配置文件
ES6: 模块化开发
导出模块：
export default {}
引入模块:
import 模块名 from 地址
webpak准备工作:
cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-dev
App.vue -> 变成正常代码 [email protected]
cnpm install [email protected] --save-dev
cnpm install vue-html-loader --save-dev
vue-html-loader、css-loader、vue-style-loader、
[email protected]
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime