333
引入vue2.0:
bower info vue 查看版本
http://vuejs.org/
到了2.0以后，有哪些变化?
1.在每个组件模板，不在支持片段代码
组件中模板:
之前:
<template>
<h3>我是组件</h3>
<strong>我是加粗标签</strong>
</template>
现在: 必须有根元素，包裹住所有的代码
<template id="aaa">
<div>
<h3>我是组件</h3>
<strong>我是加粗标签</strong>
</div>
</template>-
2.关于组件定义
Vue.extend 这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，一般也不用——废弃Vue.component(组件名称,{ //在2.0继续能用 data(){} methods:{} template: });- 2.0推出一个组件，简洁定义方式：
var Home={
template:'' //-> Vue.extend()
};
- 2.0推出一个组件，简洁定义方式：
3.生命周期
之前:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
destroyed
现在:
beforeCreate 组件实例刚刚被创建,属性都没有
created 实例已经创建完成，属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后，代替之前ready *
beforeUpdate 组件更新之前
updated 组件更新完毕 *
beforeDestroy 组件销毁前
destroyed 组件销毁后-
4.循环
2.0里面默认就可以添加重复数据；
-
去掉了隐式一些变量
$index $key之前:
v-for="(index,val) in array"
现在:
v-for="(val,index) in array"
其实是效仿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;
现在: Vue.config.keyCodes.ctrl=17;-
7.过滤器
之前:
系统就自带很多过滤
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些简单功能，自己通过js实现到了2.0， 内置过滤器，全部删除了 类似lodash 工具库 _.debounce(fn,200) 自定义过滤器——还有 但是,自定义过滤器传参 之前: {{msg | toDou '12' '5'}} 现在: {{msg | toDou('12','5')}} -
8.组件通信:
vm.$emit()
vm.$on();父组件和子组件: 子组件想要拿到父组件数据: 通过 props 之前，子组件可以更改父组件信息，可以是同步 sync 现在，不允许直接给父级的数据做赋值操作，而且sync已经被去掉了问题，就想更改：
a). 方法一：父组件每次传一个对象给子组件, 对象之间引用 √
b). 只是不报错, mounted中转，这种方法改不了父组件数据
-
可以用单一事件管理组件通信: （类似于自己写一个vuex）
var Event=new Vue();Event.$emit(事件名称, 数据); //发送 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="发送数据" @click="send">
</div>
</template>
<template id="bbb">
<div>
<strong>我是B组件---{{b}}</strong>
<input type="button" value="发送数据" @click="send">
</div>
</template>
<template id="ccc">
<div>
<strong>我是C组件---{{c}}</strong>
<input type="button" value="发送数据" @click="send">
<h2>接受a数据---{{a}}</h2>
<h2>接受b数据---{{b}}</h2>
</div>
</template>
<script>
//注册一个单一事件
var vm = new Vue();
var A = {
data(){
return {a:"我是A数据"}
},
methods:{
send(){
vm.$emit("sendA",this.a);
}
},
template:"#aaa"
};
var B = {
template:"#bbb",
methods:{
send(){
vm.$emit("sendB",this.b);
}
},
data(){
return {b:"B数据"};
}
};
var C = {
template:"#ccc",
methods:{
send(){
vm.$emit("sendC",this.c);
}
},
data(){
return {a:"",b:"",c:"C数据"};
},
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,时间)
vue动画
-
transition 之前以属性方式呈现
<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="动画" @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">
运动东西(元素，属性、路由....)
</transition>class定义: .fade-enter{} //初始状态 .fade-enter-active{} //变化成什么样 -> 当元素出来(显示) .fade-leave{} .fade-leave-active{} //变成成什么样 -> 当元素离开(消失) transition还有六个事件，事件名为@before-enter/@enter/@after-enter/...，可以在对应的时间点进行相应的设计
<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="动画" @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>多个元素运动:
<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 路由:
关于路由的学习中文网址：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}, ]; //生成路由实例 const router=new VueRouter({ routes }); //最后挂到vue上 new Vue({ router, el:'#box' });
- 重定向
之前 router.rediect 废弃了
现在使用：{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.生成路由实例
var router = new VueRouter({
routes : routes //可以只写成一个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、准备首页、新闻组件
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.生成路由实例
var router = new VueRouter({
routes
});
//4.最后挂到vue上
new Vue({
router,
el:".box1"
});
</script>
路由实例方法:
router.push({path:'home'}); //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
router.replace({path:'news'}) //替换路由，不会往历史记录里面添加
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需要两个加载器：
- style-loader、css-loader
- 顺序必须要按照：style!css，不可以颠倒。
多做项目
444
<div style="display:none">
vue问题:
论坛
http://bbs.zhinengshe.com
</div>
-
UI组件
别人提供好一堆东西
目的:
为了提高开发效率；
功能。原则: 拿过来直接使用
开发时，一般直接使用vue-cli 生成-> vue-loader进行开发。
-
bootstrap:
twitter 开源
简洁、大方
官网文档基于 jquery 栅格化系统+响应式工具(可以开发移动端、pad、pc) 按钮
- bower 前端包管理器 jquery#1.11.1
- 自动解决依赖
- npm node包管理器 jquery@1.11.1
- 饿了么团队开源一个基于vue 组件库
elementUI PC
MintUI 移动端
elementUI:
- 如何使用
-
官网:http://element.eleme.io/
使用:
1. 安装 element-ui
npm i element-ui -D
等价于：
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 字体图标 file-loader less: less less-loader
-
按需加载相应组件: √
- 比如就需要 按钮
- 1.babel-plugin-component
cnpm install babel-plugin-component -D - 2.babelrc文件里面新增一个配置
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]] - 3.想用哪个组件就在main里面写入以下内容用哪个
引入:
import {Button,Radio} from 'element-ui'
使用:
a). Vue.component(Button.name, Button); 个人不太喜欢
b). Vue.use(Button); √
- 发送请求:
vue-resourse，交互，但是现在不推荐使用。
推荐使用axios。
mint-ui -> 移动端 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
集中式管理组件状态（数据）；
-
vuex提供两个非常靠谱的方法：
- mapAction：管理所有的事件；
- mapGetters：获取数据。
安装：cnpm install vuex -d
vue仿手机新闻站
- 1.拿到静态页面，也可以用vue进行布局；
- 2.用的是假数据；
做项目基本流程：
一、规划组件结构：
- 1.Nav.vue；
- 2.Header.vue；
- 3.Home.vue。
二、编写对应路由
- vue-router；
