vue基础
vue1.0
vue1.0对象的属性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
var vm = new Vue({
el:'#box', //容器
data:{ //数据
msg:"data",
a:1
},
methods:{ //普通方法
},
computed:{ //计算属性(属性b随着其return中相关的属性改变而改变)
b:function(){ //b是一个属性，使用方法和data里的属性一样，return的就是它的值
return a*3
},
b2:{ //b是默认走get的写法，b2是完整写法
get:function(){
return a*3
},
set:function(val){ //val是对b2进行设置时赋的值
//对data的个个属性进行设置，之后还会执行get通过本身与属性的关系改变自己的值
}
}
},
transitions:{ //定义所有动画名称
bounce:{ //与上面自定义动画名称对应
enterClass:'zoomInLeft', //进入时执行的动画
leaveClass:'zoomOutRight' //离开时执行的动画
}
}
})
|
vue1.0的生命周期
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
var vm=new Vue({
// 钩子函数
init:function(){
alert("实例刚被创建,还没属性什么的")
},
created:function(){
alert('实例已经创建,已经有属性了');
},
beforeCompile:function(){
alert('编译之前');
},
compiled:function(){
alert('编译之后');
},
ready:function(){
alert('插入到文档中');
},
beforeDestroy:function(){
alert('销毁之前');
},
destroyed:function(){
alert('销毁之后');
}
});
/*点击页面销毁vue对象*/
document.onclick=function(){
vm.$destroy();
};
|
vue1.0实例的方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var vm = new Vue({
el:'#box', //容器
data:{ //数据
msg:"data",
a:1
},
})
vm.$el //DOM元素#box
vm.$data //就是实例的数据
vm.$mount("#box") //手动将vm实例对象挂载到#box上
vm.$options //实例对象的配置参数
vm.$detroy //销毁对象
vm.$log() //查看现在的数据状态
vm.$watch("data attr",function(){ //监听data attr属性的变化
console.log("当data attr发生变化是就会执行这里");
},{deep:true}) //第三个参数是深度监听
|
过滤器
|
1
2
3
4
5
6
7
8
9
10
11
|
v-for="val in arr | filterBy a" //值循环数组中含有a的
v-for="val in arr | limitBy a" //只要含有a的
v-for="val in arr | limitBy 2" //只要前两位
v-for="val in arr | limitBy 2 1" //只要两位，从第一位开始算
v-for="val in arr | orderBy 1" //正序排列
v-for="val in arr | orderBy -1" //倒叙排列
//自定义过滤器
Vue.filter("过滤器名",function(val,参数...){ //val 是竖杆前变量的值
return 。。。。 //返回的就是处理后的值
})
|
指令
系统指令
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
```
#### 自定义指令
```javascript
//加了 v-red 属性的原始字体就会变红
Vue.directive("red",function(){
this.el.style.color="red"; //this.el 原生的加了指令的原始
})
//加了 v-color="'red'" 颜色变红
Vue.directive("color", function(attr) {
this.el.style.color = attr;
})
//通过指令直接操作DOM元素
Vue.directive('drag', function() {
var oDiv = this.el; //
oDiv.onmousedown = function(ev) {
var disX = ev.clientX - oDiv.offsetLeft;
var disY = ev.clientY - oDiv.offsetTop;
document.onmousemove = function(ev) {
var l = ev.clientX - disX;
var t = ev.clientY - disY;
oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
};
});
|
过渡动画
|
1
2
|
//在行间加入 transition="定义的动画名称"
//css 样式中写出2.0那样的动画就行
|
animate.js 库
1、给要添加动画的东西加速 class=”animated”
2、在行间加入 transition=”bounce” (自定义定义的动画名称)
3、Vue配置加入transitions
|
1
2
3
4
5
6
7
8
|
var vm=new Vue({
transitions:{ //定义所有动画名称
bounce:{ //与上面自定义动画名称对应
enterClass:'zoomInLeft', //进入时执行的动画
leaveClass:'zoomOutRight' //离开时执行的动画
}
}
});
|
组件
1、定义组件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
//方法一
var Co = Vue.extend({
data:function(){ //组件里面的数据必须是一个函数，并且必须返回一个json对象
retrun {
msg:"标题"
}
},
template:"<div>{{msg}}</div>"
})
Vue.component("组件名",Co); //这样注册组件是全局组件
//方法二
var vm=new Vue({
el:"#box",
data:{
msg:"标题"
},
components:{ //这样注册组件是局部组件
'组件名'：Co,
'组件名'：{ //直接定义
data(){
retrun {
msg:"标题"
}
},
template:"<div>{{msg}}</div>"
}
}
});
//方法三 动态组件
//html 中
<component :is="com"><component>
//js 中
var vm=new Vue({
el:"#box",
data:{
com:"组件名"
},
components:{
'组件名'：{
retrun {
msg:"标题"
}
},
template:"<div>{{msg}}</div>"
}
}
});
//随时切换com的value切换组件
|
2、组件信息传递
父传子
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
//html
<template id="aaa">
<h1>11111</h1>
<bbb :data="msg" :data2="msg2"></bbb> //1传入
</template>
//js
var vm = new Vue({
components: {
'aaa': {
data() {
return {
msg: '我是父组件的数据',
msg2: '我是父组件的数据2'
}
},
template: '#aaa',
components: {
'bbb': {
props: ['data','data2'], //2接收
// props: {
// 'data':'类型',
// 'data2':'类型'
// },
template: '<h3>{{data}}</h3>' //3显示我是父组件的数据
}
}
}
}
});
|
vue2.0 变化
小变化
1、不支持片段代码
2、组件
|
1
2
3
|
var json = {}
Vue.component("组件名",json);//直接一个json不需要 Vue.extend({});
//在实例中注册也可以
|
3、循环
–去掉了隐式一些变量 $index $key
–之前: v-for=”(index,val) in array”
–现在: v-for=”(val,index) in array” 如果循环的是json 参数二可以是key
–循环时加上 :key=”index” //为了提升性能可以不加
4、自定义键盘指令
之前：Vue.directive(‘on’).keyCodes.ctrl=17;
现在: Vue.config.keyCodes.ctrl=17
5、过滤器
删除了所有内置过滤器，只能自定义过滤器
只是传参数方式改变了
|
1
2
3
|
Vue.filter('过滤器名',function(obj,参数1,参数n){ //{{ data | 过滤器 ('参数1','参数n')}} obj就是data
return; 还是显示return出来处理后的值
})
|
大变化
vue2.0的生命周期
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
var vm=new Vue({
// 钩子函数
beforeCreate(){
console.log('组件实例刚刚被创建,还没属性');
},
created(){
console.log('实例已经创建完成,有属性了');
},
beforeMount(){
console.log('模板编译之前');
},
mounted(){
console.log('模板编译完成');
},
beforeDestroy(){
console.log('组件销毁之前');
},
destroyed(){
console.log('组件销毁之后');
},
//更新是新增的
beforeUpdate(){
console.log('组件更新之前');
},
updated(){
console.log('组件更新完毕');
}
});
|
组件通信
1、自己不能直接改父级传入的数据,但是能改传入的对象的属性
2、单一事件管理组件通信(类似vuex)
– 首先要在全声明一个所有组件都能访问到的vue对象 var Event = new Vue();
–这个Event 含有$emit() 和 $on() 事件分别发送数据和接收数据
–Event.$emit(“自定义事件名称”,data); 发送数据
–Event.$on(“自定义事件名称”,function(data){}.bind(this)) // 接收数据 并且绑定作用域
– 一个组件中发送一个数据 所有组件都能通过 Event.$on() 方式得到数据
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
//准备一个空的实例对象
var Event=new Vue();
var A={
template:`
<div>
<span>我是A组件</span> -> {{a}}
<input type="button" value="把A数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('a-msg',this.a);
}
},
data(){
return {
a:'我是a数据'
}
}
};
var B={
template:`
<div>
<span>我是B组件</span> -> {{a}}
<input type="button" value="把B数据给C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('b-msg',this.a);
}
},
data(){
return {
a:'我是b数据'
}
}
};
var C={
template:`
<div>
<h3>我是C组件</h3>
<span>接收过来的A的数据为: {{a}}</span>
<br>
<span>接收过来的B的数据为: {{b}}</span>
</div>
`,
data(){
return {
a:'',
b:''
}
},
mounted(){
//var _this=this;
//接收A组件的数据
Event.$on('a-msg',function(a){
this.a=a;
}.bind(this));
//接收B组件的数据
Event.$on('b-msg',function(a){
this.b=a;
}.bind(this));
}
};
window.onload=function(){
new Vue({
el:'#box',
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
};
</script>
</head>
<body>
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</body>
</html>
|
过渡动画
(1) 到2.0以后 transition 组件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//写法与内置事件
<transition name="fade"
@before-enter = "fn" //在四个状态的enter执行之前执行
@enter = "fn" //动画enter进入时执行 //回调中会有一个元素是当前使用动画的元素
@after-enter = "fn" //动画进入之后执行
@before-leave ="fn"
@leave ="fn"
@after-leave ="fn" //离开
>
//运动东西(元素，属性、路由....)
</transition>
//class定义:
.fade-enter{} //初始状态
.fade-enter-active{} //变化成什么样 -> 当元素出来(显示)
.fade-leave{} //开始结束时初始状态
.fade-leave-active{} //变成成什么样 -> 当元素离开(消失)
//一般只给 .fade-leave-active,.fade-enter-active 添加过渡
|
(2) vue2.0 与 animate.css 结合使用
–引入animate.css
–给运动元素添加class=”animated” 添加到进入离开动画名前面
–给transition组件添加属性: enter-actioe-class=”进入动画名”,leave-active-class=”离开动画名”
– 没有了实例属性中的那种写法了
(3) 配合animate多元素运动
|
1
2
3
4
5
6
|
<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated" :key="1"></p>
<p v-show="show" class="animated" :key="2"></p>
</transition-group>
//必须加唯一标志位
|
vue的插件
vue-devtools vue调试插件 理顺组件的关系
GitHub直接搜 vue-devtools
vue-resource
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
this.$http(.......) //默认使用get方式
//get 无传值
this.$http.get('a.txt').then(function(res){
alert(res); //成功回调
},function(res){
alert(res); //失败回调
});
//get 传值
this.$http.get('get.php',{ a:1, b:2 }).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
//post
this.$http.post('post.php',{a:1,b:20},{
emulateJSON:true //post要传一个头信息，这边是加这个标志
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
//jsonp 获取本域之外的数据(只要有接口的路径部分 + ？后面的回调和关键字的键值对就能正常访问了)
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a' //搜索关键字为a,wd是百度上关键字对应的键
},{
jsonp:'cb' //设置回调函数名称，取你使用的接口上的回调函数名，默认callback不要设置
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
|
Vuex
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
// 1、在main.js文件中引入单独文件，并根路由一样存入vue实例中
import store from './store'
new Vue({
store,
el: '#app',
render: h => h(App)
})
// 2、store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
var state = {//数据
count: 10
};
const mutations = {
addNumber(state) { //处理状态(数据)变化
state.count++;
},
lessNumber(state) {
state.count--;
}
};
const actions = { //给mapActions组件提供的方法
increment: ({ //处理你要干什么，异步请求，判断，流程控制
commit
}) => {
commit('addNumber') //当组件中触发该方法时，指向mutations中的addNumber
},
decrement: ({
commit
}) => {
commit('lessNumber');
},
clickOdd: ({ //state就是当前参考的stsate
commit,
state
}) => {
if (state.count % 2 == 0) {//过滤 通过某个条件时才指向mutations中的addNumber
commit('addNumber')
}
},
clickAsync: ({
commit
}) => {
new Promise((resolve) => {
setTimeout(function() {
commit('addNumber');
resolve();
}, 1000);
});
}
};
const getters = { //给组件中 mapGetters 提供的数据
count(state) {
return state.count;
},
getOdd(state) {
return state.count % 2 == 0 ? '偶数' : '奇数';
}
};
//需要导出Store对象
export default new Vuex.Store({ //把定义好的对象挂载到Vuex.Store中,大型项目最后分别设置一个文件
state,
mutations,
actions,
getters
});
// 3、组件中使用
import {mapGetters, mapActions} from 'vuex'
export default{
computed:mapGetters([ //获取数据 跟data的数据一样使用 {{count}}
'count',
'getOdd'
]),
methods:mapActions([ //获取方法
'increment',
'decrement',
'clickOdd',
'clickAsync'
])
}
|
elementUi and MintUl
饿了么提供的基于vue的开源ui框架(前者真的pc,后者针对移动端)
配置
-
安装 element-ui
npm i element-ui -D
npm install element-ui –save-dev
// i -> install
// D -> –save-dev
// S -> –save -
引入 main.js 入口文件
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-default/index.css’ //注意引入loder style!css -
使用组件
Vue.use(ElementUI)