【VUE速成】1.第一個(gè)VUE應(yīng)用
引用VUE，可以使用CDN或者本地方法引入即可。
引入Vue.js
打開(kāi)地址：https://www.bootcdn.cn/vue/
選一個(gè)版本，min為壓縮版本js,引用到網(wǎng)頁(yè)
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
或者直接下載下來(lái)本地引用也行。
創(chuàng)建第一個(gè)VUE應(yīng)用
使用vue很簡(jiǎn)單
在文檔末尾，body之前寫(xiě)script標(biāo)簽，聲明Vue類(lèi)
<script type="text/javascript">
new Vue({
}
})
</script>
通過(guò)el屬性綁定一個(gè)文檔標(biāo)簽，例如綁定一個(gè)id為main的div，此時(shí)什么都沒(méi)有，但是已經(jīng)綁定完成。在下面的div中已經(jīng)可以使用數(shù)據(jù)了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.min.js"></script>
</head>
<body>
<div id="main">
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#main',
})
</script>
</html>
添加data屬性到vue方法里面。數(shù)據(jù)名稱(chēng)自己隨意命名即可，內(nèi)容類(lèi)型可以為文本或者數(shù)字。
<script type="text/javascript">
new Vue({
el: '#main',
data: {
msg: '大家好，我是渣渣輝',
msg2: '大家好，我是古天落'
}
})
</script>
在標(biāo)簽中引用內(nèi)容，使用雙大括號(hào)包裹數(shù)據(jù)名稱(chēng)的方法引用
<div id="main">
{{msg}}
</div>
這個(gè)時(shí)候，瀏覽網(wǎng)頁(yè)，會(huì)顯示為：
大家好，我是渣渣輝
使用兩個(gè)數(shù)據(jù)
<div id="main">
{{msg}}，{{msg2}}
</div>
此時(shí)網(wǎng)頁(yè)顯示為
大家好，我是渣渣輝，大家好，我是古天落
版權(quán)聲明：
作者：applek
鏈接：http://www.yydfqli.cn/vue01.html
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載。
THE END
