碼雲實時更新學習demo地址：https://gitee.com/dxl96/vuexuexi
VUE基礎篇（插值操作）
1、v-bind
在標籤上綁定屬性值，不可以用Mustache語法，也就是{{ }}，必須使用v-bind來綁定屬性，v-bind的格式是 v-bind:標籤屬性名
或者語法糖形式 :標籤屬性名
代碼中展示了 v-bind:src 、v-bind:href 、v-bind:class
—對於 v-bind:src 、v-bind:href來說 可以綁定data中的變量，也可以綁定方法，方法返回的值就是綁定的值
—對於 v-bind:class 來說：
1）可以綁定對象，可以綁定對象的形式，{屬性1:boolean,屬性2:boolean …}這種形式，我們通過動態綁定這些布爾值，如果布爾值是true的話，說明就會綁定到這個對象的屬性名,如果是false的話就不會綁定這個對象的屬性名。
舉例：比如這裏，{active: isActive,line: isLine} 假設active的值(isActive)是true，那麼class這個標籤屬性就有active這個值，也就是class=“active”；假設 active的值和line的值都爲true，那麼就是class=“active line”；如果其中active的值爲true，line的值爲false，那麼class=“active”
2）還可以寫成綁定數組的形式，這種形式[‘active’,‘line’]
3）還可以綁定方法，方法返回對象或者數組，也就是上兩種形式的數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue動態綁定</title>
<style>
img {
height: 60px;
}
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- ■錯誤寫法，不能再標籤上使用mustache語法，不能夠識別-->
<!-- <img src="{{imgURL}}">-->
<!-- ■正確做法，使用v-bind指令，來進行值的動態綁定，也就是值的替換-->
<img v-bind:src="imgURL"/>
<a v-bind:href="aHref">百度一下</a>
<!-- ■也可以綁定方法，方法返回一個需要的值-->
<img v-bind:src="getImgUrl()"/>
<a v-bind:href="getHref()">百度一下</a>
<!-- ■v-bind指令語法糖的寫法，用 : 替代 v-bind: -->
<img :src="imgURL"/>
<a :href="aHref">百度一下</a>
<!------------------------------------------------------------------------------------------------------------------------------->
<!-- ■綁定數據可以和原標籤屬性值共存，vue會解析合併綁定的值和原來的值,假如原標籤的屬性值只能是一個，比如href這種，要是綁定語法和原語法都存在，則原標籤生效-->
<!-- ■v-bind:class綁定可以綁定對象的形式，{屬性1:boolean,屬性2:boolean ...}這種形式，我們通過動態綁定這些布爾值，如果布爾值是true的話，說明就會綁定到這個對象的屬性名,
如果是false的話就不會綁定這個對象的屬性名
舉例：比如這裏，{active: isActive,line: isLine} 假設active的值(isActive)是true，那麼class這個標籤屬性就有active這個值，也就是class=“active”；假設
active的值和line的值都爲true，那麼就是class=“active line”；如果其中active的值爲true，line的值爲false，那麼class=“active”
-->
<h2 v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>
<!-- ■將上面這種直接綁定對象的方式，還可以改成綁定方法，方法中返回這個對象即可-->
<h2 v-bind:class="getClass()">{{message}}</h2>
<!-- ■還可以寫成綁定數組的形式，同樣的，也可以像上面綁定方法，方法返回數組-->
<!-- 綁定數據和原來的屬性數據可以同時使用,它會將綁定的和原來的進行解析合併,比如這裏，就會是class=“title active line”-->
<h2 class="title" v-bind:class="['active','line']">{{message}}</h2>
<!-- ■將上面這種直接綁定數組的方式，還可以改成綁定方法，方法中返回這個數組即可-->
<h2 class="title" v-bind:class="getClass2()">{{message}}</h2>
<!-- ■監聽點擊事件-->
<button v-on:click="btnClick">點擊一下</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "vue app",
imgURL: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590919517&di=f0e49723a8334e9576244d9736cf81a5&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg",
aHref: "http://www.baidu.com",
isActive: true,
isLine: true
},
methods: {
btnClick: function () {
// 當點按鈕時切換isActive的值取反，也就是true和false交替賦值
// 當該值改變時，也就意味着上面綁定了這個值的h2標籤的class屬性交替存在去除active這個值
// 因爲上面css已經對class含有active的標籤進行設置字體顏色爲紅色，所以我們在點擊按鈕時就能夠看到h2標籤裏的內容紅色和黑色之間交替變換
this.isActive = !this.isActive
},
getClass: function () {
return {active: this.isActive, line: this.isLine};
},
getClass2:function(){
return ['active','line']
},
getHref: function () {
return "http://www.baidu.com"
},
getImgUrl: function () {
return "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590919517&di=f0e49723a8334e9576244d9736cf81a5&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg"
}
}
});
</script>
</body>
</html>
效果
2、動態綁定style
v-bind:style 或者 語法糖形式 :style
可以綁定數據的方式有：
1）對象
2）數組
3）方法（方法返回對象或者數組）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態綁定style</title>
</head>
<body>
<div id="app">
<!-- ■v-bind:style 綁定style ,以綁定對象的形式進行綁定 {key(屬性名):value(屬性值)} 屬性名的形式可以是小駝峯的形式，也可以是原名稱以-分割的形式-->
<h2 :style="{fontSize:finalSize,color:color}">{{message}}</h2>
<!-- ■如果是直接進行賦值的話，必須以單引號包裹起來，否則它會認爲這是個變量去解析，然後就會找不到這個變量，就像這裏的 50px 用單引號包裹表示他是一個值-->
<h2 :style="{fontSize:'50px'}">{{message}}</h2>
<h2 :style="{fontSize:finalNum+'px',backgroundColor:'red'}">{{message}}</h2>
<!-- ■也可以調用方法的方式返回對象的形式進行綁定-->
<h2 :style="getStyle()">{{message}}</h2>
<!-- ■也可以是數組的形式來進行數據綁定-->
<h2 :style="[backGround,fontSize]">{{message}}</h2>
<!-- ■也可以調用方法的方式返回數組的形式進行綁定-->
<h2 :style="getStyle2()">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "vue app",
finalSize: "50px",
finalNum: 50,
color: 'red',
backGround: {backgroundColor: "red"},
fontSize: {fontSize: "50px"},
},
methods: {
getStyle: function () {
return {fontSize: this.finalSize}
},
getStyle2: function () {
return [{backgroundColor: "red"},{fontSize: "50px"}]
}
}
});
</script>
</body>
</html>
效果
