VUE指令

1、v-text、v-html

<template>
	<div class="container">
		<p>{{ str }}</p>
		<p v-text="str"></p>
		<p v-html="str"></p>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				str:"<a href='www.baidu.com'>点我</a>",
			}
		},
		methods: {

		}
	}
</script>

输出内容分别如下：

  

2、v-show，通过控制元素本身的display属性值来控制元素的显示或隐藏。如果在项目中会频繁的切换一个元素的显示和隐藏时建议使用v-show。

<template>
	<div class="container">
		<p v-show="boo">我显示</p>
        <p v-show="!boo">我被隐藏了</p>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				boo: true,
			}
		},
		methods: {

		}
	}
</script>

输出内容如下：

3、v-if/v-else/v-else-if，和js中的if语句一样，不过这个是直接判断渲染和不渲染标签的，多次切换标签的显隐建议使用v-show。

<template>
	<div class="container">
		<p v-if="num == 1">1</p>
		<p v-else-if="num == 2">2</p>
		<p v-else="num == 3">3</p>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				num: 2,
			}
		},
		methods: {

		}
	}
</script>

输出结果如下：

4、v-for，和for循环语句差不多。在使用v-for的时候一定要加上key，key的值尽量不要用index来。

<template>
	<div class="container">
		<h3>arr</h3>
		<ul>
			<li v-for="(item,index) in arr" :key="item">{{ item }} -- {{ index }}</li>
		</ul>
		<h3>obj</h3>
		<ul>
			<li v-for="(item,index) in obj" :key="item">{{ item }} -- {{ index }}</li>
		</ul>
		<h3>group</h3>
		<ul>
			<li v-for="(item,index) in group" :key="item.age">{{ item.name }} 今年 {{ item.age }} 岁</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				arr:[1,2,3,4],
				obj:{
					name:"xiaopang",
					age:21,
				},
				group:[
					{name:"xiaopang",age:21},
					{name:"xiaohua",age:22},
					{name:"xiaoqiang",age:23},
				]
			}
		},
		methods: {

		}
	}
</script>

结果如下：

 5、v-on和原生的on差不多，用于绑定事件的，【<p v-on:click="Change"></p>】，也可以这样写【<p @click="clickChange"></p>】。

6、v-bind，主要用于给元素动态绑定数据的，比如动态绑定class值、style值、name值等等。

7、v-model，完成数据双向绑定的。在前面的文章中有介绍到。

8、v-solt，主要是搭配插槽一起使用的。（简单介绍）

// 子组件
<template>
	<div class="container">
		<solt name="header"></solt>
        <solt></solt>
	</div>
</template>



// 父组件
<template>
	<div class="container">
		<Children>
           <div v-solt:header>我有名字</div>
           <div v-solt:default>我没有名字，可以不加v-solt</div>
        </Children>
	</div>
</template>

<script>
    import Children from "./children"
	export default {
       components:{
          Children,
        }
	}
</script>

9、v-pre，主要是告诉编译器，不要编译我的mustache语法，直接原样输出。

<template>
   <div>
     <!-- 结果为：  {{ test }} -->
      <p v-pre>{{ test }}</p>   
   </div>
</template>

10、v-once，只渲染一次，即在过程中你改变了里面内容数据的值，也不会再次改变。

11、v-cloak，斗篷的意思，意思在vue渲染初期不显示内容，编译完成之后在显示，和v-pre的写法一样没有值，但是要在参数三里面写上：[v-cloak]{ display:none; }