三、vue内置指令与自定义指令

三、vue指令

• （1.）常用内置指令

    		+  v-text ：更新元素的textContent，只渲染标签内容
    		+  v-html：更新元素的innerHtml，渲染html标签效果
    		+  v-once：只执行一次，数据改变时，内容不会更新
    		+  v-for：遍历数组/对象
    		+  v-bind （简写为 : ）：强制数据绑定
    		+  v-on （简写为 @） ：绑定监听事件
    		+  v-model：双向数据绑定
    		+  v-if：如果为true，当前标签才会输出到页面
    		+  v-if-else：紧跟着v-if
    		+  v-else：与v-if配合使用，当前标签（紧跟着v-if和v-else-if）
    		+  v-show：当前标签的display切换，显示/隐藏
    		+  ref：指定唯一标识，vue对象通过$ref属性访问这个元素对象
  

  // ref示例
  <p ref="content">ccccc</p>  //给元素p指定一个ref标识。想获取此元素中的内容
  this.$ref.content.innerHTML
  

    		+ v-cloak：防止刷新时闪现表达式，与css：[v-cloak] {display：none} 
  

  // v-cloak示例
  <p>{{msg}}</p> //当p元素设置隐藏时，在刷新时存在闪现问题。
  <p v-cloak>{{msg}}</p>
  <style>
  	[v-cloak]{display:none}
  </style>
  

• v-show与v-if的区别：

  • v-show本质是元素的display切换，加载时还是会渲染此元素。v-if则是当值为true时才开始渲染元素。在使用时根据不同需求来使用。

• （2）vue自定义指令

  1.全局指令：所有的vue对象都可以用为全局指令

  2.局部指令：只有指定的vue对象可以用为局部指令

<div id="demo">
	<p v-upper-text="msg"></p>
	<p v-lower-text="msgs"></p>
</div>
<script>
//定义全局指令
//el:指令属性所在的标签对象
//binding:包含指令相关信息数据的对象
Vue.directive("upper-text",function(el,binding){
	el.textContent = bingding.value.toUpperCase()
})
new Vue({
	el:"#demo",
	data:{
		msg:"i like computer!!"
		msgs:"I LIKE COMPUTER!!"
	},
	// 注册局部指令：
	directives:{
		"lower-text":{   //注册局部指令：只在当前vm管理范围有效
			bind(el,binding){
				// 大写转化指令
				el.innerHTML = bind.value.toLowerCase()
			}
		}
	}
})
</script>