一、v-bind指令
1.用法
- 动态的绑定一个或多个属性或一个组件 prop 到表达式
- 在绑定 class 或 style 特性时,支持其它类型的值,如数组或对象
- 在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
- 没有参数时,可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。
2.语法糖写法以及绑定class
- :(冒号)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind指令的使用</title>
<style>
.active{
color:red;
}
.font{
font-size: 50px;
}
.aa{
color:blue;
}
</style>
</head>
<body>
<div id="app">
<!-- 给那个属性动态的赋值就在那个属性前面加v-bind -->
<img v-bind:src="imgURL" alt="李沁">
<a v-bind:href="aURL">百度一次</a>
<!-- 语法糖写法 -->
<a :href="aURL">百度次</a>
<!-- v-bind动态绑定Class属性 -->
<h2 class="active">{{message}}</h2>
<h2 :class="active">{{message}}</h2>
<!-- v-bind动态绑定class(对象语法) -->
<!-- 语法 : <h2 :class="{类名1:boolean,类名2:boolean,...}"></h2> 将boolean值可以动态的绑定-->
<!-- 查看源码可知有两个class属性 -->
<!-- 可以有多个class,vue内部最后会合并成一个class -->
<h2 class="font" :class="getClass()">vklcxm</h2>
<button v-on:click="BtnClick()">按钮</button>
<!-- v-bind动态绑定class(数组语法) -->
<!-- class数组中的值加单引号与不加蛋引号是不一样的,加单引号说明是一个字符串,Vue直接
解析成一个class名,不加单引号说明是一个变量,Vue解析成变量对应的值
-->
<h2 class="font" :class="['active','line']">1111111111111</h2>
<!-- 源码中类名为aa和bb -->
<h2 :class="[active1 , line1]">2222</h2>
<h2 :class="getClassArray()">2333</h2>
</div>
<script type='text/javascript' src='js/vue.js'></script>
<script type='text/javascript'>
const app =new Vue({
el : "#app",
data : {
message : "ddddd",
imgURL:"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1579933278&di=4c443ec84a240f1f2cd2c9af0d1de65b&src=http://pics0.baidu.com/feed/c75c10385343fbf21eb472d60c8dd08667388fa1.jpeg?token=0cf3d5b0c070b5797e420209e17d593c&s=96A6D14ED4F03596C91104F80300C01E",
aURL:"http://www.baidu.com",
active:"active",
isActive: true,
isLine:true,
active1: "aa",
line1:"bb"
},
methods : {
//注意vue的methods中不能使用箭头函数,使用箭头函数会使this无法正确指向
BtnClick: function(){
this.isActive = !this.isActive;
},
getClass: function(){
return {active:this.isActive , line:this.isLine};
},
getClassArray:function(){
return [this.active1 , this.line1];
}
}
})
</script>
</body>
</html>
3.绑定style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind绑定style</title>
</head>
<body>
<div id="app">
<!-- v-bind绑定style(对象语法) -->
<!-- <h2 :style="{css属性名:属性值,css属性名:属性值,...}"></h2> -->
<h2 :style="{fontSize:'50px',color:'blue'}">eeee</h2>
<h2 :style="getStyle()">{{message}}</h2>
<!-- 驼峰命名法可以不用加引号 -->
<h2 :style="{ fontSize : fonS1 + 'px'}">{{message}}</h2>
<!-- v-bind绑定style(数组语法) -->
<h2 :style="[baseStyle,baseStyle2]">{{message}}</h2>
</div>
<script type='text/javascript' src='js/vue.js'></script>
<script type='text/javascript'>
const app = new Vue({
el : "#app",
data : {
message : "ddd",
fonS: '100px',
fonS1 : 100,
baseStyle : {color : 'red'},
baseStyle2 : {fontSize : 40+'px'}
},
methods : {
getStyle : function(){
return {'font-size' : this.fonS}
}
}
})
</script>
</body>
</html>
4.修饰符
-
.prop:作为一个 DOM property 绑定而不是作为 attribute 绑定。
首先,要搞清楚HTML DOM Attribute 对象HTML DOM 节点:
在 HTML DOM (文档对象模型)中,每个部分都是节点
文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点Attr 对象:
在 HTML DOM 中,Attr 对象表示 HTML 属性。
HTML 属性始终属于 HTML 元素。https://segmentfault.com/a/1190000012820563
这个链接讲的很不错 -
.camel
将 kebab-case(短横线命名方式) 转换为 camelCase(驼峰命名法). (从 2.1.0 开始支持) -
.sync:语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器
官网详解
https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6