有下面這一段代碼
<script type="text/javascript">
new Vue({
el: '#main',
data: {
msg: '大家好，我是渣渣輝',
msg2: '大家好，我是古天落',
num:123,
html:'<p>我是一個(gè)HTML文本</p>',
url:'https://www.baidu.com'
}
})
</script>
使用數(shù)據(jù)變量
要使用數(shù)據(jù)的data中的屬性值，在綁定的標(biāo)簽中，使用{{變量名}}來(lái)引用，支持文本和數(shù)字。數(shù)字支持做運(yùn)算
<div id="main" >
<div>
{{msg}},{{num+1}}
</div>
</div>
輸出內(nèi)容為
大家好，我是渣渣輝,124
使用html源碼
在上面的data數(shù)據(jù)中，html參數(shù)是一個(gè)html內(nèi)容，如果直接使用{{html}}引用的話，網(wǎng)頁(yè)顯示為純文本
<p>我是一個(gè)HTML文本</p>
并不會(huì)解析源碼。那么需要為標(biāo)簽添加v-html屬性，屬性名為html，或者其他帶有html的內(nèi)容的參數(shù)
<div id="main" >
<div v-html="html">
</div>
</div>
輸出內(nèi)容會(huì)把這個(gè)標(biāo)簽的內(nèi)容替換成html
為標(biāo)簽增加參數(shù)
html的標(biāo)簽中，可以使用Vue增加參數(shù)，給參數(shù)前面加上v-bind:即可，或者直接省略v-bind，使用:
其中url參數(shù)，已經(jīng)在data中定義
<a v-bind:href="url">百度</a> <a :href="url">百度</a>
綁定style
在data創(chuàng)建一個(gè)對(duì)象，名字隨意，這個(gè)對(duì)象里面還要?jiǎng)?chuàng)建一個(gè)新對(duì)象，對(duì)象名稱為css名稱，屬性為文本值屬性。
如果存在有連接的樣式，例如font-size，則轉(zhuǎn)換成駝峰命名法：fontSize即可
var vue = new Vue({
el: '#main',
data: {
msg: '大家好，我是渣渣輝',
styletext:{
color:'red',
fontSize:'25px'
}
}
})
在標(biāo)簽中添加屬性:style
<div id="main" :style="styletext">
{{msg}}
</div>
效果如下：
大家好，我是渣渣輝
綁定class
綁定class有兩種，直接文本數(shù)組方式或者對(duì)象方式
:class="['aaa','bbb']"
:class="{'aaa':true,'bbb':true}"
并且對(duì)象方式，可以使用判斷表達(dá)式：
:class="{'aaa':true,'bbb':1>2}"
并且里面可以引用data中的參數(shù)
厲害
