vue1.0 -vue 2.0

Posted 大洋与小样

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue1.0 -vue 2.0相关的知识，希望对你有一定的参考价值。

vue.js

发表于 2017-01-15   |  

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,后者针对移动端)

配置

    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’ //注意引入loder style!css

    3. 使用组件
      Vue.use(ElementUI)

以上是关于vue1.0 -vue 2.0的主要内容，如果未能解决你的问题，请参考以下文章

每个片段照明和窗口到相机的转换

关于博客优化2.0

如何使用 SAML 2.0 响应进行特定 DNN 用户角色组身份验证和授权？

google drive Oauth 2.0 for java web application

聚合物2.0 webcomponent带有切片的饼图选项抛出错误 - 无法定义toLowerCase未定义

OpenGL ES 2.0中的剪切平面