前幾天在慕課網上買了vue去哪裏了實戰項目，今天正式開始學習。
第二章
一. 編寫一個自己的hello word、
- 打開vue的官方文檔 https://vuejs.org
- 在安裝中選擇開發版本，並下載
![在這裏插入圖片描述]()
- 構建項目
<!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>vue1</title>
</head>
<script src="./vue.js"></script>
<!-- 格式化代碼的快捷鍵是shift+alt+f -->
<body>
<div id="div1">{{content}}</div>
</body>
<script>
var app = new Vue({
el: '#div1',
data: {
content: 'hello world'
}
})
// 設置2秒後變爲bye world
setTimeout(function () {
app.$data.content = 'bye world'
}, 2000)
</script>
</html>
注意事項
- 引入vue.js文件的時候不能省略後面的
<script src="./vue.js"></script>
- new Vue({})這裏的Vue首字母要大寫。
- 獲取vue實例的代碼不能寫在src裏，也不能寫在上面。
- 修改data中的數據要用$
app.$data.content = 'bye world'
擴展
- 新建的html文件爲空，如何快速生成標準的模板
！+tab - 格式化代碼的快捷鍵
shift+alt+f - vue 在控制檯無法顯示
官方建議在項目入口文件（main.js）引入：
Vue.config.devtools = true;
你眼中的璀璨星河，是我不曾見過的世外桃源”
