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