Vue.js学习笔记（代码）-方便查阅

1.语法

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

<div id="app">
		<span>{{ name }}</span>		//C.C
		<span>{{ call() }}</span>	//hello C.C
</div>

var app = new Vue({	
	el:'#app',		//vue中内容直接与内存绑定
	data:{
		name:'C.C'	//data中所有属性直接绑定到app中
	},
	methods:{
		call:function(){
			return 'hello '+this.name;
		}
	}
})

在控制台中调用：app.name = 'A.A'
输出：A.A

Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

data 用于定义属性。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

2.常用指令

v-bind 动态赋予属性

/*****判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类*****/
<div>
	<div v-bind:class="{'class1': use}">v-bind:class 指令</div>
</div>

new Vue({
     el: '#app',
	 data:{
	     use: false
	 }
});

/***** 更新属性 *****/
<div id="app">
    <a v-bind:href="url">点我</a>
</div>
    
new Vue({
  el: '#app',
  data: {
    url: 'http://www.4399.com'
  }
})

ex. v-bind可省略(保留冒号)

v-on 指定动作

<div id="app">
		<button v-on="{mouseenter:mouseEnter, mouseleave:mouseLeave, click:onClick}" >喔在这</button>
	</div>
	
var app = new Vue({
	el:'#app',
	data:{
		url:'https://www.bilibili.com/'
	},
	methods:{
		onClick : function(){
			console.log('clicked')
		},
		mouseEnter:function(){
			console.log('mouseEnter')
		},
		mouseLeave:function(){
			console.log('mouseLeave')
		}
	}
		
})

ex. v-on:keyup.enter="keyEnter" 当按下回车键执行keyEnter
ex. v-on可替换为@

v-model 双向绑定

<div id="app">
		<div>
			<input type="text" v-model="name">
			<span v-show="name">你的名字是{{ name }}</span>
		</div>
		<div>
			<input type="text" v-model="age">
			<span v-show="age">你的年龄是{{ age }}</span>
		</div>
		<div>
			<input type="text" v-model="sex">
			<span v-show="sex">你的性别是{{ sex }}</span>
		</div>
</div>

var app = new Vue({
	el:'#app',
	data:{
		name:null,	//data中所有属性直接绑定到app中
		age:null,
		sex:"male",
	}
})

ex. v-model作用域<input>/<textarea>/<select>
ex. v-model.lazy惰性更新(blur后更新)
	v-model.trim省略空格
	v-model.number转换成数字

v-if, v-else-if, v-else 控制流指令

<div id="app">
		<div v-if="role == 'boy'">
			小哥哥你好
		</div>
		<div v-else-if="role == 'girl'">
			小姐姐你好
		</div>
		<div v-else>
			emmm...
		</div>
</div>

var app = new Vue({
	el:'#app',
	data:{
		role:"boy"
	}
})

ex. 调用：app.role = 'girl' ==> 小姐姐你好
ex. 在v-if中，判断为false，元素将从dom中删除
	在v-show中，判断为false，元素仍保留在dom中
	测试代码：
	<div id="app">
		<div v-show="role == 'boy'" id="test1">
			小哥哥你好
		</div>
		<div v-if="role == 'girl'" id="test2">
			小姐姐你好
		</div>
		<div v-if="role == ' '" id="test3">
			emmm...
		</div>
	</div>
	
	var app = new Vue({
		el:'#app',
		data:{
			role:" "
		}
	})
	var test1 = document.getElementById('test1');
	console.log(test1)			//	<div id="test1" style="display: none;">小哥哥你好</div>
	
	var test2 = document.getElementById('test2');
	console.log(test2)			//null
	
	var test3 = document.getElementById('test3');
	console.log(test3)			//<div id="test3">emmm...</div>

v-for 动态遍历

<div id="app">
		<ul>
			<li v-for="drink in drinklist">{{drink.name}} ${{drink.price * drink.discount}}</li>
		</ul>
</div>

