Vue2.0学习笔记

最后更新于:2018-04-12 00:02:44

Vue2.0入门笔记

Vue简介与安装

Vue是一套构建用户界面的渐进式框架

npm install vue // 默认下载最新版本
npm install vue@1.0.28 //指定版本号下载

hello world页面

<div id="app">
    {{msg}}
</div>
<!--一块json+html-->
<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		data: {
			msg: 'welcome to Vue2.0!'
		}
	})
</script>

表达式和常用指令

{{}}是表达式,支持三元运算符,计算和赋值,不支持逻辑。

  • v-model:数据双向绑定
  • v-once:绑定一次
  • v-html:支持html标签
  • v-for="(val,index) in items" 列表渲染
  • v-on:click="fn" | @click="fn" 绑定事件

加括号一般用于传参,如果传递参数需要手动添加e@click="fn($event)"

  • v-show:隐藏样式,display:none 频繁切换显示隐藏。
  • v-if:操作ODM,removeChild 判断数据是否存在。
  • v-clock:当数据加载后会将此属性移除。常用于防止页面闪烁。
[v-clock]{display:none}
  • v-band:src | :src 动态的绑定数据
  1. 动态的绑定class
<style>
        .back {
            background: lightcoral
        }

        .color {
            color: red
        }
    </style>
</head>
<body>
<div id="app">
    <!--用对象的形式绑定-->
    <div :class="{back:flag,color:!flag}">杨洁个人网站</div>
    <!--用数组的形式绑定-->
    <div :class="[back1,color1]">杨洁个人网站</div>
</div>
<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		data: {
			color1: 'color',
			back1: 'back',
			flag: false
		}
	})
</script>
  1. 动态的绑定style
<div id="app">
    <div :style="{background:'green',color:'blue'}">绿色背景</div>
    <div :style="[a,b]">绿色背景</div>
</div>
<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		data: {
			a: {fontSize: '36px'},
			b: {background: 'yellow'},
		}
	})
</script>

Vue生命周期

详情参考:vue1.0和vue2.0生命周期函数

计算属性

  • 计算属性的获取
<div id="app">
    {{total}} //200
    {{count}} //10
</div>
<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		data: {
			price: 20,
			count: 10
		},
		computed: {
			total(){
				return this.price * this.count;
			}
		}
	})
</script>
  • 计算属性的设置
<div id="app">
    {{total}} //300
    {{count}} //15
</div>
<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		data: {
			price: 20,
			count: 10
		},
		computed: {
			total: {
				get: function () {
					return this.price * this.count;
				},
				set: function (total) {
					this.count = total / this.price;
				}
			}
		}
	});
	vm.total = 300;
</script>

实例上常用的属性

  • vm.$el:获取当前元素
  • vm.$data:获取当前实例上挂载的数据
  • vm.$options:当前实例上自定义属性
<script>
	let vm = new Vue({
		el: '#app',
		a: {hello: 'world'}
	});
	console.log(vm.$options.a);
	//{hello:'world'}
</script>
  • vm.$watch:监控数据变化
vm.$watch('total', function (newValue, oldValue) {
		console.log(newValue, oldValue);//300,200
	})

事件机制

  • 回顾原生js中e.preventDefault()和e.stopPropagation()两个方法。

e.preventDefault()是阻值事件的默认行为,比如a标签的默认跳转,而e.stopPropagation()是阻值事件的冒泡传播。

  • Vue2.0中可以用修饰符stop和prevent来阻值事件冒泡传播和默认行为
<div id="app">
    <div @click="fn">parent
        <div @click.stop="fn">child</div>
    </div>
    <a href="http://www.yangjie90.com" @click.prevent="fn1">跳转到杨洁个人网站</a>
</div>
<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		methods: {
			fn1(){
				alert('稍后再去');
			},
			fn(){
				alert('hello');
			}
		}
	})
</script>
键盘事件
<div id="app">
    <!--vue中内置了很多都可以用修饰符来表示:比如,enter,space,right,up,down,left...-->
    <input type="text" @keydown.enter="fn">
