Fork me on GitHub

Vuejs的指令及组件用法总结

vuejs介绍

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。
当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

mvvm模式

http://cn.vuejs.org/images/mvvm.png
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。
当创建了ViewModel后，双向绑定是如何达成的呢？
首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

helloworld示例

		<!--这是我们的View-->
		<div id="app">
			{{ message }}
		</div>
		
		// 这是我们的Model
		var exampleData = {
			message: 'Hello World!'
		}

		// 创建一个 Vue 实例或 "ViewModel"
		// 它连接 View 与 Model
		new Vue({
			el: '#app',
			data: exampleData
		})

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

定义View
定义Model
创建一个View实例或"ViewModel"，它用于连接View和Model
在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。
在这个示例中，选项对象的el属性指向View，el: '#app'表示该Vue实例将挂载到
<div id="app">...</div>这个元素；data属性指向Model，data: exampleData表示我们的Model是exampleData对象。
Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!"。

双向绑定

MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

<!--这是我们的View-->
<div id="app">
	<p>{{ message }}</p>
	<input type="text" v-model="message"/>
</div>

将message绑定到文本框，当更改文本框的值时，<p>{{ message }}</p> 中的内容也会被更新。
反过来，如果改变message的值，文本框的值也会被更新

vuejs常用指令

什么是指令呢？上面我们用到的v-model就是一个指令
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。
Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：

  • v-if指令
  • v-show指令
  • v-else指令
  • v-for指令
  • v-bind指令
  • v-on指令

v-if指令

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素
基本语法：
v-if="expression"
expression是一个返回布尔值的表达式，表达式可以是一个布尔属性，也可以是一个返回布尔的运算式。

<div id="app">
			<div v-if="isMale">男士</div>
			<div v-if="age>=20">age:{{age}}</div>
		</div>
		
var vm = new Vue({
			el: '#app',
			data: {
				age:25,
				isMale:true,
			}
		})

v-show指令

v-show和v-if区别。
v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染

先看两个截图，第一个是当isMale为true时，第二张图是isMale为false条件不成立时，可以看到v-if的html并没有渲染出来，
而使用v-show的div仅仅是更改了它的样式display: none;


<div id="app">
			<div v-if="isMale">男士v-if</div>
			<div v-show="isMale">男士v-show</div>
		</div>
var vm = new Vue({
			el: '#app',
			data: {
				isMale:false
			}
		})

v-else指令

v-else指令与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容

<div id="app">
			<div v-if="isMale">男士</div>
			<div v-else>女士</div>
		</div>
		var vm = new Vue({
			el: '#app',
			data: {
				isMale:true
			}
		})

v-for指令

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似
v-for="item in list"
list是一个数组，item是当前遍历的数组元素
v-for="(item,index) in list"其中index是当前循环的索引，下标从0开始

<div id="app">
			<table>
				<tr class="thead">
					<td>序号</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
				<tr v-for="(item,index) in list">
					<td v-text="index+1"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
				</tr>
			</table>
		</div>
		
var vm = new Vue({
			el: '#app',
			data: {
				list:[{
					name:'章三',
					age:18
				},{
					name:'李四',
					age:23
				}]
			}
		})

v-bind指令

v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），如v-bind: class

class可以和v-bind:class同时存在 ，也就是说有class了，再添加v-bind:class并不会覆盖原来的样式类，而是在原来基础上添加新的类名

<div id="app">
			<img v-bind:src="img" class="logo" 
				v-bind:class="isLogo?'':'product'" 
				v-bind:style="{'border':hasBorder?'2px solid red':''}"></img>
		</div>
		
		var vm = new Vue({
			el: '#app',
			data: {
				img:'https://www.baidu.com/img/bd_logo1.png',
				isLogo:false,
				hasBorder:true
			}
		})

以上v-bind:src也可简写成:src,修改上面代码

<div id="app">
			<img :src="img" class="logo" 
				:class="isLogo?'':'product'" 
				:style="{'border':hasBorder?'2px solid red':''}"></img>
		</div>

v-on指令

v-on用于监听DOM事件,用法和v-bind类似，例如给button添加点击事件
<button v-on:click="show">
同样，和v-bind一样，v-on也可以使用简写，用@符号代替，修改代码：
<button @click="show">

我们来看个例子：