var app = new Vue({
	el:'#app',
	data:{
		drinklist:[
			{
				name:"milk",
				price:20,	
				discount:.8
			},
			{
				name:"coffee",
				price:30,
				discount:.5
			}
		]
	}
		
})

//	milk $16
	coffee $15
	
//	app.drinklist.push({name:'cola', price:'5',  discount:.8})

	3
	milk $16
	coffee $15
	cola $4

3.计算属性

computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。（计算属性会缓存结果，如果结果不变直接从缓存取，而方法则每次都会执行）

<div id="app">
		<table border="1px">
			<thead>
				<td>学科</td>
				<td>成绩</td>
			</thead>
			<tbody>
				<tr>
					<td>语文</td>
					<td><input type="text" v-model.number="chinese"></td>
				</tr>
				<tr>
					<td>数学</td>
					<td><input type="text" v-model.number="math"></td>
				</tr>
				<tr>
					<td>英语</td>
					<td><input type="text" v-model.number="english"></td>
				</tr>
				<tr>
					<td>总分</td>
					<td>{{ sum }}</td>
				</tr>
				<tr>
					<td>平均分</td>
					<td>{{ average}}</td>
				</tr>
			</tbody>
		</table>
	</div>

var app = new Vue({
	el:'#app',
	data:{
		math:90,
		chinese:80,
		english:30
	},
	computed:{
		sum:function(){
			return (this.chinese + this.math + this.english);	
		},
		average:function(){
			return Math.round(this.sum/3)
		}
	}
})

4.组件

组件可以扩展 HTML 元素，封装可重用的代码。

/***** 基本配置 *****/
	<div id='app'>
		<alert msg="hello world!"></alert>
	</div>
	
Vue.component('alert',{
	template:'<button @click="on_click()">TTT</button>',
	props:['msg'], // 传递数据的一个自定义属性
	methods:{
		on_click:function(){
			alert(this.msg);
		}
	}
})

new Vue({
	el:'#app'
})

/***** 父子通信 *****/
Vue.component('balanced',{
	template:`
		<div>
			<show @show_balance="is_show_balance"></show>	
			<div v-if="showed">$99.99</div>
		</div>
	`,//监听事件并进行反应
	methods:{
		is_show_balance(data){
			this.showed= true;
			console.log('data:', data);		//确认收集到数据
		}
	},
	data:function(){	//data 是一个函数，好处是每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例
		return {
			showed: false,
		}
	}
});

Vue.component('show',{
	template:'<button @click="on_click()">显示余额</button>',
	methods:{
		on_click(){
			this.$emit('show_balance',{a:1, b:2});		//发送事件show_balance 和数据{a:1, b:2}
		}
	}
		
})

new Vue({
	el:'#app'
})


/***** 同级通信 *****/
var Event = new Vue;	//中间事件

Vue.component('user1',{
	template:`
		<div>
			我说：<input @keyup="on_change" type="text" v-model="i_say">
		</div>
	`,
	methods:{
		on_change(){
			Event.$emit('user1_sentence',this.i_say);
		}
	},
	data:function(){
		return {
			i_say:'',
		}
	}
});

Vue.component("user2",{
	template:`
		<div>
			user1说：<input type="text" v-model="o_say">
		</div>
	`,
	data:function(){
		return {
			o_say:'',
		}
	},
	mounted:function(){
		me = this;
		Event.$on('user1_sentence',function(data){	//监听事件，收到数据
			me.o_say = data;
		})
		
	}
})

new Vue({
	el:'#app'
})

// 	使用 $on(eventName) 监听事件
	使用 $emit(eventName) 触发事件

5.过滤器

	<div id='app'>
		<input v-model="price">
		{{ price | currency('dollar')}}
	</div>

	Vue.filter('currency',function(val,unit){	//第一个参数来自Vue，第二个参数为传参
		val = val || 0;
		unit = unit || 'rmb';
		return val + unit;
	});
	
	new Vue({
		el:'#app',
		data:{
			number:10,
			unit1:'',
		},
		methods:{
			
		}
	})

