環(huán)境搭建

前些天發(fā)現(xiàn)了一個巨牛的人工智能學(xué)習(xí)網(wǎng)站，通俗易懂，風(fēng)趣幽默，忍不住分享一下給大家。點擊跳轉(zhuǎn)到教程。

假設(shè)你已經(jīng)通讀vue官方文檔（文檔都沒讀一遍（至少），那不建議動手?jǐn)]碼），在大致了解vue是什么東西，有什么用，核心概念之后我們就可以開始著手學(xué)習(xí)vue。首先搭建環(huán)境。

學(xué)習(xí)vue，我的建議是通過官手腳手架起步。

>>>Installation$ npm install -g vue-cli>>Usage$ vue init <template-name> <project-name>>>>>Example:$ vue init webpack my-project

根據(jù)需要安裝插件yes or no,一直回車，腳手架就生成了。接下來剖析腳手架結(jié)構(gòu)。

腳手架結(jié)構(gòu)剖析

再開始寫項目之前，我們需要弄清什么地方寫什么代碼。

build文件夾

webpack配置文件。此處配置webpack規(guī)則。整個項目是通過webpack支持的。比如你要使用less，你需要在webapck規(guī)則里使用less。

src 文件夾

擼碼的地方～基本你所有的代碼都在這一塊完成。

assets文件夾

存放web中引用的圖片 媒體資源。

components文件夾

主要存放可復(fù)用組件，你可以在任意頁面中復(fù)用這些組件。

router文件夾

index.js 路由配置文件。在此處配置各個頁面的跳轉(zhuǎn)引用關(guān)系。

APP.vue

這里看一看做頁面的根部。我們可以在這個頁面進(jìn)行一些css reset 操作。

main.js

根邏輯，頁面加載首先會加載這份js文件。

static文件夾

主要存放外部引用資源。比如xxx.min.js

index.html

vue是spa應(yīng)用，所以只有一個入口，也就是index文件，這里我們進(jìn)行一些不可更改資源（比如某某庫）的引用，和html頁面meta 、title之類的設(shè)定。

vue核心概念

vue的核心概念是‘?dāng)?shù)據(jù)驅(qū)動’，假如我們需要切換view層，我們應(yīng)該修改的是數(shù)據(jù)。下面我會分享一些我自己在學(xué)習(xí)vue中收獲的一些實例，大家自行感受。

實例展示的是方法論，概念性一樣的東西，不要被例子局限，要將思維擴散出去。知識點學(xué)習(xí)還是看官方文檔為主。

vue如何處理dom顯示，樣式切換，動態(tài)樣式

watch 和 computed的 簡析

vue提供了2個動態(tài)監(jiān)測data的函數(shù)，一個是watch，一個是computed。

watch： 主要監(jiān)測已經(jīng)存在的data，處理data變化后的鉤子

computed： 處理一個已存在的data，返回一個data

vuex 是一個比較好的例子，可以用來學(xué)習(xí)監(jiān)測，什么時候用什么方法去處理這些變化。

v-for 列表渲染機制

v-for 是我認(rèn)為vue中一個非常非常強大的指令，所有規(guī)律性動態(tài)數(shù)據(jù)的展示，都可以用for指令來完成。
v-for是非常強大，可以追蹤循環(huán)體內(nèi)任意一個值的變化，針對變化來單獨渲染。

v－for 建議仔細(xì)閱讀官方文檔，而不是通讀。在項目中，我們應(yīng)該養(yǎng)成習(xí)慣。對于可變化的，規(guī)律性數(shù)據(jù)都采用for指令渲染。 我之所以又把for指令寫了一遍，是因為我在開始寫vue時，根本就沒有活用for指令的簡便和強大，還是古老的ul li 循環(huán)，繁雜的事件綁定委托。估計人類本性對一個東西還不太了解的時候會習(xí)慣性的用自己熟悉的方式去操作的原因。

vue中引入組件以及父子組件的數(shù)據(jù)交互

