Vue.js从入门到实战（一）：Vue.js基础知识点
Vue.js基础知识点
一、样式的绑定
1、概述
对于数据绑定，一个常见需求就是操作元素的class列表和它的内联样式。class与style是HTML元素的属性，用于设置元素的样式，可用v-bind来设置样式属性，只需要计算出表达式最终的字符串，表达式的结果类型除了字符串之外，还可以是对象或数组。
2、class属性的绑定
【2-1】对象语法
可以传给v-bind:class一个对象来动态地切换class，值得注意的是，v-bind:class指令可以和普通的class特性共存。
可以在对象中传入更多属性用来动态切换多个class 。
可以绑定返回对象的计算属性。
可以直接绑定数据里的一个对象。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>样式绑定-对象语法title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<style type="text/css">
.demo {
display:inline-block;
width:300px;
height:300px;
margin-left:20px;
}
.static {
border:1px solid #000;
}
.bg-red{
background:red;
}
style>
head>
<body>
<div id="app">
<div class="demo" :class="{static:isShow}">div>
<div class="demo" :class="a">div>
div>
<script>
new Vue({
el:"#app",
data:{
isShow:true,
a:{
'bg-red':true
}
}
});
script>
body>
html>
【2-2】数组语法
可以把一个数组传给v-bind:class 。
可以使用三元表达式来切换列表中的 class。
在vuejs1.0.19以及以后的版本，可以在数组语法中使用对象语法。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>样式绑定-数组语法title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<style type="text/css">
.demo {
display:inline-block;
width:300px;
height:300px;
margin-left:20px;
}
.bg-red{
background:red;
}
.bg-yellow{
background:yellow;
}
style>
head>
<body>
<div id="app">
<div class="demo" :class="[bgred,bgyellow]">div>
<div class="demo" :class="[bgyellow,isShow?bgred:'']">div>
<div class="demo" :class="[bgyellow,{bgred:isHide}]">div>
div>
<script>
new Vue({
el:"#app",
data:{
isShow:true,
isHide:false,
bgred:'bg-red',
bgyellow:'bg-yellow'
}
});
script>
body>
html>
3、绑定内联样式
【3-1】对象语法
使用v-bind:style来设置内联样式，css属性名可以用驼峰命名来命名。
可以直接绑定一个样式对象，更清晰。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内联样式绑定-对象语法title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<div :style="{color:'red',fontSize:fontsize+'px',fontWeight:fontweight}">你好div>
<div :style="demo">今天又是元气满满的一天div>
div>
<script>
new Vue({
el:"#app",
data:{
fontsize:30,
fontweight:'bold',
demo:{
color:'blue',
fontSize:'50px'
}
}
});
script>
body>
html>
【3-2】数组语法
v-bind:style的数组语法可以将多个样式对象应用到一个元素上。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内联样式绑定-数组语法title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<div :style="[baseStyle,otherStyle]">你好div>
div>
<script>
new Vue({
el:"#app",
data:{
baseStyle:{
fontSize:'48px',
color:'green'
},
otherStyle:{
fontWeight:'bold'
}
}
});
script>
body>
html>
4、自动添加前缀
当 v-bind:style 使用需要特定前缀的CSS属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀，
在vue.js源码中采用prefix函数来完成这个功能。
二、vue事件处理器
vue.js的事件监听一般都是通过v-on指令配置在HTML中。
采用v-on的好处
- 通过查看HTML模板便能轻松定位javascript代码中对应的方法。
- 无须在javascript中手动绑定事件，viewmodel和dom完全解耦，更易于测试。
- 当一个viewmodel被销毁的时候，所有的事件处理器都会自动被删除。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件监听title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="button" value="点我1" v-on:click="count+=1"/>
<div>点我的次数{{count}}div>
<hr/>
<input type="button" value="点我2" v-on:click="greet"/>
<hr/>
<input type="button" value="点我3" v-on:click="say('hello')"/>
div>
<script>
new Vue({
el:"#app",
data:{
count:0,
name:'vue'
},
methods:{
greet:function(event){
console.log('Hello,'+this.name);
},
say:function(msg){
console.log(msg);
}
}
});
script>
body>
html>