更多
更多
文章目录
  1. vue是什么？
  2. vue的常用指令
  3. vue组件
  4. 过滤器
  5. 自定义指令
  6. 混合mixins
  7. 插槽slot

初识vue

2018.03.01 chen7 vue  热度 ℃

现在的vue有曾经的jquery之势，之前的了解也发现它的使用感真的很方便，行业的迭代总给很多人带来焦虑和恐惧，但是换一个态度看待，拥抱改变，世界总会向越来越便利越来越好的方向前行。

打算从头笔记一下方便日后查阅。

vue是什么？

vue是一个渐进式javascript框架

官网解释：

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

在视频介绍中说到:vue是响应式的，当我们数据变更时，vue会更新所有网页中用到它的地方。

我们可以将vue作为应用的一部分进行嵌入，带来更丰富的交互体验，我们也可以将更多的业务逻辑放进前端进行实现，vue的核心库及其生态系统可满足更多的需求core+vuex+vue-router

所以首先来认识他的基本用法吧。

vue的常用指令

v-for：专门用于迭代的指令

可以直接迭代一个数组对象：

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
<li v-for='food in foodList'>{{food.name}}</li>
<script>
var app=new Vue({
	el:'#app',
	data:{
		// foodList:['葱','姜','蒜']
		foodList:[
			{
				name:'葱',
				price:10,
				dis:.5,
			},
			{
				name:'姜',
				price:20,
				dis:.7,
			},
			{
				name:'蒜',
				price:30,
				// dis:.8,
			}
		]
	}
})
</script>

v-bind：绑定数据和元素属性v-bind可省略留下冒号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<a :href="url" v-bind:class='klass' v-bind:class='{active:isActive}'>点我</a>
<script>
// active:isActive
// 键名为类名active的更新取决于isActive是否为真，
// isActive是一个数据属性 
 var app=new Vue({
	el:'#app',
	data:{
		url:'https://www.baidu.com/',
		klass:'btn',
		isActive:true
	}
})
</script>

v-on：绑定事件，可同时绑定多个事件v-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
<div id="app">
  <button 
          v-on="{mouseenter:onEnter,mouseleave:onOut}" v-on:click='onClick'>点我</button>
  <form v-on:submit.prevent='onSubmit' @keyup.enter='Onsubmit'>
    <input type="text">
    <input type="submit" value="提交">
  </form>
</div>
<script>
  //修饰符.prevent阻止默认事件
  //修饰符.stop阻止事件冒泡
  //修饰符.enter用户敲回车键时的事件
  var app=new Vue({
	el:'#app',
	methods:{
		onClick:function(){
			alert('clicked');
		},
		onEnter:function(){
			console.log('mouseenter');
		},
		onOut:function(){
			console.log('mouseleave');
		},
		onSubmit:function(){
			console.log('提交')
		}
	}
})
</script>

v-model：数据双向绑定

在input，textarea，select元素上使用，有以下三个修饰符

  • .lazy惰性更新，鼠标blur时更新值，触发了change事件
  • .trim去掉用户输入的值前后空格
  • .number转换成数字类型
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
<div id="app">
  <label>
    男：
    <input type="radio" v-model='sex' value="male">
  </label>
  <label>
    女：
    <input type="radio" v-model="sex" value="female">
  </label>
  <br>
  {{sex}}
  <select v-model='des' multiple="multiple">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项一</option>
    <option value="4">选项二</option>
  </select>{{des}}
</div>
<script>
  var app=new Vue({
	el:'#app',
	data:{
		sex:'female',
		des:[]
	}
})
</script>

v-if / v-else-if / v-else ：控制流指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
  <div v-if="role=='admin'||role=='super'">
    管理员你好
  </div>
  <div v-else-if="role=='hr'">
    hr你好
  </div>
  <div v-else>
    你没有权限访问此页面
  </div>
</div>
<script>
  var app=new Vue({
      el:'#app',
      data:{
        role:"admin"
      }
	})
</script>

