某課網「vue.js 入門基礎」課程札記

• 它強調了 React 元件化的概念，可以輕鬆的實現資料的展現和分離
• 它也吸收了 Angular 靈活的指令和頁面操作的一些方法

• 實現效果: 可以直接在命令列中使用 vue 命令；
• npm 工具在國內網路環境下很慢,推薦使用 淘寶的 npm 映象；
• 將 cnpm 安裝到系統中：$ npm install -g cnpm --registry=https://registry.npm.taobao.org；
• 安裝 vue-cli：$ cnmp install -global vue-cli

  -global 代表全域性安裝，使用之後便可安裝到系統的node目錄下，繼而使用 vue 命令，不使用則只能在當前目錄使用。

• cd 目錄『你要把專案放在哪個目錄』；
• vue init webpack {project_name}；

  webpack，為專案型別, 使用 webpack 模板, 並且使用 webpack 這個工具進行壓縮和打包

• ? Project name {project_name};
• ? Project description (A Vue.js project) - 「專案描述」
• ? Author - 「專案作者」
• ? Vue build：這裡選擇 Runtime + Compiler: recommended for most users

  > Runtime + Compiler: recommended for most users 
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in

• ? Install vue-router? (Y/n) Yes; - [vue-router]
• ? Use ESLint to lint your code? (Y/n) Yes; - [ESLint是一個語法檢查工具]
• ? Pick an ESLint preset (Use arrow keys)：這裡選擇 Standard (https://github.com/feross/standard)

  > Standard (https://github.com/feross/standard) 
  Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) 

• ? Setup unit tests with Karma + Mocha? (Y/n) No; - [單元測試]
• Setup e2e tests with Nightwatch? (Y/n) No; - [單元測試]
• ? Should we run 'npm install' for you after the project has been created? (recommended) (use arrow keys)： 這裡選擇 Yes, use Npm

  > Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

• cd {project_name}
• npm run dev; - [本地執行專案]

vue.js 元件的重要選項

new Vue({
    data: {
        a: 1,
        b: []
    },
    methods: {
        doSomething: function(){
            // console.log(this.a);
            this.a ++;
        }
    },
    // 監聽
    watch: {
        'a': function(val, oldVal){
            console.log(val, oldVal);
        }
    }
})

2.模板指令 - [html和vue物件的粘合劑]

• 資料渲染: v-text、v-html、{{}} 這三種方式並不等價

  <p>{{ a }}</p>
  <p v-text="a"></p>
  <p v-html="a"></p>

• 控制模組隱藏: v-if、v-show

  v-if直接不渲染這個DOM元素, 而v-show是通過css的display: none來對它進行隱藏

<p v-if="isShow"></p>
<p v-show="isShow"></p>
new Vue({
        data: {
            isShow: true
        }
})

• 渲染迴圈列表: v-for

  <ul>
  <li v-for="item in items">
      <p v-text="item.label"></p>
  </li>
  </ul>
  new Vue({
  data: {
      items: [
          {
              label: 'apple'
          },
          {
              label: 'banana'
          }
      ]
  }
  })

• 事件繫結: v-on

  <button v-on:click="doThis"></button>
  <button @click="doThis"></button>
  new Vue({
      methods: {
          doThis: function(someThing){
  
          }
      }
  })

  (!!! 實踐一下)

• 屬性繫結: v-bind

  <img v-bind:src="imageSrc">
  <div :class="{ red: isRed }"></div>
  <div :class="[classA, classB]"></div>
  <div :class="[classA, { classB: isB, classC: isC }]"></div>

  3.小結

• new 一個 vue 物件的時候你可以設定它的屬性, 其中最重要的包括三個, 分別是 data、methods、watch.
• 其中data 代表 vue 物件的資料、methods 代表 vue 物件的方法、watch 設定了物件監聽的方法
• vue 物件裡的設定通過 html 指令進行關聯

• 重要的指令包括:	指令	釋義
  v-text	渲染資料
  v-if	控制顯示
  v-on	繫結事件
  v-for	迴圈渲染

• 功能模組 - [select, pagenation]
• 頁面區域 - [header, footer, sidebar]

import Header from './header'
import Footer from './footer'
new Vue({
    components: {
        Header, Footer
    }
})
<header></header>
<footer></footer>

// this is header.vue
new Vue({
    props: ['msg'],
})
<!-- this is app.vue -->
<header msg="something interesting"></header>
<footer></footer>

• 賦值: localStorage.setItem('key', 'value')
• 取值: localStorage.getItem('key')