1. v-bind
v-bind可以绑定Dom元素的属性:
<head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/vue"></script> <style type="text/css"> .A {color: indianred;} </style> </head> <body> <div id="app"> <div v-bind:class="classA">Hello Vue!</div> <!--可以简写为: --> <div :class="classA">Hello Vue!</div> <img v-bind:src="iconSrc"> <!--可以简写: --> <img :src="iconSrc"> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { classA: 'A', iconSrc: 'https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=6b8642ca860a19d8cf03830703fa82c9/50da81cb39dbb6fdf55ffe5d0f24ab18972b3740.jpg' } }) </script> </body>使用v-bind:attr和:attr的效果是一样的:
1.1 v-bind绑定Dom元素的属性还支持绑定数组和对象:
<head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/vue"></script> <style type="text/css"> .A {color: indianred;} .classB{background-color: aquamarine} .classC{font-size: 30px; color:dodgerblue} </style> </head> <body> <div id="app"> <div :class="[classA, {classB: hasB, classC: hasC}]">Hello Vue!</div> <div v-bind:class="{classC: !hasC}">Hello PHP!</div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { classA: 'A', hasB: true, hasC: false } }) </script> </body>效果:
需要注意的是,v-bind绑定Dom节点属性的时候,数组中的元素item需要在Vue.data中进行定义,Vue会将Vue.data中item的数值赋给Dom节点当前绑定的属性;若v-bind绑定使用了对象(key-value)的方式,value需要在Vue.data中进行定义,当value=true的时候,key会被当作一个字符串赋给Dom节点的属性。
1.2 v-bind绑定Dom节点的属性需要制定绑定的属性 e.g. v-bind:src="xxx"或:src="xxx",若v-bind后不指定属性则表示绑定当前的Dom节点,此时v-bind中使用一个对象(key-value),key作为节点的属性,value作为该属性的值需要在Vue.data中定义,需要注意的是,Vue编译会将key统一转换为小写字母赋给节点当作节点的属性名:
<head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/vue"></script> <style type="text/css"> .B{background-color: aquamarine} </style> </head> <body> <div id="app"> <div v-bind="{id: domID, CLASS: classB, OtherATTR: otherAttr}">Hello PHP!</div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { domID: 'id_div', classB: 'B', otherAttr: 'my_name' } }) </script> </body>效果:
2. v-on绑定节点的事件监听器
v-on进行绑定事件,需要指定绑定的事件类型(click,change,foucs,submit,keyup....),表达式可以是一个方法名也可以是一个内联函数:
<div id="app"> <button v-on:click="click_btn">点击事件</button><br/> <!--内联函数 --> <button v-on:click="_click_btn('hello', $event)">点击事件</button><br/> <!--简写 --> <button @click="click_btn">点击事件</button><br/> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', methods:{ click_btn: function(event){ console.log("click_btn") }, _click_btn: function(str, event){ console.log("_click_btn : " + str) } } }) </script>
效果:
2.1 v-on在绑定事件监听器的时候,还可以跟修饰符
- .stop 不会将绑定click事件向上传给父节点,同调用event.stopPropagation()
- .self 只有当自己的监听器相应的时候才相应,并触发回调函数
- .prevent 屏蔽掉节点原有的相应事件
2.1.1 v-on.click.stop
<div id="app"> <div style="background-color: dodgerblue" @click="click_div"> <button @click="click_button">点击事件</button><br/> <button @click.stop="click_button">点击事件stop</button> </div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', methods: { click_div: function(event){ console.log("click_div") }, click_button: function(event){ console.log("click_button") } } }) </script>效果:
2.1.2 v-on.click.self
使用click.self可以实现click.stop类似的效果:
<div id="app"> <div style="background-color: dodgerblue" v-on:click.self="click_div"> <button @click.self="click_button">点击事件</button><br/> </div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', methods: { click_div: function(event){ console.log("click_div") }, click_button: function(event){ console.log("click_button") } } }) </script>效果:
2.1.3 v-on.submit.prevent / v-on.reset.prevent
v-on.submit.prevent可以屏蔽form表单自动submit的操作,v-on.reset.prevent可以屏蔽掉form表单中reset的默认行为。
<div id="app"> <form @submit.prevent="click_submit" @reset="click_reset"> <input type="text"> 提交: <input type="submit"><br/> 重置: <input type="reset"> </form><br/> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', methods: { click_submit: function(event){ console.log("click_submit") }, click_reset: function(event){ console.log("click_reset") } } }) </script>效果:
使用@submit.prevent会屏蔽form表单submit之后刷新表单的操作,同时@reset只绑定了监听函数,所以reset的默认操作还是有的:
<div id="app"> <form @submit="click_submit" @reset.prevent="click_reset"> <input type="text"> 提交: <input type="submit"><br/> 重置: <input type="reset"> </form><br/> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', methods: { click_submit: function(event){ console.log("click_submit") }, click_reset: function(event){ console.log("click_reset") } } }) </script>效果:
当v-on:submit 没有使用prevent进行修饰的时候,点击submit之后,表单会打印click_submit,然后迅速进行表单刷新,另外@reset.prevent屏蔽了reset默认的操作,只是执行了v-on绑定的函数。
2.1.4 v-on还可以绑定键盘事件, v-on:keyup="func"
<div id="app"> <input v-on:keyup="click_keyup" /> <!--相应单一的键 --> <input v-on:keyup.enter="click_keyup_enter"> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', methods: { click_keyup: function(event){ console.log("click_keyup: " + event.keyCode) } } }) </script>效果如下:
Vue还支持自定义键名:
<script type="text/javascript"> <!--Enter键的 键值为13 --> Vue.config.keyCodes.ent = 13 </script> <div id="app"> <input v-on:keyup.ent="click_keyup_ent"> <input @keyup.esc="click_esc"> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', methods: { click_keyup_ent: function(event){ console.log("click_keyup_ent") }, click_esc: function(event){ console.log("click_esc") } } }) </script>需要注意的是,Vue.config.KeyCodes.myKeyName的定义需要在使用 myKeyName之前。
3. v-ref注册子组件的索引
为了便于在Vue对象的内部直接访问子节点的属性,可以使用ref建立索引(ref="xxx"),在Vue对象内部就可以使用this.$refs.xxx来访问该子节点及其属性:
<div id="app"> <div ref="div_item">Hello Vue!</div> <input ref="input_item"> <button @click="get_attr">获取属性</button> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', methods: { get_attr: function(event){ console.log("get_attr: " + this.$refs.div_item.textContent) console.log("get_attr: " + this.$refs.input_item.value) } } }) </script>效果:
4. v-pre 不编译
写H5页面的时候,有大部分的页面是不需要Vue操作的,但是在编译的时候Vue仍然会将所有的H5代码进行编译,此时我们可以使用v-pre指令来告诉Vue编译器,该Dom节点及其所有的子节点不需要编译,这样就可以加快编译速度。
<div id="app"> <div v-pre> {{text}}<span>{{text}}</span> </div> <div>{{text}}</div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { text: 'Hello Vue!' } }) </script>效果:
可以看到第一个div由于加了v-pre指令,Vue并没有进行编译,而是显示节点原本的样子,Vue只对没有v-pre的节点进行编译。
5. v-cloak 延迟渲染
当把这个空指令加到节点上时,Vue不会将节点渲染到页面上,直到Vue结束对该节点的编译之后才会进行渲染,否则用户可能首先看到Vue的标签,然后看到编译之后的数据。
<div id="app"> <div v-cloak> <!--大量的,长时间的数据拉去和编译 --> </div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app' }) </script>