02. vue常用指令

于2022-10-10 15:07:56发布

107

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>