最近開始入坑學vue了，學React的“失敗”還歷歷在目(基礎沒打好的情況下直接寫項目果然難頂)。ps:這個筆記主要用作個人記錄與交流學習，主要參考geektime的vue開發實戰專欄，前期代碼居多，後期入門了就稍加完善這個筆記，沒入門就爛尾🙃
Vue是一門Processive(漸進性)，Reactive(響應式)的前端框架...更多細節可以查看vue中文官網對vue的簡介視頻。
作爲各種編程語言(框架)的第一個入門程序，那必然是helloworld，創建一個helloworld.html文件，使用你喜歡的編輯器(推薦vscode)打開，將如下的Html代碼編入(重點是<body>標籤，重重點是<script>便籤):
<!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>Hello, vue!</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message: 'hello vue!',
}
})
</script>
</body>
</html>
運行結果爲:
右擊chrome瀏覽器空白處選檢查(快捷鍵(fn+)F12)，打開檔期頁面的console:
編碼改變app.message的值並回車執行:
可以看出id爲app的div中的文本是隨new的Vue對象中的message值變化而立刻變化的，這個體現了Vue響應式的特點。第一個script標籤src引用的url來源於vue官方教程(官網->學習->教程->下拉到安裝)
再複雜一點的例子是自定義一個vue列表組件並展示列表，代碼的細節暫時沒能力說明白，大概使用了vue指令，邏輯還是挺清晰的:
<!DOCTYPE html>
<html lang="cn">
<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>Hello, itemList!</title>
</head>
<body>
<div id="app">
{{message}}
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li class="text">{{todo.text}}</li>'
})
var app = new Vue({
el:'#app',
data:{
message: 'hello vue!',
groceryList: [{
id: 0,
text: '蔬菜'
}, {
id: 1,
text: '奶酪'
}, {
id: 2,
text: '其它食物'
}],
}
})
</script>
</body>
</html>
運行結果:
這兩個例子非常簡單，使用的vue的方式類似引進Jquery通過script標籤src指定js文件位置的方式。這種是不推薦的，最主要的原因感覺還是前端工程化。現代的前端不再像以前那樣寫寫多個html頁面css樣式js腳本構建了。後續會談...