Vue学习之指令学习

v-text

v-text的功能和插值表达式相同，用于将纯文本渲染到页面上。由于v-text渲染数据在重复刷新的时候会出现闪动，可以使用v-cloak指令，先隐藏。替换完值后再渲染到页面上。

<div id="app">
	<p v-text="tip"></p>
	<p>{{tip}}</p>
</div>
<script type="text/javascript">
	var vm=new Vue({
		el:"#app",
		data:{
			tip:"Hello World!"
		}
	});
</script>

输出结果

v-html

v-html指令的内容只会被当做普通html语言插入，不会被当做vue模板编译。但是直接在网页上渲染存在风险。

<div id="app">
	<span v-html="tip"></span>
</div>
<script type="text/javascript">
	var vm=new Vue({
		el:"#app",
		data:{
			tip:"你好"
		}
	});
</script>

输出结果

v-pre

v-pre指令会直接显示原始信息，跳过编译的过程。

<div id="app">
	<span v-pre>{{tip}}</span>
</div>
<script type="text/javascript">
	var vm=new Vue({
		el:"#app",
		data:{
			tip:"你好"
		}
	});
</script>

输出结果

v-once

添加v-once指令后元素和组件只会渲染一次，之后不具备响应式功能，不会再重新渲染。可以用于不需要修改的元素，从而优化性能。

<div id="app">
	<span v-once>{{tip}}</span>
</div>

v-show

根据v-show的布尔值来改变css属性的display的值，true：显示，false：隐藏。

<div id="app">
	<span v-show="false">你好</span>
	<span v-show="true">你好</span>
</div>

输出结果

v-if

v-if指令用于条件渲染，只有当条件为真才会渲染元素，相当于if语句。v-for指令的优先级高于v-if。

<div id="app">
	<span v-if="1>0">1>0</span>
</div>

输出结果

v-else-if

v-else-if指令使用前必须有v-if或者v-else-if，相当于else if语句。

<div id="app">
	<span v-if="number<0">number小于0</span>
	<span v-else-if="number>0">number大于0</span>
</div>
<script type="text/javascript">
	var vm=new Vue({
		el:"#app",
		data:{
			number:5
		}
	});
</script>

输出结果

v-else

v-else-if指令使用前必须有v-if或者v-else-if，相当于else语句。

<div id="app">
	<span v-if="number<0">number小于0</span>
	<span v-else-if="number>0">number大于0</span>
	<span v-else>number等于0</span>
</div>
<script type="text/javascript">
	var vm=new Vue({
		el:"#app",
		data:{
			number:0
		}
	});
</script>

输出结果

v-for

v-for指令用于循环渲染元素。相当于for循环语句。可以给改指令绑定一个唯一的key值，从而提高性能。

<div id="app">
	<table>
		<tbody>
			<tr :key="items.id" v-for="items in books">
				<td>{{items.id}}</td>
			</tr>
		</tbody>
	</table>
</div>

v-on

v-on指令用于元素事件的绑定，可以用@来表示缩写。

<div id="app">
	<button @click="count++">点击了{{count}}次</button>
</div>

输出结果

v-bind

v-bind指令用于动态绑定属性，可以用：表示缩写。

<div id="app">
	编号
	<input type="text" :disabled="true">
</div>

输出结果

v-model

v-model指令用于实现数据的双向绑定，下面的v-model的实现原理是将input框:value=“number”，动态绑定value值，然后通过:input绑定监听函数，通过函数参数拿到event对象，通过event.target.value得到输入框改变的值，再将改变后的值赋给this.number，最后重新渲染网页中input的value值。

<div id="app">
	<input type="text" v-model="number">
	<span >{{number}}</span>
</div>

输出结果

v-slot

v-slot是可以接受prop参数的插槽或者具名插槽。
作用域插槽

<div id="app">
        <parent>
            <template  v-slot='number'>
                {{number.user}}
            </template>
        </parent>
        <parent></parent>
</div>
<script type="text/javascript">
    Vue.component("parent",{
        data:function(){
            return {
                number:8
            } 
        },
        template:`
            <span>
              <slot :user="number">备用内容</slot>
            </span>
        `
    });
    var vm=new Vue({
        el:"#app"
    })
</script>

输出结果

v-cloak

v-cloak可以在关联元素编译结束前给元素的display
设置成none，可以解决v-text的闪动问题。