vue指令用法简单讲解

vue指令

总结了一些vue中常用指令及其用法 可能不是很完整 欢迎提出您的建议 之后我也会持续添加

1.v-text

更新元素的文本内容。也可以使用 {{msg}} 插值。转义输出

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

2.v-html

更新元素的文本内容。不转义输出

<span v-html="msg"></span>

3.v-show

“v-show的用法与v-if基本一致，只不过v-show是改变元素的CSS属性display。当v-show表达式的值为true时，元素会显示，否则隐藏

<div id="app" >
    	<p v-show="status==1">当status为1时，显示该行</p>
	</div>
	
	<script>
    //创建vue实例
    var  vue=new Vue({
        el: '#app',
        data: {
            status: 2 	//当status为1时，隐藏
        }
    });
	</script>

4.v-if和v-else、v-else-if

v-if为true时，显示v-if的内容，否则继续判断v-else-if的内容，如果为true则显示，否则判断下一个v-else-if，知道为true时显示，若v-else-if都为false，则显示v-else的内容
v-else-if和v-else 前一兄弟元素必须为 v-if 或 v-else-if

<h2 v-if="true">v-if</h2>
<h2 v-else>v-else</h2>

5.v-for

当需要将一个数组遍历或枚举一个对象循环显示时候，我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用

<div id="app">
	<ul>
		<li v-for="（user, index） in user"> {{ user.name }} </li>
	</ul>
</div>
<script>
	var app= new Vue ({
	el: "#app",
	data () {
		return {
			users: [
				{ name: "zhangsan"},
				{ name: 'lisi'}
			]
		}
	}
})
</script>

6.v-on

处理自定义原生事件的,给按钮添加click并让使用变量的样式改变
普通使用 v-on:事件名=“函数名”
简写方式 @事件名=“表达式”

<button v-on:click="onClick"></button>
<button @click="onClick"></button>

7.v-bind

v-bind指令用于给html标签设置属性。

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

8.v-model

在表单控件或者组件上创建双向绑定。

	<div id="demo">
        <input v-model="msg">
        <p>{{msg}}</p>
    </div>
    <script>
        var demo = new Vue({
            el:'#demo',
            data:{
                msg: "hello",
            },
        })
    </script>    

9.v-pre

跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑

<span v-pre>{{hello word}}</span>   显示的是{{hello word}}
<span v-pre>{{msg}}</span>     即使data里面定义了msg这里仍然是显示的{{msg}}

10.v-cloak

可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。

<div id="app">
    {{context}}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            context:'xxxxxxxxxxxxxxxxxxxxxx'
        }
    });
</script>

11. v-once

被定义了 v-once 指令的元素或组件（包括元素或组件内的所有子孙节点）只能被渲染一次。首次渲染后，即使数据发生变化，也不会被重新渲染。一般用于静态内容展示。

<div id="app">
    <div v-once>
        {{content}}
    </div>
</div>
script>
    var app = new Vue({
        el: '#app',
        data: {
            content:'xxxxxxx'
        }
    });

    this.content='123456789';
</script>