【呆萌の體驗】vue.js初次體驗

前言

我很早就想來學習學習vue.js啦，終於有了那麼一些空閒的時間能夠拿來學習，因而從前天開始我就天天抽一個多小時來體驗vue.js。
固然啦，由於是小白入門，這其中可能會有「錯誤」或者不恰當的說法，還請各位大神能多指正我(●'◡'●)。

Vue.jsの安裝

Vue.js官網：https://cn.vuejs.org/v2/guide...
當然最好的資料就是官網了，因此一開始我在官網上看了一些基本的用法，而後就跟着官方的安裝教程安裝（https://cn.vuejs.org/v2/guide...），過程比較順利，也相對容易。
安裝好vue和vue-cli以後，就能夠初始化項目了，運行

vue init webpack my-project

以後，出現了一個名爲my-project的項目文件夾。進去以後就會發現整個項目的結構：

固然node_modules這個文件夾是後面纔出現的，也就是咱們還要運行

npm install

這個命令會根據pakage.json裏的依賴內容去安裝相關的依賴包，可是我就是在這裏遇到了一個小麻煩，就是它好久都沒有反應，後來查詢才知道是由於命令會去國外的網站去下載的，速度太慢了，因此咱們最好用國內的鏡像去下載。直接下載淘寶的cnmp命令行工具（https://npm.taobao.org/）或者借用鏡像地址下載就能夠解決問題。

npm install --registry=https://registry.npm.taobao.org

最後，只要輸入

npm run dev

就能夠運行項目了，會在git上看到以下圖的提示，瀏覽器也會自動打開頁面：

看到官網的默認頁面就是運行成功了。

demo頁面是怎麼組成的？

咱們看看這個文檔結構的文件，要找到入手改代碼的地方，就要知道這些文件是作什麼用的。

index.html：官方默認項目是存放了一個ID爲app的DIV

<div id="app"></div>

打開src文件夾：

有一個main.js、App.vue，還有一個名爲組件的文件夾，裏面放了一個HelloVue.vue文件。咱們都打開看看。
HelloVue.vue部分：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    .....
  </div>  
</template>  

<script>  
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

咱們會發現這幾排字就是顯示在頁面的幾排文字~
App.vue部分：

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

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

這其中的<img src="./assets/logo.png">是顯示在主頁上面的圖片，因此它也與主頁的輸出有關係。
咱們還能夠猜測，下面的router-view就輸出了HelloWorld裏面寫的內容。可是咱們沒有看到直接的引用。咱們就去查詢一下這個router-view（https://router.vuejs.org/zh-c...），還能夠想到下面main.js中引用的router，因此咱們看看router下的router.js：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: HelloWorld
    }
  ]
})

做爲小白還不是很清楚其中的原理，可是咱們能夠確定，就是在這裏引用了HelloWorld這個組件。
main.js：

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 }
})

這個文件引入了App.vue，還有上述的router.js。並在下面用到了App的組件。
因此能夠得出一個簡單的結論：以main.js爲中心，main.js引進了App.vue，App.vue藉助使用到了HelloWorld。
在main.js中這個組件對準了id是app的元素，使用APP組件去替換。
其中有一句template: '<App/>'，官方對template（https://cn.vuejs.org/v2/api/#...）的解釋是：

一個字符串模板做爲 Vue 實例的標識使用。模板將會 替換 掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發插槽。
結合查詢其餘說法，就是說它會把id是app的元素以<App/>形式替換。

修改和比較

router-view替換
在App.vue中，不用<router-view>寫出同樣的效果

<template>
  <div class="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/HelloWorld'

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

直接在這裏引入HelloWorld也能夠顯示文字內容。
相應在main.js能夠把router相關的內容刪除，不過router確定有更加多的功能0-0。

關於templateの簡單測試
咱們在index.html文檔裏添加一個div

<div id="app1"></div>
<div id="app"></div>

在App.vue中修改一下模板的內容：

<template>
  <div class="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

而後在main.js再加一個渲染

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

new Vue({
  el: '#app1',
  template: '<App/>',
  components: { App }
})

渲染出來的結果就是：

兩個class是app的div。也就很好說明了它的替換~
還能夠思考，咱們在其餘的.vue文件中，直接在template標籤中寫組件的名字做爲標籤就能夠引用到組件，可是在main.js中，咱們要用template:'<App/>'去替換，缺乏這句就會失敗，也能夠猜測由於咱們也不能在js裏面直接寫上結構代碼。

Vueの初體驗細節

關於ESLint
剛開始隨便修改了幾個代碼，結果git上頻繁的報錯，一看錯誤內容居然是說空格多了，沒有空行之類的格式問題，後來才發現，原來是開啓了一個格式檢測的依賴。

就是在初始化項目的時候，問你

Use ESLint to lint your code?(Y/n)

由於我是初學怕出錯，因此固然都默認寫了yesQAQ，度娘一下就知道：

ESLint是一個用來識別 ECMAScript 而且按照規則給出報告的代碼檢測工具,使用它能夠避免低級錯誤和統一代碼的風格

因此不須要的話，要記得輸入n。