Vue 的介紹牺氨，優(yōu)缺點等概念這里就不瞎掰了。若想了解請直達官網(wǎng)。
在 CSS 效果 | 輪播圖 和 CSS 效果 | tab 選項卡 中兩個效果中可以提取出一個常見的問題饲趋，那就是如何進行元素的雙向綁定幽邓，原文并沒有實現(xiàn)炮温，這是一個普遍的需求點。
tab 變換時內(nèi)容區(qū)域要跟著變牵舵，那么內(nèi)容如果發(fā)生了切換而 tab 卻還停留在原來的位置柒啤，肯定是不符合需求的。同樣的輪播圖和小白點也是要雙向綁定的畸颅，那么這里其實就存在著重復(fù)的需求担巩。Vue 其實是支持元素的雙向綁定的。
原生的 js 有點難搞没炒，這時可以捋一捋 Vue 的知識點了涛癌。
國際傳統(tǒng) Hello World 開始。
在 Vue 中寫一個Hello World 是要這樣的：
- 引入 Vue.js || 本質(zhì)上就是引入一個外部的 js 文件
- html 中定義要掛載的元素 || 看一看哪個幸運兒可以被選中送火，獨得皇上恩寵
- 使用 new Vue() 創(chuàng)建實例 || 該實例接受一個對象作為參數(shù)
- 填充字段拳话，接收的字段包括：el，data
- 使用雙大括號語法 || 顯示
在 HTML 中引入 Vue
<!-- 開發(fā)環(huán)境版本种吸，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
HTML 文檔結(jié)構(gòu)
<div id="app">
{{message}}
</div>
HTML 文檔結(jié)構(gòu)很簡單弃衍，一個 id 名為 app 的 div 包著一個雙大括號。
這里的雙大括號是個什么鬼東西嘞坚俗？挖了一個坑镜盯，有空填。猖败。
下面是 js 示例形耗，同時也是核心代碼：
// function Vue() {
// }
// new Vue 做了什么？這個要看一下源碼辙浑。
// 接受一個對象參數(shù)
const app = new Vue({
el: '#app', // 用于掛載要管理的元素
data: {
// 定義數(shù)據(jù)
message: "Hello cemcoe"
}
})
效果就是頁面上會展示 “Hello cemcoe”激涤。
上面的編程范式是聲明式編程，至于什么是聲明式編程判呕，簡單說就是：點外賣倦踢，自己做飯可能要去買菜，接著洗菜侠草，下一步切菜辱挥。。边涕。點外賣就不需要考慮各個步驟了晤碘，直接點擊要的下單褂微，我要這個，還有這個园爷，至于怎么做完全不用考慮宠蚂。
想一下，如果不使用框架要實現(xiàn)上面的 Hello World 是一個什么流程童社。
與聲明式編程相對求厕，這里其實是命令式編程，一步一步怎么做扰楼，每一步都要精確呀癣。
- 首先肯定要使用諸如 querySelector() 等方法選擇節(jié)點
- 而后創(chuàng)建文本節(jié)點，并為其賦值
- 將創(chuàng)建的文本節(jié)點掛載到選擇的節(jié)點
下面來看一下如何展示一個列表弦赖。
省略固定不變的代碼项栏，在 data 中定義一個書籍列表
books: [
"數(shù)學(xué)",
"物理",
"生物",
"化學(xué)"
]
下面是展示，有了 Hello World 的經(jīng)驗蹬竖，對于列表比較容易想到的方法是：
<ul>
<li>books[0]</li>
<li>books[1]</li>
<li>books[2]</li>
</ul>
上面的方法可以嗎忘嫉，當(dāng)然可以，就是有點憨憨案腺，就好像老師讓算從1到100的整數(shù)和時庆冕，真就從1開始加到100。
比較簡潔的是下面的方式劈榨，Vue 已經(jīng)幫我們搞好了访递，真貼心。
<ul>
<li v-for="item in books">{{item}}</li>
</ul>
不出意外會展示一個列表 同辣。
技術(shù)點在于 v-for="item in books"拷姿，可以大致猜一下，這是遍歷了一下數(shù)組并將值賦給每個 item旱函，并將 item 搞到頁面中
// 僅供理解
for(let i = 0; i < books.length; i++) {
console.log(books[i])
}
在 Vue 中類似于 v-for 這種命名規(guī)則的還有 v-if 等响巢，他們的術(shù)語是指令。
到此就是 Vue 的入手筆記了棒妨。