關(guān)于組件，任意vue文件你都可以看做一個組件。 在項目中我們一般使用的應(yīng)該都是單文件組件，單文件組件與頁面結(jié)構(gòu)無異，是具有完整功能的一個模塊。比如一個評論框，你就可以剝離成一個組件，在任意頁面文件中引入這個組件。

vue過濾器

在有一些業(yè)務(wù)場景需要對數(shù)據(jù)進(jìn)行一些轉(zhuǎn)換，比如后端圖片地址的前綴匹配，這個時候filters就派上大用場了?？磦€例子感受一下。

vue路由

路由對于spa應(yīng)用的重要性不言而喻，整個應(yīng)用的頁面關(guān)系都是通過路由定義的。我們先來看看一個路由文件大致是什么樣子

vue 使用history模式，我們就可以去使用history的API，需要在路由配置中啟用。默認(rèn)hash模式，history模式也是一般應(yīng)用的常用模式。

//切換當(dāng)前地址，同 history.replaceStatethis.$router.replace({name: 'list'}) //向history推入一級，同history.pushthis.$router.push({name: 'list'}) //添加參數(shù)this.$router.push({name: 'list', query: {setting: 'setting'}})//監(jiān)測路由變化 watch:{'$route': function () {//處理事件}},》》》》可以在頁面任意處打印this.$route查看路由對象

vue的路由配置相對來說，是比較簡單的，閱讀一遍router文檔，就可以快速上手。

路由是非常重要的一塊，在動手開始寫你的vue項目之前，你非常有必要通讀一遍路由文檔。而不是碰到問題再去解決。嵌套路由，動態(tài)路由會對你的開發(fā)起到非常有用的幫助。官方路由

可監(jiān)測的全局變量——vuex

項目開發(fā)中，往往我們會有一些全局變量，但是正常全局變量，vue是不能監(jiān)測的，這個時候vuex就派上用場了。?vuex官方文檔

npm install vuex --save／／安裝好vuex后，我們先新建一個store文件夾，存放vuex相關(guān)文件，如下圖所示 >>>>> index.jsimport Vue from 'vue' import Vuex from 'vuex' import modulesApp from './modules/app' //引入一個app模塊 Vue.use(Vuex)let store = new Vuex.Store({strict: process.env.NODE_ENV !== 'production',modules: {app: modulesApp} })export default store———————————————— 分割線——————————————————>>>>>app.js //這里是個我的示例結(jié)構(gòu)，可以查閱文檔選擇自己喜歡的書寫方式let state = {height: document.documentElement.scrollHeight + 'px',total: 1,list: [],};let getters = {};let mutations = {height: state => state.height = document.documentElement.scrollHeight + 'px',totalChange (state, total) {state.total = total},listChange (state, list) {state.list = list},};let actions = {};export default {state,getters,mutations,actions }

如何開始寫第一個demo項目

看完以上內(nèi)容，想必大家對vue都有了進(jìn)一步的了解。在通讀官方文檔后，我們對vue都有一個大致的了解，這樣其實對于新手而言還是沒有方向去寫一個demo出來的，我們往往想寫個漂亮的demo，但這樣就必須花大量時間去寫html和css，這點博主深有體會，看了2遍文檔后還是不知道怎么去入手寫個demo練手。這里博主有個建議就是：

專注于vue本身，而不是花過多的時間去寫html，css。

以上我們已經(jīng)搭建了一個vue開發(fā)環(huán)境，接下來就是找一款心儀的UI組件庫，博主這里推薦iview，個人感覺挺漂亮。然后就是構(gòu)思你的demo要寫什么，好了，拖組件搭UI，開始寫真正寫項目代碼把，把更多時間花在vue學(xué)習(xí)之上。

?

轉(zhuǎn)自：https://www.cnblogs.com/buzhiqianduan/p/7620102.html

總結(jié)

以上是生活随笔為你收集整理的vue 各组件 使用 Demo的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。