Vue.js教程

 

 

什麼是Vue.js

無論你想不想了解，你只須要大概知道，Vue就是和jQuery同樣是一個前端框架，它的中心思想就是數據驅動，像遠古時代的老前輩jQuery是結構驅動，什麼意思呢，之前咱們寫代碼時經常使用$('.dom').text('我把值改變了')，這種寫法先要得到結構，而後再修改數據更新結構，而Vue的作法直接就是this.msg="我改變了"，而後msg就會同步到某個結構上，視圖管理抽象爲數據管理，而不是管理dom結構了。不懂不要緊，慢慢來。

還有一點必需要知道的是，Vue是國人寫的，技術文檔也妥妥的是中文，想到這我就有學習的動力。

搭建環境

工欲善其事必先利其器，咱們的學習計劃從學會搭建Vue所須要的環境開始，node和npm的環境不用說是必須的，如今前端流程化很熱門，基本上新的技術都會在這套流程的基礎上作開發，咱們只須要站在巨人的XX上裝*就能夠了。我假設你的機子上已經有了最新的node和npm了，那咱們就只須要執行如下命令：

$ npm install -g vue-cli

構建完了以後，隨便進入一個咱們事先準備好的目錄，好比demo目錄，而後在目錄中作初始化操做：

$ vue init webpack myProject

webpack參數是指myProject這個項目將會在開發和完成階段幫你自動打包代碼，好比將js文件統一合成一個文件，將CSS文件統一合併壓縮等。要是不知道webpack的話，建議先了解下爲好，固然不瞭解也不影響咱們接着往下走。

init的過程當中會問你給項目定義一些描述，版本之類的信息，能夠無論，一直輸入y肯定跳過，完成以後出現如下界面，紅框部分會提示你接下來要作的操做，按照它的提示繼續敲代碼就對了。

cd myProject
npm install
npm run dev

npm install 是安裝項目所須要的依賴，簡單理解就是安裝一些必要的插件，須要等一段時間；

npm run dev 是開始執行咱們的項目了，一旦執行這個命令以後，等一小會，瀏覽器應該會自動幫你打開一個tab爲 http://localhost:8080/#/ 的連接，這個連接就是咱們本地開發的項目主頁了，若是沒有，說明出錯了。請移步到評論區回覆吧。。。

(PS：開發完成後執行npm run build會編譯咱們的源代碼生成最終的發佈代碼，在dist目錄下)

看看Vue都給咱們生成一些什麼文件，這其中咱們須要關注的是如下文件

package.json保存一些依賴信息，config保存一些項目初始化配置，build裏面保存一些webpack的初始化配置，index.html是咱們的首頁，除了這些，最關鍵的代碼都在src目錄中，index在不少服務器語言中都是預設爲首頁，像index.htm，index.php等；打開build目錄中的webpack.base.conf.js，會看到這樣的代碼

說明咱們的入口js文件在src目錄中的main.js，接下來咱們就分析下這些初始化代碼先；

跟着代碼走

Vue的核心架構，按照官方解釋和我的理解，主要在於組件和路由兩大模塊，只要理解了這兩大模塊的思想內容，剩下API使用就只是分分鐘的事情了。因此在個人系列文中，會圍繞組件和路由教你們開發一個前端組件庫，這個過程也是我我的學習的練手項目，我的以爲一步步作下來以後，對Vue的理解就能夠算是出師了，賽過讀10遍書籍文檔，那是後話了，先讓咱們看看最基本的Vue生成的默認代碼吧！

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

先是第一句

import Vue from 'vue'

這句很好理解，就像你要引入jQuery同樣，vue就是jquery-min.js，而後Vue就是$；而後又引入了./App文件，也就是目錄中和main.js同級的App.vue文件；在Vue中引入文件能夠直接用import，文件後綴名能夠是.vue，這是Vue本身的文件類型，以前說的webpack會將js和css文件打包，一樣的道理，在webpack中配置vue插件後（項目默認配置），webpack就能夠將.vue類型的文件整合打包，這和nodeJs中require差很少的道理。

說回App.vue這個文件，這是一個視圖（或者說組件和頁面），想象一下咱們的index.html中什麼也沒有，只有一個視圖，這個視圖至關於一個容器，而後咱們往這個容器中放各類各樣的積木（其餘組件或者其餘頁面），App.vue中的內容咱們後面說；

import router from './router'

這句代碼引入一段路由配置，一樣的後邊說（很快就說到的不用急）

接下來的 new Vue實例化，其實就至關於平時咱們寫js時候經常使用的init啦，而後聲明el：'#app'，意思是將全部視圖放在id值爲app這個dom元素中，components代表引入的文件，即上述的App.vue文件，這個文件的內容將以<App/>這樣的標籤寫進去#app中，總的來講，這段代碼意思就是將App.vue放到#app中，而後以<App/>來指代咱們的#app。

import Vue from 'vue'
import App from './App'/*引入App這個組件*/
import router from './router'/*引入路由配置*/

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',/*最後效果將會替換頁面中id爲app的div元素*/
  router,/*使用路由*/
  template: '<App/>',/*告知頁面這個組件用這樣的標籤來包裹着,而且使用它*/
  components: { App }/*告知當前頁面想使用App這個組件*/
})

