|
最近一直在學(xué)習(xí) 這里是GitHub的項(xiàng)目地址，目前雖然還是個(gè)半成品（有點(diǎn)懶），但對(duì)于初學(xué)者來說應(yīng)該會(huì)有幫助，因?yàn)槲乙彩浅鯇W(xué)者。使用到的技術(shù)棧包括 這不是一篇純技術(shù)文章，更多的是我自己總結(jié)的一些方法和對(duì) 初學(xué)者的難題根據(jù)我學(xué)習(xí)的經(jīng)歷，我覺得對(duì)于初學(xué)者學(xué)習(xí) 從Vue-cli開始
# 全局安裝 vue-cli
npm install -g vue-cli
# 創(chuàng)建一個(gè)基于 Webpack 模板的項(xiàng)目
vue init webpack my-project
# 安裝依賴
cd my-project
npm install
# 運(yùn)行
npm run dev
直接進(jìn)入到單文件組件開發(fā)
單文件組件（.vue后綴名）很好的實(shí)現(xiàn)了組件的封裝，讓組件看起來更像組件。文件結(jié)構(gòu)如下： <template lang='html'>
<!-- 這里是組件的 HTML 標(biāo)簽 -->
</template>
<script>
export default {
// 這里是組件 js 代碼
}
</script>
<style lang='scss' scoped>
// 這里是組件的 CSS 樣式
</style>
選擇一款合適的編輯器我曾經(jīng)無數(shù)次糾結(jié)過這個(gè)問題：到底是使用 簡(jiǎn)單的說一下，選擇 如果你也跟我一樣糾結(jié)的話，那我建議你選擇 Sublime作為前端編輯器，推薦幾個(gè)好用的插件：
另外推薦一款我在用的主題： 縱觀全局我一直有一個(gè)觀點(diǎn)：就是看事物要先看全局，忽略那些繁瑣的細(xì)節(jié)，然后再逐個(gè)深究。比如看書要先看目錄（雖然我討厭看書），首先做到心里有數(shù)，知道自己在看什么或有沒有必要再看下去(比如這篇文章)。 比較重要的幾個(gè)概念我不是一個(gè)語言表達(dá)能力很好的人，不會(huì)扯那些概念，我只能盡可能的說一些自己的理解。 這里先說一句，Vue中的 Vue實(shí)例通過 new Vue({
// el是實(shí)例掛載點(diǎn)，會(huì)將根組件替換掉原文檔中id為 app 標(biāo)簽
el: '#app',
// 通過render函數(shù)渲染
render: h => {
// 這里App是根組件
h(App)
}
})
// 第二種寫法
new Vue({
el: '#app',
// 通過字符串模板
template: '<App />',
components: { App }
})
Vue擴(kuò)展實(shí)例嚴(yán)格來說，通過 擴(kuò)展實(shí)例創(chuàng)建方式： const MyComponent = Vue.extend({
// 該對(duì)象就相當(dāng)于 單文件組件中 export 導(dǎo)出的對(duì)象
// 這就是為什么說 所有的Vue組件都是被擴(kuò)展的Vue實(shí)例
})
// 創(chuàng)建擴(kuò)展實(shí)例
const component = new MyComponent()
同樣的，Vue擴(kuò)展實(shí)例也需要掛載，其語法與根實(shí)例掛載一樣： // 會(huì)替換掉 HTML 文檔中 id 為 app 的標(biāo)簽
new MyComponent({el: '#app'})
// 但是這里不建議這么做，因?yàn)檫@樣會(huì)與實(shí)例掛載點(diǎn)沖突
// 這里僅僅是為了說明擴(kuò)展實(shí)例與 根實(shí)例的相似之處
擴(kuò)展實(shí)例一個(gè)重要的用法就是在需要的時(shí)候才被插入到HTML文檔中。比如點(diǎn)擊一個(gè)按鈕，彈出一個(gè)模態(tài)（modal）框。在我的Demo中，正是通過該方法實(shí)現(xiàn)一個(gè)加載等待的模態(tài)框。通過此方法有一個(gè)好處就是，可以將該功能封裝成一個(gè)Vue插件，需要的時(shí)候通過一條指令就可以將組件插入到文檔中，不需要預(yù)先將組件寫入到HTML文檔中。方法如下： // 創(chuàng)建擴(kuò)展實(shí)例
let component = new MyComponent()
// 掛載到虛擬DOM中
// 不傳遞參數(shù)，若傳遞參數(shù)會(huì)掛載到指定的地方
component = component.$mount()
// 通過原生語法將 擴(kuò)展實(shí)例添加到HTML文檔中
document.body.appendChild(component.$el)
同樣，Vue根實(shí)例也可以通過該方式掛載到HTML中。 組件組件就是擴(kuò)展的Vue實(shí)例（哈哈）。反正記住在Vue中，一切可見的東西（但不限于可見的東西）都是組件，一個(gè)Vue實(shí)例就是由一大堆組件通過一定的組合和嵌套累積起來的。 學(xué)習(xí)組件無外乎就是它的創(chuàng)建和使用，通過擴(kuò)展Vue實(shí)例也算是一種創(chuàng)建的方式，另外還有字符串模板和render函數(shù)渲染的方式。我一開始就建議直接使用單文件組件，具體請(qǐng)轉(zhuǎn)移官方文檔或從GitHub上Clone我的demo查看詳情。 生命周期每個(gè)組件都有自己的生命周期，從廣義上來說，Vue實(shí)例其實(shí)也是一個(gè)組件。一般常用的幾個(gè)生命周期鉤子： 所謂的生命周期鉤子，就是說組件在特定的時(shí)刻會(huì)自動(dòng)觸發(fā)該事件，執(zhí)行對(duì)應(yīng)的函數(shù)。 學(xué)習(xí)Vue的基本思想程序員，其實(shí)大部分時(shí)間是用于思考的。建立一種思想，一種思維方式很重要。這也是我現(xiàn)在一直在努力做的事。 學(xué)習(xí)一個(gè)框架，就要站在它的角度去思考問題。而Vue是一種 什么是MVVM
之前，我們使用 什么是MVC順便談一下 Vue的基本原理我沒有研究過Vue的源碼，也解釋不出來它是怎么實(shí)現(xiàn)的？畢竟我們是使用框架，通過它來提高開發(fā)效率，沒必要太過于深究，否則就失去了使用它的意義（大神請(qǐng)忽略之）。記住一句話：我們是站在巨人的肩膀上開發(fā)的。如果什么都要去深究其原理，那還不累死？ Vue的核心是組件，一切可以看見的東西都是由組件構(gòu)成。然后通過把不同的組件組合和嵌套在一起，最終組成了一個(gè)根組件，也就是 new Vue({
// 該屬性會(huì) 將Vue實(shí)例掛載到 真實(shí)的HTML中
el: '#app',
// App 就是根組件，被掛載到Vue實(shí)例中
render: h => h(App)
})
最后越寫到后面感覺越偏離主題（不知所云，看來得好好練一下文筆了），實(shí)在寫不出想要的那種效果，所以就先到此為止吧。先整理一下思路，后面有時(shí)間會(huì)接著更新，希望自己會(huì)堅(jiān)持下去，這是第一篇。 關(guān)注我，獲取前端更多技術(shù)文章！ |
|
|