</div>
<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		methods: {
			fn(){
				alert('你按下回车键了');
			}
		}
	})
</script>

获取数据

  • vue-resource
  • axios

自定义事件

自定义过滤器

Vue2.0中废除了所有的内置过滤器,推荐我们自定义过滤器。

<div id="app">
    {{msg | capitalize}}
    {{Date.now() | date('aaa','bbb')}}
</div>
<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		data: {
			msg: 'hello'
		},
		filters: {
            /*
             * params:
             *   第一个参数是过滤的内容,元数据
             *   后面的参数依次对应传入的参数
             * */
			date: function (data, param1, param2) {
				let d = new Date(data);
				console.log(param1, param2);
				return `${d.getFullYear()}-${d.getMonth()}-${d.getDay()} ${d.getHours()}${d.getMinutes()}${d.getSeconds()}秒`
			},
			capitalize: function (value) {
				return value.charAt(0).toUpperCase() + value.slice(1);
			}
		}
	})
</script>
自定义指令(拖拽)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令实现拖拽</title>
    <style>
        .drag {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-drag class="drag"></div>
</div>
<script src="vue2.0.js"></script>
<script>
	Vue.directive('drag', function (el) {
		el.onmousedown = function (e) {
			let disX = e.pageX - el.offsetLeft;
			let disY = e.pageY - el.offsetTop;
			el.onmousemove = function (e) {
				el.style.left = e.pageX - disX + 'px';
				el.style.top = e.pageY - disY + 'px';
			};
			el.onmouseup = function () {
				document.onmousemove = document.onmouseup = null;
			}
			e.preventDefault();
		}
	});
	let vm = new Vue({
		el: '#app'
	});
</script>
</body>
</html>
自定义键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" @keydown.f1.prevent="up">
</div>
<script src="vue2.0.js"></script>
<script>
	Vue.config.keyCodes.f1 = 112;
	let vm = new Vue({
		el: '#app',
		methods: {
			up: function () {
				alert('ok!')
			}
		}
	});
</script>
</body>
</html>
自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fadeIn {
            width: 200px;
            height: 200px;
            background: red;
        }

        /*fly-enter:初始状态设置    fly-enter-active:激活进入时*/
        /*fly-leave:初始离开状态设置    fly-leave-active:激活离开时*/
        .fly-enter {
            width: 100px;
            height: 100px;
        }

        .fly-enter-active {
            -webkit-transition: 1s linear;
        }

        .fly-leave-active {
            width: 100px;
            height: 100px;
            -webkit-transition: 1s linear;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="flag=!flag">点击显示/隐藏</button>
    <!--transition标签-->
    <transition name="fly">
        <div v-show="flag" class="fadeIn">
            显示或者隐藏
        </div>
    </transition>
</div>
<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		data: {
			flag: true
		}
	})
</script>
</body>
</html>

组件

定义:通俗可以理解为将一个模板替换一个标签

  • is的特性
  • slot插槽
全局组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <hello></hello>
</div>
<div id="app1">
    <hello></hello>
</div>
<script src="vue2.0.js"></script>
<script>
    /*let complateVue = Vue.extend({
     template: '<h2>hello Vue2.0!</h2>'
     });
     Vue.component('hello', complateVue);*/
	Vue.component('hello', {
		template: '<h2>{{msg}} Vue2.0!</h2>',
        //在组件中,data是一个函数,返回值是数据
        data(){
			return {
				msg:'hello'
            }
        }
	})
	let vm1 = new Vue({
		el: '#app'
	});
	let vm2 = new Vue({
		el: '#app1'
	})
</script>
</body>
</html>
局部组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <hello></hello>
</div>

<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		components: {
			hello: {
				template: '<i>hello,{{msg}}</i>',
				data(){
					return {
						msg: 'Vue2.0!!!'
					}
				}
			}
		}
	});

</script>
</body>
</html>
父子组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <parent>

    </parent>
</div>
<template id="tem">
    <div>
        <div>Parent</div>
        <child></child>
    </div>