單頁面組件

好了，如今打開咱們的App.vue文件，在Vue中，官網叫它作組件，單頁面的意思是結構，樣式，邏輯代碼都寫在同一個文件中，當咱們引入這個文件後，就至關於引入對應的結構、樣式和JS代碼，這不就是咱們作前端組件化最想看到的嗎，從前的asp、php也有這樣的文件思想。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

node端之因此能識別.vue文件，是由於前面說的webpack在編譯時將.vue文件中的html，js，css都抽出來合成新的單獨的文件。

單頁面組件會在後面的實戰中完總體現，這裏先不作過多描述；

看到咱們文件內分爲三大部分，分別是<template><script><style>，很好理解結構，腳本，樣式；script就像node同樣暴露一些接口，能夠看到咱們的template標籤中除了一張圖片以外就只有一行代碼：<router-view></router-view>

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

回看咱們的瀏覽器頁面中，圖片是有了，可下面的文本和連接的代碼寫在哪裏了呢？這裏就要開始涉及路由了。

路由

這裏補充下路由的大體概念：傳統的php路由是由服務器端根據必定的url規則匹配來返回給前端不一樣的頁面代碼，如如下地址

https://isux.tencent.com/about 和 https://isux.tencent.com/recruit

注意這裏只有about和recruit，這些不帶xxx.html的地址實際上是服務器端通過一層封裝指定到某些文件上去。一樣的道理，前端也能夠根據帶錨點的方式實現簡單路由（不須要刷新頁面）

https://zhitu.isux.us/index.php/preview/install#mac

其中#mac就是咱們的錨點路由，注意開始咱們在瀏覽器中打開的地址：

http://localhost:8080/#/，

路由讓咱們能夠訪問諸如http://localhost:8080/#/about/ 或者 http://localhost:8080/#/recruit這些頁面的時候不帶刷新，直接展現。如今回到咱們剛纔打開的App.vue文件中看這行代碼

<router-view></router-view>

這句代碼在頁面中放入一個路由視圖容器，當咱們訪問http://localhost:8080/#/about/的時候會將about的內容放進去，訪問http://localhost:8080/#/recruit的時候會將recruit的內容放進去

如此看來，不管咱們打開http://localhost:8080/#/about/ 仍是http://localhost:8080/#/recruit頁面中的圖片都是公用部分，變得只是路由器裏面的內容，那麼路由器的內容誰來控制呢？

前面說的src/main.js中有一句引入路由器的代碼。

import router from './router'

如今就讓咱們打開router目錄下的js文件。

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import About from '@/components/about'
import Recruit from '@/components/recruit'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
},
    {
      path: '/about',
      name: 'about',
      component: About
},
    {
      path: '/recruit',
      name: 'recruit',
      component: Recruit
}
  ]
})

前面先引入了路由插件vue-router，而後顯式聲明要用路由 Vue.use(Router) 。注意到Hello，About等都是頁面（也能夠是組件），接着註冊路由器，而後開始配置路由。

路由的配置應該一目瞭然，給不一樣的path分配不一樣的頁面（或組件，頁面和組件實際上是同樣的概念），name參數不重要只是用來作識別用的。看到這裏就能夠明白，前面說的紅色框的內容，其實就是Hello裏面的內容，打開components目錄下的Hello.vue就能明白了。

到這裏就能夠完成路由的配置，我我的習慣喜歡把頁面放在pages目錄下，組件放在components目錄下，可能有人會問若是要訪問http://localhost:8080/#/about/me的話要如何配置呢，很簡單隻要給路由加多一個子路由配置，以下：

{
      path: '/blog',
      name: 'blog',
      component: Blog,
      children: [
        {
          path: '/',
          component: page1
        },
        {
          path: 'info',
          component: page2
        }
      ]
    }

訪問/blog的時候會訪問Blog頁面，Blog裏面放個路由器就能夠了，而後訪問http://localhost:8080/#/blog/的時候會往路由容器中放置page1的內容，訪問http://localhost:8080/#/blog/info的時候會往路由容器中放置page2的內容

//blog.vue
<template>
    <div>公用部分</div>
    <router-view></router-view>
</template>

小結

貫穿咱們剛纔學習的過程，從初始化到頁面展現，Vue的頁面架構流程大概是這樣的

總結下前面講的內容先：

1. 搭建環境
2. 代碼邏輯
3. 單頁面組件（簡單帶過）
4. 路由
5. 子路由

以上的流程就是咱們剛開始接觸Vue時候的簡單介紹，在以前就說過學習Vue能掌握組件和路由的基本概念以後，對於咱們後續瞭解他的工做機制有着很大的幫助，本篇章咱們只是簡單介紹了單頁面組件，在下一篇文章中，咱們將經過一個實戰的項目，來充分了解組件化在Vue構建中的重要性。

時間不早了，我也該回去睡覺了，消化一下，咱們下一篇文章見~~~

文末附上全部相關代碼和官方文檔地址~~~

http://cn.vuejs.org/v2/guide/

轉載自權騰訊雲+社區發佈