【VUE速成】1.第一個VUE應用
引用VUE，可以使用CDN或者本地方法引入即可。
引入Vue.js
打開地址：https://www.bootcdn.cn/vue/
選一個版本，min為壓縮版本js,引用到網頁
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
或者直接下載下來本地引用也行。
創(chuàng)建第一個VUE應用
使用vue很簡單
在文檔末尾，body之前寫script標簽，聲明Vue類
<script type="text/javascript">
new Vue({
}
})
</script>
通過el屬性綁定一個文檔標簽，例如綁定一個id為main的div，此時什么都沒有，但是已經綁定完成。在下面的div中已經可以使用數據了。
<!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方法里面。數據名稱自己隨意命名即可，內容類型可以為文本或者數字。
<script type="text/javascript">
new Vue({
el: '#main',
data: {
msg: '大家好，我是渣渣輝',
msg2: '大家好，我是古天落'
}
})
</script>
在標簽中引用內容，使用雙大括號包裹數據名稱的方法引用
<div id="main">
{{msg}}
</div>
這個時候，瀏覽網頁，會顯示為：
大家好，我是渣渣輝
使用兩個數據
<div id="main">
{{msg}}，{{msg2}}
</div>
此時網頁顯示為
大家好，我是渣渣輝，大家好，我是古天落
版權聲明：
作者：applek
鏈接：http://www.elite-design.com.cn/vue01.html
文章版權歸作者所有，未經允許請勿轉載。
THE END
