環境搭建

前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉到教程。

假設你已經通讀vue官方文檔（文檔都沒讀一遍（至少），那不建議動手擼碼），在大致了解vue是什么東西，有什么用，核心概念之后我們就可以開始著手學習vue。首先搭建環境。

學習vue，我的建議是通過官手腳手架起步。

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

根據需要安裝插件yes or no,一直回車，腳手架就生成了。接下來剖析腳手架結構。

腳手架結構剖析

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

build文件夾

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

src 文件夾

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

assets文件夾

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

components文件夾

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

router文件夾

index.js 路由配置文件。在此處配置各個頁面的跳轉引用關系。

APP.vue

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

main.js

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

static文件夾

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

index.html

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

vue核心概念

vue的核心概念是‘數據驅動’，假如我們需要切換view層，我們應該修改的是數據。下面我會分享一些我自己在學習vue中收獲的一些實例，大家自行感受。

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

vue如何處理dom顯示，樣式切換，動態樣式

watch 和 computed的 簡析

vue提供了2個動態監測data的函數，一個是watch，一個是computed。

watch： 主要監測已經存在的data，處理data變化后的鉤子

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

vuex 是一個比較好的例子，可以用來學習監測，什么時候用什么方法去處理這些變化。

v-for 列表渲染機制

v-for 是我認為vue中一個非常非常強大的指令，所有規律性動態數據的展示，都可以用for指令來完成。
v-for是非常強大，可以追蹤循環體內任意一個值的變化，針對變化來單獨渲染。

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

vue中引入組件以及父子組件的數據交互

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

vue過濾器

在有一些業務場景需要對數據進行一些轉換，比如后端圖片地址的前綴匹配，這個時候filters就派上大用場了。看個例子感受一下。

vue路由

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

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

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

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

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

可監測的全局變量——vuex

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

npm install vuex --save／／安裝好vuex后，我們先新建一個store文件夾，存放vuex相關文件，如下圖所示 >>>>> 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 //這里是個我的示例結構，可以查閱文檔選擇自己喜歡的書寫方式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項目

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

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

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

?

轉自：https://www.cnblogs.com/buzhiqianduan/p/7620102.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。