環(huán)境搭建

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

假設(shè)你已經(jīng)通讀vue官方文檔（文檔都沒讀一遍（至少），那不建議動(dòng)手?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)剖析

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

build文件夾

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

src 文件夾

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

assets文件夾

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

components文件夾

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

router文件夾

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

APP.vue

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

main.js

根邏輯，頁(yè)面加載首先會(huì)加載這份js文件。

static文件夾

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

index.html

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

vue核心概念

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

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

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

watch 和 computed的 簡(jiǎn)析

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

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

computed： 處理一個(gè)已存在的data，返回一個(gè)data

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

v-for 列表渲染機(jī)制

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

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

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

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

vue過濾器

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

vue路由

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

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

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

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

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

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

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

npm install vuex --save／／安裝好vuex后，我們先新建一個(gè)store文件夾，存放vuex相關(guān)文件，如下圖所示 >>>>> index.jsimport Vue from 'vue' import Vuex from 'vuex' import modulesApp from './modules/app' //引入一個(gè)app模塊 Vue.use(Vuex)let store = new Vuex.Store({strict: process.env.NODE_ENV !== 'production',modules: {app: modulesApp} })export default store———————————————— 分割線——————————————————>>>>>app.js //這里是個(gè)我的示例結(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 }

如何開始寫第一個(gè)demo項(xiàng)目

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

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

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

?

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

總結(jié)

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

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