vue提供了一个计算属性computed

和methods的区别是，当数据没有改变时直接调用缓存中的数据，而不是每次都进行计算。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var app=new Vue({
	el:'#app',
	data:{
		english:140,
		math:130,
		physics:80,
	},
	computed:{
		sum:function(){
			return this.english+this.math+this.physics;
		},
		average:function(){
			return Math.round(this.sum/3);
		}
	}
})

vue组件

对常用的功能元素进行组件封装，方便使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="seg1">
  <alert></alert>
</div>
<script>
  var Alert={
		template:"<button @click='onClick'>哈哈哈</button>",
		methods:{
			onClick:function(){
				alert('yo.');
			}
		}
	}
// 以上只是进行了封装加载还没进行渲染
// 要给component一个生存空间域
new Vue({
	el:'#seg1',
	components:{
		alert:Alert
	},
})
</script>

父子通信通过props自定义属性形成沟通桥梁

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="demo">
  <alert message='小琪琪.'></alert>
</div>
<script>
//通过自定义属性进行组件传参的例子
//通过外部向内部传值
//使用props自定义属性
Vue.component('alert',{
	template:"<button @click='onClick'>哈哈哈</button>",
	props:['message'],
	methods:{
		onClick:function(){
			alert(this.message);
		}
	}
})
new Vue({
	el:'.demo',
})
</script>

子父通信通过触发事件的方式进行喊话沟通

通过$emit()触发事件

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
<div class="demo">
  <balance></balance>
</div>
<script>
Vue.component('balance',{//父组件
	template:`
		<div>
			<show @showBalance='show_balance'></show>
			<div v-if='show'>您的余额为77元</div>
		</div>
	`,
	methods:{
		show_balance:function(data){
			this.show=true;
			console.log(data)
		}
	},
	//方法可以承载更多的逻辑
	data:function(){
		return{
			show:false,
		}
	}
});
Vue.component('show',{//子组件
	template:"<button @click='onClick'>显示余额</button>",
	methods:{
		onClick(){
			this.$emit('showBalance',{a:1,b:2})
			//类似于jquery中的trigger用于触发一个事件
			//子组件触发一个事件 也可以传递数据
		}
	}
});

new Vue({
	el:'.demo',
})
</script>

平行通信通过中心事件调度器进行喊话通信

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
<div class="demo">
  <chen></chen>
  <qi></qi>
</div>
<script>
var Event=new Vue();//事件调度器
Vue.component('chen',{
	template:`
		<div>
			我说:
			<input type="text" v-model='iSaid' @keyup='onChange'/>
		</div>
	`,
	methods:{
		onChange:function(){
			Event.$emit('iSaid-sth',this.iSaid)
		}
	},
	data:function(){
		return{
			iSaid:'',
		}
	}
})

Vue.component('qi',{
	template:`
		<div>她说{{sheSaid}}</div>
	`,
	data:function(){
		return{
			sheSaid:'',
		}
	},
	mounted:function(){//生命周期的钩子，在初始化完成的瞬间执行
		var me=this;
		Event.$on('iSaid-sth',function(data){//调度器监听
			me.sheSaid=data;
		})//监听事件
	}
})
new Vue({
	el:'.demo',
})
</script>

过滤器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="demo">
  <input type="text" v-model='price'>
  {{price|currency}}
</div>
<script>
Vue.filter('currency',function(val,unit){
	//val为price传的值
	//unit参数为单位
	val=val||0;
	unit=unit||'元'
	return val+unit;
})
new Vue({
	el:'.demo',
	data:{
		price:''
	}
})
</script>

自定义指令

可复用的操作指令可进行自定义指令，类似一个自定义属性。

定义指令时要使用v

