333
引入vue2.0:
bower info vue 查看版本
http://vuejs.org/
到了2.0以后褥琐，有哪些變化?
1.在每個(gè)組件模板传趾，不在支持片段代碼
組件中模板:
之前:
<template>
<h3>我是組件</h3>
<strong>我是加粗標(biāo)簽</strong>
</template>
現(xiàn)在: 必須有根元素，包裹住所有的代碼
<template id="aaa">
<div>
<h3>我是組件</h3>
<strong>我是加粗標(biāo)簽</strong>
</div>
</template>-
2.關(guān)于組件定義
Vue.extend 這種方式负蚊，在2.0里面有神妹，但是有一些改動(dòng)，這種寫法家妆，即使能用鸵荠，一般也不用——廢棄Vue.component(組件名稱,{ //在2.0繼續(xù)能用 data(){} methods:{} template: });- 2.0推出一個(gè)組件，簡潔定義方式：
var Home={
template:'' //-> Vue.extend()
};
- 2.0推出一個(gè)組件，簡潔定義方式：
3.生命周期
之前:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
destroyed
現(xiàn)在:
beforeCreate 組件實(shí)例剛剛被創(chuàng)建,屬性都沒有
created 實(shí)例已經(jīng)創(chuàng)建完成伤极，屬性已經(jīng)綁定
beforeMount 模板編譯之前
mounted 模板編譯之后蛹找，代替之前ready *
beforeUpdate 組件更新之前
updated 組件更新完畢 *
beforeDestroy 組件銷毀前
destroyed 組件銷毀后-
4.循環(huán)
2.0里面默認(rèn)就可以添加重復(fù)數(shù)據(jù)；
-
去掉了隱式一些變量
$index $key之前:
v-for="(index,val) in array"
現(xiàn)在:
v-for="(val,index) in array"
其實(shí)是效仿js原生的forEach
arr.forEach(function(item,index){
});
5.track-by="id"變成
:key="id"
變成：
<li v-for="(val,index) in list" :key="index">6.自定義鍵盤指令
之前：Vue.directive('on').keyCodes.ctrl=17;
現(xiàn)在: Vue.config.keyCodes.ctrl=17;-
7.過濾器
之前:
系統(tǒng)就自帶很多過濾
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些簡單功能哨坪，自己通過js實(shí)現(xiàn)到了2.0庸疾， 內(nèi)置過濾器，全部刪除了 類似lodash 工具庫 _.debounce(fn,200) 自定義過濾器——還有 但是,自定義過濾器傳參 之前: {{msg | toDou '12' '5'}} 現(xiàn)在: {{msg | toDou('12','5')}} -
8.組件通信:
vm.$emit()
vm.$on();父組件和子組件: 子組件想要拿到父組件數(shù)據(jù): 通過 props 之前齿税，子組件可以更改父組件信息，可以是同步 sync 現(xiàn)在炊豪，不允許直接給父級(jí)的數(shù)據(jù)做賦值操作凌箕，而且sync已經(jīng)被去掉了問題，就想更改：
a). 方法一：父組件每次傳一個(gè)對象給子組件, 對象之間引用 √
b). 只是不報(bào)錯(cuò), mounted中轉(zhuǎn)词渤，這種方法改不了父組件數(shù)據(jù)
-
可以用單一事件管理組件通信: （類似于自己寫一個(gè)vuex）
var Event=new Vue();Event.$emit(事件名稱, 數(shù)據(jù)); //發(fā)送 Event.$on(事件名稱,function(data){ //接收 //data }.bind(this));
<div class="box">
<aaa></aaa>
<bbb></bbb>
<ccc></ccc>
</div>
<template id="aaa">
<div>
<strong>我是A組件---{{a}}</strong>
<input type="button" value="發(fā)送數(shù)據(jù)" @click="send">
</div>
</template>
<template id="bbb">
<div>
<strong>我是B組件---{牵舱}</strong>
<input type="button" value="發(fā)送數(shù)據(jù)" @click="send">
</div>
</template>
<template id="ccc">
<div>
<strong>我是C組件---{{c}}</strong>
<input type="button" value="發(fā)送數(shù)據(jù)" @click="send">
<h2>接受a數(shù)據(jù)---{{a}}</h2>
<h2>接受b數(shù)據(jù)---{}</h2>
</div>
</template>
<script>
//注冊一個(gè)單一事件
var vm = new Vue();
var A = {
data(){
return {a:"我是A數(shù)據(jù)"}
},
methods:{
send(){
vm.$emit("sendA",this.a);
}
},
template:"#aaa"
};
var B = {
template:"#bbb",
methods:{
send(){
vm.$emit("sendB",this.b);
}
},
data(){
return {b:"B數(shù)據(jù)"};
}
};
var C = {
template:"#ccc",
methods:{
send(){
vm.$emit("sendC",this.c);
}
},
data(){
return {a:"",b:"",c:"C數(shù)據(jù)"};
},
mounted(){
vm.$on("sendA",function (daA) {
this.a = daA;
}.bind(this));
vm.$on("sendB",function (daB) {
this.b = daB;
}.bind(this));
vm.$on("sendC",function (da) {
this.a = da;
this.b = da;
}.bind(this));
}
};
new Vue({
el:".box",
components:{
aaa:A,
bbb:B,
ccc:C
}
})
</script>
broadcast和dispatch被棄
debounce 廢棄
改用 -> lodash的_.debounce(fn,時(shí)間)
vue動(dòng)畫
-
transition 之前以屬性方式呈現(xiàn)
<p transition="fade"></p>.fade-transition{} .fade-enter{} .fade-leave{}
<head>
<script src="../vue1.0.js"></script>
<style>
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.anim-transition{
transition: 1s all ease;
}
.anim-enter{
opacity: 0;
}
.anim-leave{
opacity: 0;
transform: translateX(200px);
}
</style>
</head>
<body>
<div class="box">
<input type="button" value="動(dòng)畫" @click="show=!show" >
<div class="box1" v-show="show" transition="anim"></div>
</div>
<script>
new Vue({
el:".box",
data:{
show:false
}
})
</script>
</body>
-
到2.0以后 transition 組件
<transition name="fade">
運(yùn)動(dòng)?xùn)|西(元素缺虐，屬性芜壁、路由....)
</transition>class定義: .fade-enter{} //初始狀態(tài) .fade-enter-active{} //變化成什么樣 -> 當(dāng)元素出來(顯示) .fade-leave{} .fade-leave-active{} //變成成什么樣 -> 當(dāng)元素離開(消失) transition還有六個(gè)事件，事件名為@before-enter/@enter/@after-enter/...，可以在對應(yīng)的時(shí)間點(diǎn)進(jìn)行相應(yīng)的設(shè)計(jì)
<head>
<script src="./vue.js"></script>
<style>
.box1{
width: 300px;
height: 300px;
background-color: red;
}
.anim-enter-active,.anim-leave-active{
transition: 1s all ease;
}
.anim-enter-active{
opacity: 1;
width: 300px;
height: 300px;
background-color: green;
}
.anim-enter{
opacity: 0;
width: 100px;
height: 100px;
}
.anim-leave-active{
opacity: 0;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box">
<input type="button" value="動(dòng)畫" @click="show=!show" >
<transition name="anim" @before-enter="showMsg">
<div class="box1" v-show="show"></div>
</transition>
</div>
<script>
new Vue({
el:".box",
data:{
show:false
},
methods:{
showMsg(){
alert("before-enter");
}
}
})
</script>
</body>
如何animate.css配合用慧妄？
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition>多個(gè)元素運(yùn)動(dòng):
<transition-group enter-active-class="" leave-active-class="">
<p :key=""></p>
<p :key=""></p>
</transition-group>
<div id="box">
<input type="text" v-model="show">
<transition-group enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
<p v-show="show" v-for="(value,index) in lists" :key="1">{{value}}</p>
</transition-group>
</div>
<script>
new Vue({
el:"#box",
data:{
show:"",
list:["apple","banana","orange","pear"]
},
computed:{
lists:function () {
var arr = [];
this.list.forEach(function (val) {
if (val.indexOf(this.show)!=-1){
arr.push(val);
}
}.bind(this));
return arr;
}
}
})
</script>
vue2.0 路由:
關(guān)于路由的學(xué)習(xí)中文網(wǎng)址：http://router.vuejs.org/zh-cn/index.html
基本使用:
-
1.布局
<router-link to="/home">主頁</router-link><router-view></router-view> -
2.路由具體寫法
//組件
var Home={
template:'<h3>我是主頁</h3>'
};
var News={
template:'<h3>我是新聞</h3>'
};//配置路由 const routes=[ {path:'/home', componet:Home}, {path:'/news', componet:News}, ]; //生成路由實(shí)例 const router=new VueRouter({ routes }); //最后掛到vue上 new Vue({ router, el:'#box' });
- 重定向
之前 router.rediect 廢棄了
現(xiàn)在使用：{path:'*', redirect:'/home'}
<div class="box1">
<router-link to="/home">主頁</router-link>
<router-link to="/news">新聞</router-link>
<router-view></router-view>
</div>
<script>
//1.首頁顷牌、新聞組件
var Home = {
template:"<h2>我是主頁</h2>"
};
var News = {
template:"<h2>我是新聞</h2>"
};
//2.配置路由
var routes = [
{path:"/home",component:Home},
{path:"/news",component:News},
{path:"*",redirect:"/home"}
];
//3.生成路由實(shí)例
var router = new VueRouter({
routes : routes //可以只寫成一個(gè)routes
});
//4.最后掛到vue上
new Vue({
router:router,
el:".box1"
})
</script>
-
4.路由嵌套:
/user/usernameconst routes=[ {path:'/home', component:Home}, { path:'/user', component:User, children:[ //核心 {path:'username', component:UserDetail} ] }, {path:'*', redirect:'/home'} //404 ];
傳參：/user/strive/age/10
:id
:username
:age
<div class="box1">
<router-link to="/home">主頁</router-link>
<router-link to="/user">用戶</router-link>
<router-view></router-view>
</div>
<script>
//1、準(zhǔn)備首頁塞淹、新聞組件
var Home = {
template:"<h2>我是主頁</h2>"
};
var Users = {
template:"<div><h2>我是用戶</h2>" +
"<router-link to='/user/wang/age/10'>wang</router-link><br>" +
"<router-link to='/user/ma/age/20'>ma</router-link><br>" +
"<router-link to='/user/liu/age/30'>liu</router-link>" +
"<router-view></router-view></div>"
};
var User = {
template:"<h3>{{$route.params}}</h3>"
};
//2.配置路由
var routes = [
{path:"/home",component:Home},
{path:"/user",component:Users,children:[
{path:':userName/age/:age',component:User}
]},
{path:"*",component:Home},
];
//3.生成路由實(shí)例
var router = new VueRouter({
routes
});
//4.最后掛到vue上
new Vue({
router,
el:".box1"
});
</script>
路由實(shí)例方法:
router.push({path:'home'}); //直接添加一個(gè)路由,表現(xiàn)切換路由窟蓝，本質(zhì)往歷史記錄里面添加一個(gè)
router.replace({path:'news'}) //替換路由，不會(huì)往歷史記錄里面添加
vue-cli腳手架
腳手架: vue-loader變化：
1.0 ->
new Vue({
el: '#app',
components:{App}
})
2.0->
new Vue({
el: '#app',
render: h => h(App)
})
vue2.0
vue-loader和vue-router配合
- 加載css需要兩個(gè)加載器：
- style-loader饱普、css-loader
- 順序必須要按照：style!css运挫，不可以顛倒。
多做項(xiàng)目
444
<div style="display:none">
vue問題:
論壇
http://bbs.zhinengshe.com
</div>
-
UI組件
別人提供好一堆東西
目的:
為了提高開發(fā)效率套耕；
功能谁帕。原則: 拿過來直接使用
開發(fā)時(shí)，一般直接使用vue-cli 生成-> vue-loader進(jìn)行開發(fā)冯袍。
-
bootstrap:
twitter 開源
簡潔匈挖、大方
官網(wǎng)文檔基于 jquery 柵格化系統(tǒng)+響應(yīng)式工具(可以開發(fā)移動(dòng)端、pad颠猴、pc) 按鈕
- bower 前端包管理器 jquery#1.11.1
- 自動(dòng)解決依賴
- npm node包管理器 jquery@1.11.1
- 餓了么團(tuán)隊(duì)開源一個(gè)基于vue 組件庫
elementUI PC
MintUI 移動(dòng)端
elementUI:
- 如何使用
-
官網(wǎng):http://element.eleme.io/
使用:
1. 安裝 element-ui
npm i element-ui -D
等價(jià)于：
npm install element-ui --save-dev// i -> install // D -> --save-dev // S -> --save 2. 引入入口文件关划， 在 main.js 中引入入口文件 import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' 全部引入 3. 使用組件 Vue.use(ElementUI) css-loader 引入css 字體圖標(biāo) file-loader less: less less-loader
-
按需加載相應(yīng)組件: √
- 比如就需要 按鈕
- 1.babel-plugin-component
cnpm install babel-plugin-component -D - 2.babelrc文件里面新增一個(gè)配置
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]] - 3.想用哪個(gè)組件就在main里面寫入以下內(nèi)容用哪個(gè)
引入:
import {Button,Radio} from 'element-ui'
使用:
a). Vue.component(Button.name, Button); 個(gè)人不太喜歡
b). Vue.use(Button); √
- 發(fā)送請求:
vue-resourse，交互翘瓮，但是現(xiàn)在不推薦使用贮折。
推薦使用axios。
mint-ui -> 移動(dòng)端 ui庫
- element-ui -> pc
- http://mint-ui.github.io/
-
下載
npm install mint-ui -S-S --save -
引入：
import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.use(Mint);按需引入: import { Cell, Checklist } from 'minu-ui'; Vue.component(Cell.name, Cell); Vue.component(Checklist.name, Checklist);
Mint-ui-demo: 看著手冊走了一遍：
https://github.com/itstrive/striveCode/tree/js/vue2.0-Mint-ui-demo
自定義vue全局組件：
- 使用：
<Loading></Loading>
vuex
集中式管理組件狀態(tài)（數(shù)據(jù)）资盅；
官網(wǎng)：http://vuex.vuejs.org
-
vuex提供兩個(gè)非车鏖靠譜的方法：
- mapAction：管理所有的事件；
- mapGetters：獲取數(shù)據(jù)呵扛。
安裝：cnpm install vuex -d
