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