简介

vue在使用上最核心的部分当属v指令的使用。下面简单介绍一些v指令（部分，会有后续）。最后一部分将有代码示例提供学习使用。

常用的vue指令

v-bind

语法糖: 可以直接简写为：

该指令的作用是将标签的属性与vue对象中的值绑定，绑定方法有多种。

<!--假设data1在vue对象中值为xxx,方法返回的值也是xxx-->
<p :class = "data1">{{ message }}</p>
<p v-bind:class = "data1">{{ message }}</p>
<p :class = "{xxx : true}">{{ message }}</p>
<p :class = "[data1]">{{ message }}</p>
<p :class = "getclass()">{{ message }}</p>
<!--上面的内容等价-->

我们可以通过对象的方式获取class，自然，也可以通过方法的方式获取class，十分灵活，最好亲自实践来体验差异与区别。

除了class外，还可以绑定src，alt，style等等，十分灵活。

v-for

可以循环生成标签，减少代码量。可以用来迭代的可以是数字，也可以是对象。遍历的除了内容外，还可以额外加一个量来遍历下标。

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

v-on

可以绑定事件

语法糖：@即可代替v-on

<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

v-html

获取标签，即当前标签可以从值中获取。

<div v-html="my_html"></div>

其中，my_html : “<p>Hello Vue.js!</p>”

不常用的vue指令

v-pre：

带有该指令的标签的内容将按普通的html标签内容进行解析，而不会调用Mustache语法，也不会调用vue去解析其中的其他v指令。（跳过编译）

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

v-text

带该指令的内容，等价于直接用{{}}语法。例如：

<p v-text = "message"></p>
<p>{{message}}</p>
<!--上面的内容等价-->

v-cloak

带指令的标签，在vue解析完对应的标签后将会自动去掉该指令。其用法在于，利用该v-cloak作为标签，可以执行解析前的一些小操作，比如借助style让含v-cloak的标签不显示，这样一来，vue标签在被解析前就不会显示在网页上了，网页浏览者就不会看到类似“{{message}}”未解析的内容。

多个v指令结合的代码实例

<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset-"UTF-8">
	<title>title</title>
	<script src = "vue.min.js"></script>
	<style  type="text/css">
		.my_class{
			color : red;
		}
	</style>
</head>
<body>

<div id="app">
  <p v-for="(c,index) in op" @click="choose(index)" :class = "{my_class : (index ==color_index)}">{{ c }}</p>
</div>

<script>
	new Vue({
	  el: '#app',
	  data: {
			op : ['添加','删除','修改','退出'],
			color_index : 0
	  },
		methods: {
	  	choose(index){
				console.log(index);
				this.color_index = index;
			}
		}
	})
</script>

</body>

实现点啥啥变色的功能。其中myclass:那里可以换成调用函数，更加规范化，这里节省代码空间就不改了。

CSDN_Yong

发布了23 篇原创文章 · 获赞 0 · 访问量 577

私信关注

vue学习（二）——指令（1）

简介