Vue内置指令的使用

时间 2019-11-26

标签 vue 内置指令使用繁體版

原文原文链接

v-model（数据绑定）

v-model经常使用于表单数据的双向绑定，它本质上是一个语法糖。它主要的有两种应用：css

在文本框、多行文本、input的下拉框、单选按钮、复选框中的应用

<div id="app">
  	<input v-model="test">
  	<!-- <input :value="test" @input="test= $event.target.value"> -->
  	<!--语法糖-->
  	<p>{{ test}}</p>
  </div>
  <script>
  	new Vue({
  		el: '#app',
  		data: {
  			test: '欢迎来到侠课岛'
  		}
  	});
  </script>

下拉框：

<div id="app">
    	<select v-model="selected">
    		<option value="设计">Phtotshop</option>
    		<option value="编程">programming</option>
    		<option value="插画">Illustration</option>
    	</select>
    	<span>Selected: {{ selected }}</span>
    </div>
    <script>
    	new Vue({
    		el: '#app',
    		data: {
    			selected: ''
    		}
    	});
    </script>

单选按钮：

<div id="app">
    	<input type="radio" id="man" value="男" v-model="picked">
    	<label for="man">男</label>
    	<br>
    	<input type="radio" id="woman" value="女" v-model="picked">
    	<label for="woman">女</label>
    	<br>
    	<input type="radio" id="other" value="其余" v-model="picked">
    	<label for="other">其余</label>
    	<br>
    	<span>Picked: {{ picked }}</span>
    </div>
    <script>
    	new Vue({
    		el: '#app',
    		data: {
    			picked: ''
    		}
    	})
    </script>

复选框：

<div id="app">
    	<input type="checkbox" id="one" value="课程一e" v-model.lazy="checkedNames">
    	<label for="one">选项一</label>
    	<input type="checkbox" id="two" value="课程二" v-model.lazy="checkedNames">
    	<label for="two">选项二</label>
    	<input type="checkbox" id="three" value="课程三" v-model.lazy="checkedNames">
    	<label for="three">选项三</label>
    	<br>
    	<span>Checked names: {{ checkedNames }}</span>
    </div>
    <script>
    	new Vue({
    		el: '#app',
    		data: {
    			checkedNames: []
    		}
    	})
    </script>

也能够和.lazy、.trim、.number这些修饰符一块儿使用 .lazy
```
<input v-model.lazy="test" >
```
.number，自动将用户的输入值转为数值类型
```
<input v-model.number="test" type="number">
```
.trim，自动过滤用户输入的首尾空白字符
```
<input v-model.trim="test" >
```

v-for（循环）

格式： v-for=“字段名 in(of) 数组 or jsonhtml

<div id="main">
        <p>{{ message }}</p>
        <ul>
          <li v-for="(item,index) in fruit">{{ item }} {{ index }}</li>
        </ul>
    </div>
    <script>
        new Vue({
          el: '#main',
          data: {
            message: 'Welcome XKD!',
            fruit: [
              'Apple',
              'Grape',
              'Pitaya',
              'Banana',
              'watermelon',
              'Pomegranate'
            ]
          }
        })
    </script>

v-show 和 v-if（显示与隐藏）、v-else-if、v-else

v-show 经过值来判断是否加载并显示；程序员

v-if 经过值来判断是否加载；编程

v-else-if ，充当 v-if 的“else-if 块”，能够连续使用；json

v-else ，表示 v-if 的“else 块” ，必须连用，不然无效不会识别。数组

v-show 和 v-if二者区别在于：app

v-if 控制元素隐藏的时候，它会删除dom节点，而v-show并不会，v-if还能够和v-else-if 和 v-else，这二者是必须和v-if连用，不能单独使用。
通常来讲， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。若是须要很是频繁地切换，则使用 v-show 较好；若是在运行时条件不太可能改变，则使用 v-if 较好。

v-show：dom

<div v-show="isShow">我只是用来控制 display 的属性值</div>
    
    <script>
    	var vm = new Vue({
    		el: "#main",
    		data: {
    			isShow: true
    		}
    	});
    </script>

v-if：ui

<div id="main">
    	<div v-if="isShow">显示或隐藏</div>
    </div>
    <script>
    	var vm = new Vue({
    		el: "#main",
    		data: {
    			isShow: fasle
    		}
    	});
    </script>

v-else-if：spa

<div v-if="type === 'A'">程序员</div>
    <div v-else-if="type === 'B'">设计师</div>
    <div v-else-if="type === 'C'">运营者</div>
    <div v-else>互联网工做人</div>
    
    <script>
    	var vm = new Vue({
    		el: "#main",
    		data: {
    			type: 'A'
    		}
    	});
    </script>

v-else：

<div v-if="isTrue">侠课岛</div>
    <div v-else>仍是侠课岛</div>
    
    <script>
    	var vm = new Vue({
            el: '#main',
            data: {
                isTrue: true
            }
    	})
    </script>

v-bind（动态绑定）

及时对页面的数据进行更新修改。

v-bind:id 简写为 :id
v-bind:disabled 简写为 :disabled
v-bind:href 简写为 :href
v-on:click 简写为 @ click

v-on（绑定事件）

指令绑定事件后，就会监听相应的事件。

v-on:click：

<div id="main">
        <h3>已点击 {{count}} 次</h3>
        <button @click="count++">Click Me!</button>
    </div>
    <script>
        var vm = new Vue({
          el: '#main',
          data: {
            count: 0
          }
        });
    </script>

v-on:keyup：先显示值，再弹出层

<div id="main">
    	<input v-on:keyup.13="keyup" type="text">
    </div>
    <script>
        var vm = new Vue({
          el: '#main',
          data: {
          },
          methods: {
            // enterClick: function () {
            //   console.log("enterClick");
            // }
            keyup(e) {
              alert(JSON.stringify(e));
            }
          }
    	});
    </script>

v-on:keydown：在框中输入先弹出层，再显示输入的值

<div id="main">
    	<input v-on:keydown="keydown">
    </div>
    <script>
        var vm = new Vue({
          el: '#main',
          data: {
          },
          methods: {
            keydown(e) {
              alert(JSON.stringify(e));
            }
          }
    	});
    </script>

v-text 和 v-html（解析文本）

v-text：

<span v-text="dangerHTML"></span>
    
    dangerHTML: '<span onclick="alert(123)">123</span>'

无论是什么，全都解析成文本，里面的HTML标签也所有转义掉：

v-html：

<span v-html="dangerHTML"></span>
    
    dangerHTML: '<span onclick="alert(123)">123</span>'

v-bind:class

对象：{ red:ifAbledRed }
三目运算符：ifAbledRed ? "red" : "blue"
数组：[{red:"ifAbledRed"},{blue:"ifAbledBlue"}]

v-once

只渲染一次，再也不进行渲染。

<p v-once>{{ message }}</p>

v-cloak（防止闪烁）

v-cloak通常是配合 [v-cloak] {display: none; }css 一块儿使用的。

<p v-cloak>{{ message }}</p>

下面是一个闪烁的截图代码，当咱们给以下红色代码块外加一个setTimeout时间延迟时，而后再去执行咱们会发如今网页上什么都没有，会有一个时间的停留，所以提供了一个v-cloak的方法来解决这个问题。

v-pre

原位输出标签内部的元素。