一、简写
1.1绑定click事件
<a v-on:click="doSomething"></a>
可以简写为:
<a @click="doSomething"></a>
1.2 绑定动态属性
<a v-bind:href="url"></a>
可以简写为:
<a :href="url"></a>
二、vue关于class和样式的使用
https://www.cnblogs.com/wymbk/p/6544487.html
2.1 类的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class2{
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<div id="app">
<div v-bind:class="{'class2': class1}">
dddddddddddddd
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
class1:true
}
});
</script>
</body>
</html>
画重点如下:
运行结果如下:
也可以如下写:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class2{
background: #444;
color: #eee;
}
</style>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<div id="app">
<div v-bind:class="{'class2': true}">
dddddddddddddd
</div>
</div>
<script>
new Vue({
el: '#app'
});
</script>
</body>
</html>
画重点如下:
注:运行结果和上面一样,但如果不写new Vue({el: '#app'});,效果就显示不出来,不知为什么,可能是下面是对上面使用vue的一个声明吧。