6.自定义指令

<style>
	.card{
		background: #f00;
		width:200px;
		font-size: 15px;
		margin: 10px;
	}
	</style>
	
<div id='app'>
		<div v-pin.bottom.right="card1.pinned" class='card'>
			<button @click="card1.pinned = !card1.pinned">fixed</button>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		</div>
		<div v-pin="card2.pinned" class='card'>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		</div>
		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur placeat laboriosam sint officia perspiciatis porro temporibus voluptates libero nobis assumenda natus ad, nemo exercitationem a, fugit consequatur reprehenderit, voluptatem quidem.</div>
		<div>Consectetur at quae soluta recusandae impedit praesentium molestias iste, odio quia dolores sunt labore, atque, quidem dignissimos eligendi placeat. Perspiciatis repudiandae itaque illo perferendis consequatur. Rerum, cupiditate. Molestias, repellendus? Modi!</div>
		<div>Ad cupiditate aspernatur, similique obcaecati veniam ipsam quos nostrum vel esse! Dolorum nihil enim libero saepe laboriosam, at id, voluptatum rerum architecto veritatis corrupti quia iure quae ipsam, voluptates vero.</div>
		<div>Similique doloribus sequi voluptatibus sunt mollitia veritatis libero, perferendis, fuga alias amet, aut? Consequatur officia ullam praesentium dolor exercitationem dignissimos, voluptatibus, quis provident saepe quasi doloribus, fugit nobis quo non!</div>
		<div>Optio corporis natus similique molestias, soluta fugit error dolorem excepturi, nesciunt consequuntur dignissimos obcaecati ratione, maxime nihil nam corrupti! Unde dolorem officiis voluptas rerum et adipisci reprehenderit autem ab. Deleniti!</div>
	</div>
	
Vue.directive('pin',function(el,binding){
	var position = binding.modifiers;
	console.log(position)
	if(binding.value){
		el.style.position = 'fixed';
		for(var key in position){
			if(position[key]){
				el.style[key]='10px';
			}
		}
	}else{
		el.style.position='static';
	}
})

new Vue({
	el:'#app',
	data:{
		card1:{
			pinned:false,
		},
		card2:{
			pinned:false,
		}
	}
})

7.混合mixins

mixins 定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

<div id='app'>
		<toolip></toolip>
		<hr/>
		<Popup></Popup>
	</div>

var base = {
	methods:{
		torggle:function(){
			this.visible = !this.visible;
		}
	},
	data:function(){
		return{
			visible:true,
		}
	},
}

Vue.component('toolip',{
	template:
	`
		<div>
			<span @mouseover="visible = false" @mouseleave="visible = true">bys</span>
			<div  v-if="visible">hello world!</div>
		</div>
	`,
	mixins:[base],
})

Vue.component('Popup',{
	template:
	`	<div>
			<button  @click="torggle" >Popup</button>
			<div v-if="visible">
				<span @click="torggle">X</span>
				<h4>title</h4>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odit nemo eaque minus architecto animi vero asperiores, harum nobis veniam quibusdam sunt, cumque temporibus blanditiis, libero repudiandae ab magnam corporis.
			</div>
		</div>
	`,
	mixins:[base],
})

new Vue({
	el:'#app',
	data:{
	}
})

ex. 如果 methods 选项中有相同的函数名，则 Vue 实例优先级会较高。

7.插槽slot

<div id='app'>
		<part>
			<div slot="header">
				yo.
			</div>
			<div slot="footer">
				yo3.
			</div>
			<div slot="content">
				yo2.
			</div>
		</part>
	</div>
	<template id='pl'>
			<div class='panel'>
				<div class="header">
					<slot name="header"></slot>
				</div>
				<div class="content">
					<slot name="content"></slot>
				</div>
				<div class="footer">
					<slot name="footer"></slot>
				</div>
			</div>
	</template>
	
Vue.component('part',{
	template:'#pl',
})

new Vue({
	el:'#app',
	data:{
	}
})