还可以自定义修饰符来进行传参指定。

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
<div class="demo">
		<div class="card card1" v-pin:true.bottom.right='card1.pinned'>
			<button @click='card1.pinned=!card1.pinned'>钉住</button>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae repudiandae error ipsum dignissimos deserunt praesentium iusto dolorum tempora incidunt sequi ipsam odit nesciunt tenetur sunt corporis, inventore animi harum voluptatibus?</div>

		<div class='card card2' v-pin:true.top.right="card2.pinned">
			<button @click='card2.pinned=!card2.pinned'>钉住</button>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ipsam sequi, iste voluptatem maiores sint quidem eveniet placeat consequatur sed ab nisi numquam minima fugit maxime unde blanditiis quis quia!</div>
</div>
<script>
Vue.directive('pin',function(el,binding){
	//el代表指令所在的整个元素
	//binding是指令的值或者基本信息
	//binding.modifiers可获取指令的修饰符，是一个对象可进行迭代
	//binding.arg传给指令的参数
	var pinned=binding.value;
	var position=binding.modifiers;
	var warning=binding.arg;
	if(pinned){
		el.style.position='fixed';
		for(var key in position){//判断key值是否存在
			if(position[key]){
				el.style[key]='10px';
			}
		}
		if(warning==='true'){
			el.style.background='yellow';
		}
	}else{
		el.style.position='static';
		el.style.background="#ccc"
	}
})
new Vue({
	el:'.demo',
	data:{
		card1:{
			pinned:false
		},
		card2:{
			pinned:false
		},
	}
})
</script>

混合mixins

重复功能和数据的储存器。

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
<div class="demo">
  <popup></popup>
  <tip></tip>
</div>
<script>
//vue会合并这个组件和对象
//在任何组件里可重复使用mixins的内容
//在当前组件里明确指定的东西会覆盖掉mixins的内容
  
var base={//vue中可以定义一个方法对象
	methods:{
		show:function(){
			this.visible=true;
		},
		hide:function(){
			this.visible=false;
		},
		toggle:function(){
			this.visible=!this.visible
		}
	},
	data:function(){
		return{
			visible:false,
		}
	},
}

Vue.component('tip',{
	template:`
	<div>
		<button @mouseenter='show' @mouseleave='hide'>提示</button>
		<div class="popup tip" v-if='visible'>
			<h4>title</h4>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi numquam nemo culpa fuga expedita nihil, accusamus at est veniam quod, quos! Ipsa amet neque consequuntur natus iste consectetur eaque, assumenda.
			</div>
		</div>
	</div>
	`,
	mixins:[base],
   
})

Vue.component('popup',{
	template:`
	<div>
		<button @click='toggle'>popup</button>
		<div class='popup' v-if='visible'>
			<h4>title</h4>
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aspernatur dolores, est minus dolore minima sapiente eius molestias! Iure harum ullam tenetur molestiae, quasi similique deserunt id qui? Soluta, dolores!
			</div>
		</div>
	</div>
	`,
	mixins:[base],
})
  
new Vue({
	el:'.demo',

})
</script>

插槽slot

让模块的内容信息变得自定义动态化，

给slot定义name分别管理每个插槽的内容，

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
<div class="demo">
  <panel>
    <div slot='title'>
      我是第一个标题
    </div>
    <div slot='content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, numquam. Mollitia quibusdam, inventore est, pariatur recusandae debitis nemo minus aliquam reprehenderit sunt sit, quod tempora deserunt accusantium expedita tenetur perspiciatis?</div>
    <div slot='footer'>
      我是第一个结尾
    </div>
  </panel>
  <panel>
    <div slot='title'>
      我是第2标题
    </div>
    <div slot='content'>Lorem ipsum</div>
  </panel>
</div>
<template id='panel-tpl'>
  <div class="panel">
    <h4>
      <slot name='title'>title</slot>
    </h4>
    <div class="content">
      <slot name='content'></slot>
    </div>
    <div class="footer">
      <slot name='footer'>查看更多</slot>
      <!-- 没有指定时默认信息 -->
    </div>
  </div>
</template>
<script>
Vue.component('panel',{
	template:'#panel-tpl',
})
new Vue({
	el:".demo",

})
</script>
感谢阅读
公众号