</template>
<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		components: {
			parent: {
				template: '#tem',
				components: {
					child: {
						template: '<div>Child</div>'
					}
				}
			}
		}
	});

</script>
</body>
</html>

组件数据传递

父传子组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <parent></parent>
</div>
<template id="tem">
    <div>
        <div>Parent</div>
        <child :n='name'></child>
    </div>
</template>
<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		components: {
			parent: {
				template: '#tem',
				data(){
					return {
						name: 'yang'
					}
				},
				components: {
					child: {
						template: '<div>Child {{n}}</div>',
                        //可以校验传入数据的类型
						props: {n: String}
					}
				}
			}
		}
	});

</script>
</body>
</html>
子传父组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <parent></parent>
</div>
<template id="tem">
    <div>
        <div>Parent</div>
        {{age}}
        <child @age="ageNumber"></child>
    </div>
</template>
<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		components: {
			parent: {
				template: '#tem',
				methods: {
					ageNumber(data){
						this.age = data;
					}
				},
				data(){
					return {age: 0}
				},
				components: {
					child: {
						template: '<div @click="sayAge">Child</div>',
						methods: {
							sayAge(){
								//$emit向上发射
								this.$emit('age', this.age)
							}
						},
						data(){
							return {age: 27}
						}
					}
				}
			}
		}
	});

</script>
</body>
</html>
数据同步
<div id="app">
    <parent></parent>
</div>
<template id="tem">
    <div>
        <div>Prent</div>
        {{name}}
        <!--在vue1.0中可以通过n.aync同步-->
        <child :n="name"></child>
    </div>
</template>
<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		components: {
			parent: {
				template: '#tem',
				data(){
					//在2.0中,返回一个对象形式的
					return {name:{name:'yang'}}
				},
				components: {
					child: {
						template: '<div @click="updata">Child {{n.name}}</div>',
						methods: {
							//在Vue2.0中,子组件是不容许更改父组件中的数据
							updata(){
								this.n.name = 'China'
							}
						},
						props: {n: Object}
					}
				}
			}
		}
	})
</script>
数据不同步
<div id="app">
    <parent></parent>
</div>
<template id="tem">
    <div>
        <div>Prent</div>
        {{name}}
        <child :n="name"></child>
    </div>
</template>
<script src="vue2.0.js"></script>
<script>
	let vm = new Vue({
		el: '#app',
		components: {
			parent: {
				template: '#tem',
				data(){
					return {name: 'yang'}
				},
				components: {
					child: {
						template: '<div @click="updata">Child {{a}}</div>',
                        //通过生命周期函数把n转化为a可以防止更改子组件数据时候的报错
                        data(){
							return {a:''}
                        },
                        mounted(){
                            this.a = this.n
                        },
						methods: {
							updata(){
								this.a = 'China'
							}
						},
						props: {n: String}
					}
				}
			}
		}
	})
</script>
非父子组件
<div id="app">
    <hello></hello>
    <hello1></hello1>
</div>
<template id="hello">
    <div>hello
        <button @click="send">传递数据</button>
    </div>
</template>
<template id="hello1">
    <div>欢迎访问 {{msg}}</div>
</template>
<script src="vue2.0.js"></script>
<script>
	//事件 Event.$on   Event.$emit
	let Event = new Vue;
	let vm = new Vue({
		el: '#app',
		components: {
			hello: {
				template: '#hello',
				data(){
					return {msg: '杨洁个人网站'}
				},
				methods: {
					send(){
						Event.$emit('欢迎访问', this.msg)
					}
				}
			},
			hello1: {
				template: '#hello1',
				mounted(){
					Event.$on('欢迎访问', (data) => {
                        this.msg = data;
					});
				},
                data(){
					return {msg:''}
                }
			}
		}
	})
</script>

结束语

  • Vue2.0还在学习研究中,今天听闻2.5发布了,心情像日了狗一样。
  • 关于路由,环境配置,Vuex...
  • 长期更新吧,一边学一边用一边写。