以下是一个点击隐藏和显示p文本段落的代码

<div id="app">
			<p v-show="isShow">微风轻轻的吹来，带来了一丝丝凉意</p>
			<div>
				<button type="button" v-on:click="show(1)">显示</button>
				<button type="button" v-on:click="show(0)">隐藏</button>
			</div>
		</div>
		
		var vm = new Vue({
			el: '#app',
			data: {
				isShow:true
			},
			methods:{
				show:function(type){
					if(type){
						this.isShow = true;
					}else{
						this.isShow = false;
					}
				}
			}
		})

综合示例

<div id="app">
			<div class="title">添加新用户</div>
			<div class="form">
				姓名：<input type="text" v-model="person.name"><br/>
				年龄：<input type="text" v-model="person.age"><br/>
				<button class="btn" type="button" @click="add">添加</button>
			</div>
			<table>
				<tr class="thead">
					<td>序号</td>
					<td>姓名</td>
					<td>年龄</td>
					<td>操作</td>
				</tr>
				<tr v-for="(item,index) in list">
					<td v-text="index+1"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
					<td>
						<a href="javascript:;" @click="deleteItem(index)">删除</a>
						<a v-if="item.age>=25" href="javascript:;" @click="marry(index)">可以结婚了</a>
					</td>
				</tr>
			</table>
		</div>
		new Vue({
			el: '#app',
			data: {
				person:{
					name:'',
					age:'',
				},
				list:[{
					name:'章三',
					age:18
				},{
					name:'李四',
					age:23
				}]
			},
			methods:{
				add:function(){
					this.list.push(this.person);
					this.person = {name:'',age:''};
				},
				deleteItem:function(index){
					// 删除一个数组元素
					this.list.splice(index,1);
				},
				marry:function(){
					alert("不好意思，你没有女朋友结不了婚");
				}
			},
			created:function(){
			}
		})

vue组件

组件 (Component) 是 Vue.js 最强大的功能之一，使用组件化方式开发，可以封装可重用的代码，减少重复劳动

接下来，我们来注册一个组件
语法Vue.component(tagName, options)

注册组件

		Vue.component('component-a', {
		  template: '<div>component-a</div>'
		})

component-a是注册的组件标签，下面就可以使用这个组件了

<div id="app">
			 <component-a></component-a>
		</div>

// 创建根实例
new Vue({
  el: '#app'
})

最后，渲染为：

<div id="app">
	<div>component-a!</div>
</div>

通过Vue.component方式注册的组件是一个全局组件 ，我们还可以创建局部组件，通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件

var Child = {
		  template: '<div>A custom component!</div>'
		}
		var vm = new Vue({
			el: '#app',
			components:{
				'component-a':Child
			}
		})

局部注册的组件 将只在父组件模板中可用

组件通信

组件 A 在它的模板中使用了组件 B，它们之间必然需要相互通信，父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件
我们先来看一张图

从图上可以很清晰的看到，父子组件通信主要是使用prop和自定义事件，父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。
父子组件的关系可以总结为 prop 向下传递，事件向上传递。

来看个示例：

<div id="app">
			 <div>
			 	接收到的子组件回复消息：{{replyMsg}}
			 </div>
			 <component-a v-bind:msg="msg" @reply="replay"></component-a>
		</div>
		<template id="componentA">
			<div>
				<div>我是组件a，接收到父类的消息是：{{msgfilter}}</div>
				<div @click="reply">回复</div>
			</div>
		</template>

Vue.component('component-a', {
		  template: '#componentA',
		  props:['msg'],
		  data:function(){
		  	return{
		  		msgfilter:'处理后的消息-》'+this.msg
		  	}
		  },
		  methods:{
		  	reply:function(){
		  		this.$emit('reply','子组件消息')
		  	}
		  }
		})
		var vm = new Vue({
			el: '#app',
			data:{
				msg:'父组件消息',
				replyMsg:''
			},
			methods:{
				replay:function(msg){
					this.replyMsg = msg
				}
			}
		})

需要注意的是，组件里面的data必须是一个函数，通过return形式返回

1.父组件下发数据到子组件

在组件中通过v-bind添加一个参数将数据传递到子组件里，然后使用props接收传递过来的参数props:['msg']
<component-a v-bind:msg="msg"></component-a>
渲染结果：

2.子组件通过事件给父组件发送消息
子组件通过$emit触发事件

this.$emit('reply','子组件消息')

在组件标签中通过v-on进行监听

<component-a v-bind:msg="msg" @reply="replay"></component-a>

监听到事件后触发reply函数，接收到子组件发送的消息

replay:function(msg){
					this.replyMsg = msg
				}

渲染结果：

<div id="app">
	<div>
		接收到的子组件回复消息：子组件消息
	</div> 
	<div>
		<div>我是组件a，接收到父类的消息是：处理后的消息-》父组件消息</div> 
		<div>回复</div>
	</div>
</div>

以上可以看到我们是通过字符串数组来定义prop的，除此之外我们还可以用对象的形式来定义prop，用来为组件的 prop 指定验证规则，
type的值可以是这些：String Number Boolean Function Object Array Symbol,例如：

      props: {
        name: String,
        showDialog: {
            type: Boolean,
            default: false
        }
      }

实现一个dialog对话框组件

<div id="app" class="main">
		<div v-text="isLogin?'注销':'登录'" @click="login">登录</div>
		<div class="amount"><input type="tel" name="" v-model="amount"></div>
		<div class="btn_submit" @click="submit">确定</div>
		<v-dialog :show-dialog="showDialog" :msg="msg" :type="type" @close-dialog="closeDialog"></v-dialog>
	</div>
	<template id="dialog">
		<div class="dialog" v-if="showDialog">
			<div class="dialog_mask"></div>
			<div class="dialog_container">
				<div class="dialog_content">
					<div class="dialog_content_top" v-text="msg">提示内容</div>
					<div class="dialog_btn">
						<a v-if="type==1" href="javascript:;" class="btn" @click="close">确定</a>
						<a v-if="type==2" href="javascript:;" class="btn" @click="close">取消</a>
						<a v-if="type==2" href="javascript:;" class="btn" @click="login">去登录</a>
					</div>
				</div>
			</div>
		</div>
	</template>

Vue.component('v-dialog', {
		    template: '#dialog',
		    // props:['msg','type','showDialog'],
		    props:{
		    	msg:String,
		    	type:Number,
		    	showDialog:{
		    		type: Boolean,
          			default: false
		    	}
		    },
		    data:function(){
                return {
                }
            },
            methods:{
            	close:function(){
            		// 触发父类关闭窗口事件
            		this.$emit('close-dialog');
            	},
            	login:function(){
            		console.log("登录跳转中...");
            		this.$emit('close-dialog');
            	}
            }
		})
		// vue实例
		var vm = new Vue({
			el: '#app',
		  	data: {
		  		amount:'',
		  		msg:'',
		  		showDialog:false,
		  		type:1,// 提示类型  1单按钮提示框  2双按钮提示框
		  		isLogin:true
			},
			methods:{
				login:function(){
					this.isLogin = !this.isLogin;
				},
				submit:function(){
					//弹出对话框组件
					if(!this.isLogin){//未登录
						this.msg = "请先去登录再领取金额";
						this.showDialog = !this.showDialog;
						this.type = 2;
						return;
					}
					if(this.amount){
						if(this.amount<1 || this.amount>1000){
							this.msg = "输入金额不能低于1元大于1000";
							this.showDialog = !this.showDialog;
							this.type = 1;
						}else{
							this.msg = "领取成功，请在账户中心查看";
							this.showDialog = !this.showDialog;
							this.type = 1;
						}
					}else{
						this.msg = "领取金额不能为空";
						this.showDialog = !this.showDialog;
							this.type = 1;
					}
				},
				closeDialog:function(){//关闭对话框
					this.showDialog = false;
				}
			}
		})

总结

以上简单介绍了vuejs的MVVM模型和它的双向绑定机制，然后以一个helloworld示例开始了vuejs的使用，
之后又了解和熟悉了几个比较常用的vue指令，综合以上，构建了一个简单的示例,最后讲了vue中组件的一些
用法，父子组件是如何进行通信的，结合组件用法，实现了一个对话框组件。

作者：fozero
声明：原创文章，转载请注明出处，谢谢！http://www.cnblogs.com/fozero/p/8563939.html
标签：vuejs

posted @ 2018-03-14 00:01  fozero  阅读(23019)  评论(0)  编辑  收藏  举报