02.vue常用指令

vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性。将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为。(比如html的em标签字体就会斜体,strong标签字体就会粗体)

vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令:

v-model
v-if、v-else if 、 v-else
v-show
v-for
v-bind
v-on
vue.js具有良好的扩展性,我们也可以开发一些自定义的指令,后面的文章会介绍自定义指令。
 

v-model

在vue中可以使用v-model指令在表单元素上创建双向数据绑定。

例子 :

<template>
  <div>
    <div><input v-model="text">{{text}}</div>
    <div>
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      text : '',
      selected: ''
    }
  }
}
</script>

 

条件语句 (v-if、v-else if 、 v-else

条件语句 和javascript中的条件语句语句意思一样的

例子 :

<template>
  <div>
    <div v-if="number === 1">1</div>
    <div v-else-if="number === 2">2</div>
    <div v-else>3</div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      number : 2
    }
  }
}
</script>

 

v-show

v-show也是条件渲染指令,和v-if指令不同的是,使用v-show指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性。(指 :display:none / block)

例子 :

<template>
  <div>
    <div v-show="number === 1">1</div>
    <div v-show="number === 2">2</div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      number : 2
    }
  }
}
</script>

 

怎么选择用v-if还是v-show?

v-if如果为false,则改html内容不会被渲染到页面中。比如:

<div id='app'>
    <div class='ctx' v-if="false">容器</div>
</div>

运行后右键审查元素,会发现<div class='ctx'>容器</div>没有这段代码。

而v-show为false,则<div class='ctx'>容器</div>会被显示到页面中,只是它现在被设置成了display:none;而已。

所以,如果该html内容需要频繁的展示、隐藏,则用v-show,否则用v-if 。因为v-if会重新渲染页面,会引起重排和重绘,页面也会发生“卡“的现象。

 

v-for

v-for 即for循环

例子:

<template>
  <div>
    <ul>
      <li v-for="(item,key) in list" :key="key">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data(){
    return{
      list : ['apple', 'banana', 'egg']
    }
  }
}
</script>

ps :遍历json也是上面的写法

 

v-bind

v-bind用于为当前的元素绑定一些脚本的值。如下面的例子,v-bind为a标签绑定了href

<template>
  <div>
    <ul>
      <li v-for="(item,key) in linkJson" :key="key"><a v-bind:href="item.url">{{item.urlName}}</a></li>
    </ul>
  </div>
</template>
<script>
export default {
  data(){
    return{
      linkJson : [{
        url : 'http://www.baidu.com',
        urlName : '百度'
      },{
        url : 'http://www.duote.com',
        urlName : '多特'
      }]
    }
  }
}
</script>

v-bind也可以简写,如 :

<a :href="item.url">

 

v-on

v-on用于绑定事件,执行对应的函数。

<template>
  <div>
    <div v-on:click="say">say</div>
  </div>
</template>
<script>
export default {
  methods:{
    say(){
      alert('hello');
    }
  }
}
</script>

v-on也可以简写,如 :

<div @click="say">say</div>

 

阻止事件冒泡

使用stop可以阻止事件冒泡,如 :

<template>
  <div>
    <div @click="say0">
      <span @click.stop="say1">say1</span>
    </div>
  </div>
</template>
<script>
export default {
  methods:{
    say0(){
      alert('say0');
    },
    say1(){
      alert('say1');
    }
  }
}
</script>

 


 

 

 

 

 

 

 

 

自定义指令

使用Vue的静态方法directive,我们可以定义属于自己的指令。

Vue.directive(指令的名字, 回调函数)

例子

 

<div id='app'>
	<span v-red>vue</span>
</div>
<script src='../js/vue.js'></script>
<script>
	Vue.directive('red', function(){
		this.el.style.color = 'red';
	});
	new Vue({
		el : '#app'
	});
</script>

标签使用了v-red指令后,字体颜色会变红。回调函数里的this.el就是被绑定的v-red的span。 需要注意的是,directive函数里的指令名字不要带v-

 

指令传参

指令后面加上 = “”可以以字符串的形式传参。(而且也只能以字符串的形式传递参数) 

如 :

v-set="{size:'40px', color:'blue'}"

例子 :

 

<div id='app'>
	<span v-set='{size : "40px", color : "blue"}'>hello</span>
</div>
<script src='../js/vue.js'></script>
<script>
	Vue.directive('set', function(json){
		this.el.style.fontSize = json.size;
		this.el.style.color = json.color;
	});
	new Vue({
		el : '#app'
	});
</script>

 

自定义拖拽指令

 

<div id='app'>
	<div class='box' v-drag></div>
</div>
<script src='../js/vue.js'></script>
<script>
	Vue.directive('drag', function(){
		var div = this.el;
		div.onmousedown = function(e){
			disX = e.clientX - div.offsetLeft;
			disY = e.clientY - div.offsetTop;
			document.onmousemove = function(e){
				var l = e.clientX - disX;
				var t = e.clientY - disY;
				div.style.left = l + 'px';
				div.style.top = t + 'px';
			}
			document.onmouseup = function(){
				document.onmousedown = document.onmousemove = null;
			}
		}	
	});
	new Vue({
		el : '#app'
	});
</script>

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值