Vue教程 vue常用指令 与 自定义指令

常用指令

v-text : 更新元素的textContent. 可以用{{ }}代替。

<p v-text="msg"></p>
<p>{{ msg }}</p>

data: {
	msg : 'Hello World!'
}

v-html : 更新元素的innerHTML。

<div v-html="content"><p>

data: {
	content: '<p>hello world!</p>'
}

v-once：组件/元素在模板解析时解析绑定数据的初始值，以后的不再更新。

#被v-once指令修饰，则仅仅初始化msg对象的值，不添加监视器。
<p v-once>{{msg}}</p>

data: {
	msg : 'hello world!'
}

v-if, v-else-if, v-else, v-show 判断组件或元素是否显示。

<div v-if="loginType == 1">
    <h2>账号密码登录</h2>
</div>
<div v-if="loginType == 2">
    <h2>手机验证码登录</h2>
</div>
<div v-else>
    <h2>社交账号登录</h2>
</div>

<div v-show="isOk">
	<p>确定</p>
</div>
<div v-show="!isOk">
	<p>取消</p>
</div>

v-for ：遍历数组或对象

<ul>
    <li v-for="(item, index) in list">
        {{ index }} - {{ item.name }}
    </li>
</ul>

data: {
    list: [
        {
            id: 1,
            name: "苹果"
        },
        {
            id: 2,
            name: "梨子"
        },
        {
            id: 3,
            name: "香蕉"
        },
    ]
},

v-on：绑定事件监听，一般简写为@

<a @click.prevent="toNext">前往下一页</a>

methods: {
    toNext( event ){
        alert( event );
    }
},

v-bind: 绑定标签属性，一般简写为(😃

<style>
   .login-field {
       display: block;
   }

   .common-field {
       width: 200px;
       height: 200px;
       background-color: red;
   }
</style>

<p :class="[ clazz, clazz1 ]"></p>

data: {
     clazz : 'login-field',
     clazz1 : 'common-field'
}   

v-model: 对有输入能力的表单控件进行双向数据绑定

#所有的表单元素都是用v-model进行绑定。
<input v-model="msg" placeholder="请输入内容">
<p>{{msg}}</p>

 data: {
 	msg : 'Hello World!'
 }

ref : 指定唯一表示。可以通过这个唯一标识获取对应的dom。

<p ref="content">hello world</p>
<button @click="hint">/button>

methods: {
	hint(){
		#通过$refs获取到ref唯一标识符对应的dom对象。
		alert( this.$refs.content.textContent );
	}
}

v-cloak: 防止页面闪烁，html模板未解析完成之前，进行内容隐藏。

<style>
	#定义一个属性选择器，属性为v-clock的标签，将会隐藏。
	[v-clock]{ display: none }
</style>

#在需要放置闪烁的标签上加上 v-cloak 属性，则该组件/元素，以及内部标签，都将会在html模板解析并替换完成之后才显示（即v-cloak属性被移除）。
<p v-cloak>{{ msg }}</p>

自定义指令

vue允许自定义指令，且可以定义全局指令，也可以定义局部指令。自定义指令的作用，主要用于复用程度较高的操作。对于自定义标签，即Vue会将自定义标签绑定的变量，和对应的dom，都交由用户自己处理。

自定义全局指令

#指令名字 为 （'v-' + 指令函数名称）。
<div id="app" >
     <p v-upper-text="msg"></p>
     <p v-lower-text="msg"></p>
</div>

#
/**
 * 1.定义全局指令
 *  el : 指令属性所在的标签对象.
 *  binding: 包含指令相关信息数据的对象.
 * */
 Vue.directive( 'upper-text', function(el, binding){
     console.log(el, binding);
     el.textContent = binding.value.toUpperCase();
 } );

自定义局部指令

<div id="app" >
      <p v-upper-text="msg"></p>
      <p v-lower-text="msg"></p>
</div>

 const vm = new Vue({
    el : '#app',
    data: {
	},
	directives : {
       'lower-text':function(el, binding){
           console.log(el, binding);
           el.textContent = binding.value.toLowerCase();
       }
    }
}