vue03
vue过渡
-
自带
<div id="div1" v-show="bSign" transition="fade"></div>
动画:
.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:'<h3>我是标题3</h3>'
});
Vue.component('aaa',Aaa);
*组件里面放数据:
data必须是函数的形式，函数必须返回一个对象(json)
var Aaa=Vue.extend({
data(){
return {
msg:'我是标题^^'
};
},
template:'<h3>{{msg}}</h3>'
});
Vue.component('aaa',Aaa);
局部组件
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件
aaa:Aaa
}
});
--------------------------------------
另一种编写方式:
Vue.component('my-aaa',{
template:'<strong>好</strong>'
});(全局)
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
template:'<h2>标题2</h2>'
}
}
});(局部)
配合模版
1. template:'<h2 @click="change">标题2->{{msg}}</h2>'
2. 单独放到某个地方
a). <script type="x-template" id="aaa">
<h2 @click="change">标题2->{{msg}}</h2>
</script>
js里边:template:'#aaa'
b). <template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
动态组件
<component :is="组件名称"></component>
组件数据传递
-
子组件就想获取父组件data
在调用子组件： 父组件模版里给子组件绑定个属性<bbb :mmm="数据"></bbb> 父组件的components:{ 子组件'bbb':{ props:['mmm'], template:'<h3>我是bbb组件->{{mmm}}</h3>' } }
props两种参数:
props:['m','myMsg']
props:{
'm':String,
'myMsg':Number
}
- 父级获取子级数据
子组件methods里定义方法,方法内部this.$emit('child-msg',this.a),父组件的模版中绑定传递的时间名@child-msg=父组件的一个方法,该方法接收一个参数,即为子组件传过来的参数
<template id="aaa">
<span>我是父级 -> {{msg}}</span>
<bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
<h3>子组件-</h3>
<input type="button" value="send" @click="send">
</template>
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'
就可以插入到对应位置了
<aaa>
<ul slot="ul-slot">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<ol slot="ol-slot">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</aaa>
<template id="aaa">
<h1>xxxx</h1>
<slot name="ol-slot">这是默认的情况</slot>
<p>welcome vue</p>
<slot name="ul-slot">这是默认的情况2</slot>
</template>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
});
viewrouter 0.7.13+vue1.0
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">主页</a>
</li>
<li>
<a v-link="{path:'/news'}">新闻</a>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
//1. 准备一个根组件
var App=Vue.extend();
//2. Home News组件都准备
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
});
var News=Vue.extend({
template:'<h3>我是新闻</h3>'
});
//3. 准备路由
var router=new VueRouter();
//4. 关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});
//5. 启动路由
router.start(App,'#box');
//6. 跳转
router.redirect({
'/':'home'
});
-
多层路由
<div id="box"> <ul> <li> <a v-link="{path:'/home'}">主页</a> </li> <li> <a v-link="{path:'/news'}">新闻</a> </li> </ul> <div> <router-view></router-view> </div> </div> <template id="home"> <h3>我是主页</h3> <div> <a v-link="{path:'/home/login'}">登录</a> <a v-link="{path:'/home/reg'}">注册</a> </div> <div> <router-view></router-view> </div> </template> <template id="news"> <h3>我是新闻</h3> <div> <a v-link="{path:'/news/detail/001'}">新闻001</a> <a v-link="{path:'/news/detail/002'}">新闻002</a> </div> <router-view></router-view> </template> <template id="detail"> {{$route.params | json}} <br> {{$route.path}} <br> {{$route.query | json}} </template> //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:'<strong>我是登录信息</strong>' } }, 'reg':{ component:{ template:'<strong>我是注册信息</strong>' } } } }, '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组件代码
<template>
html
</template>
<style>
css
</style>
<script>
js （平时代码、ES6） babel-loader
</script>
简单的目录结构:
|-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 -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev
cnpm install vue-html-loader --save-dev
vue-html-loader、css-loader、vue-style-loader、
vue-hot-reload-api@1.3.2
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime