简介
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:那里可以换成调用函数,更加规范化,这里节省代码空间就不改了。