Vue.js 2.0 學習重點記錄

Vue.js兼容性

Vue.js.js 不支持 IE8 及其以下版本，因為 Vue.js.js 使用了 IE8 不能模擬的 ECMAScript 5 特性。 Vue.js.js 支持所有兼容 ECMAScript 5 的瀏覽器。

Vue.js安裝

安裝方式有兩種：

1、直接下載用script標簽引入（推薦引入開發版本，壓縮版本會失去錯誤提示和警告）

2、使用cdn方法引入

3、npm安裝

   npm安裝的前提需要安裝了nodejs，這里推薦nvm安裝nodejs

   附上一小段nvm使用的命令：

$ nvm install v6.10.2
   $ nvm list 
    * 6.10.2 (Currently using 64-bit executable)
   $ nvm use 6.10.2
   Now using node v6.10.2 (64-bit)
   $ node -v
   v6.10.2
   $ npm -v   3.10.10
  
   $ npm install Vue.js
   或者：
   $ cnpm install bower
   $ bower install Vue.js

   注意：可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

這樣就可以使用 cnpm 命令來安裝Vue.js等模塊了：

$ cnpm install vue

Vue.js腳手架安裝

  port可以改成我們指定的端口，這里不僅可以改變端口，還可以根據需要改變其他配置信息。

# 全局安裝 Vue.js-cli
$ npm install --global Vue.js-cli
# 創建一個基于 webpack 模板的新項目
$ Vue.js init webpack my-project
# 切換到項目目錄，安裝依賴
# 下面出現的所有提示 直接回車則選擇默認選項或者yes
$ cd my-project
$ npm install# 運行該項目
$ npm run dev
DONE  Compiled successfully in 4388ms> Listening at http://localhost:8080* 這里默認8080端口，如果想要更改指定端口，找到根目錄下config文件夾---index.js
dev: {  
  env: require('./dev.env'),  
  port: 8080,  
  autoOpenBrowser: true,  
  assetsSubDirectory: 'static',  
  assetsPublicPath: '/',  
  proxyTable: {},  
  cssSourceMap: false  }

建好Vue.js項目之后，想要再次localhost:8080下運行起來，在cmd命令框，進入項目根目錄文件夾路徑下，然后

npm run dev,則他會運行dev-sever.js文件，之后運行成功，頁面自動打開。

Vue.js起步

var app1=new Vue.js({
            el:"#app1",
            data:{
                message:"hahahha"+new Date()
            }
        });

Vue.js 實例化代碼可以直接寫new Vue.js，也可以賦個值，當實例化的Vue.js賦值給一個變量之后，在控制臺可以直接通過改app1.message等代碼，在瀏覽器可以直接看到頁面效果。

<div id="app3">
        <ol>
            <li v-for="todo in todos">`todo`.`text`</li>
        </ol>
</div>

var app3 = new Vue.js({
           el:"#app3",
           data:{
                todos:[
                    {text:"aaa"},
                    {text:"bbb"},
                    {text:"ccc"},
                    {text:"ddd"}
                ]
           }
        });

  **這里注意：循環的列表項是加載列表標簽li標簽上的，不是列表盒子上，在控制臺輸入

  app3.todos.push({text:"eee"});  //5

  app3.todos.push({text:"fff"}); //6

  頁面中會直接顯示push進來的列表項，控制臺打印出數組的長度

var app4 = new Vue.js({
           el:"#app4",
           data:{
               message:"我要逆轉了"
           },
            methods:{
                reverseMsg:function () {
                    this.message=this.message.split("").reverse().join("");
                }
            }
        });

**這里注意：methods方法要加s，否則報錯：

父組件向子組件傳遞數據，使子組件接受一個屬性：

<div id="app6">
        <ol>
            <hello v-for="item in fruits" :todo="item"></hello>
        </ol>
</div>

//定義新組件

        Vue.js.component('hello,{
            props:['todo'],
            template:"<div>`todo`.`text`</div>"
        });
        var app6 = new Vue.js({
            el:"#app6",
            data:{
                fruits:[
                    {text:"apple"},
                    {text:"apple2"},
                    {text:"apple3"},
                    {text:"apple4"}
                ]
            }
        })

**關鍵點：使用 v-bind 指令將屬性傳到每一個重復的組件中，繽紛切讓它等于遍歷出來的元素。

Vue.js腳手架使用

webstorm eslint配置：推薦一篇文章：http://blog.csdn.net/whitehack/article/details/52422873

src目錄是我們要開發的目錄：

assets: 放置一些圖片，如logo等。

components: 目錄里面放了一個組件文件，可以不用。

App.vue.js: 項目入口文件，我們也可以直接將組建寫這里，而不使用 components 目錄。

main.js: 項目的核心文件。

**使用要點：在App.Vue.js中導入components組件文件夾下寫好的組件，在模板里使用組件，導出默認，導出的名字為模板最外層元素的id或者class名稱，components寫組件名稱；單獨的組件寫好后也要記得導出默認，導出的名字為模板最外層元素的id或者class名稱。[這些都遵循了ES6語法格式]

<script>
// 導入組件
import Hello from './components/Hello'
 
export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

**在我第一次使用時eslint報錯：

錯誤1：導入的地址必須使用單引號

錯誤2：在從導出時components屬性冒號之后要加空格，再寫大括號

錯誤3：components屬性下寫組件名稱，應該縮進4個空格

錯誤4：在Apple.vue中多寫了個s[個人不細心，此類錯誤盡量避免]

當這些錯誤都修改完成之后，頁面正常顯示出來了：[eslint檢查比較嚴格，如果想要關閉可以自行百度]

Vue.js具體使用

Vue.js 條件

v-if、v-else-if、v-else

條件語句的作用：通過判斷不同的條件，顯示不同的區塊，類似php條件語句的用法，同樣可以嵌套v-else-if（2.1.0新增）。

v-show

控制顯示隱藏，不支持<template>語法,也不支持 v-else。

Vue.js循環

用法類似for in循環，所以指令為v-for，(這里切記循環列表項寫在循環的單個項目元素上)，支持template模版使用。

用法三種：

item in items

(value, key) in object

(value, key, index) in object

這里有一個特殊的用法：

可以迭代整數：

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}    
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app'
})
</script>

輸出：

如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。

Vue.js 計算屬性（對比angular和react的優點之一）

computed vs methods

我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基于它的依賴緩存，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。

可以說使用 computed 性能會更好，但是如果你不希望緩存，你可以使用 methods 屬性。

computed 默認有getter方法，可以自己定義一個setter方法

Vue.js 樣式綁定

v-bind: 可以綁定如下幾種：

對象語法

數組語法

Vue.js class綁定：v-bind：class=”{ }”

Vue.js style(內聯樣式): v-bind:style=”{ }”

示例：

<div id="app12">
        <div v-bind:class="[isActive?active:'',errorClass]">我綁定了不同的class</div>
        <div v-bind:class="{active:isActive,errorClass:hasError}">我綁定了不同的class</div>
        <div v-bind:class="classObject">我綁定了不同的class</div>
        <div v-bind:class="{active:isActive}">我綁定了不同的class</div>
</div>

var app12 = new Vue({
            el:"#app12",
            data:{
                active:"active",
                errorClass:"errorClass",
                isActive:true,
                classObject: {                    'active': true,                    'errorClass': true
                },
                hasError:true
            }
        });

**注意：

以上從上到下依次為：

u 數組綁定class,數組綁定的class，數組元素是對象的名稱，在vue data里要寫對象的值即真正的class名才可以

u 多個對象屬性綁定class,

u 直接綁定一個對象綁定class,在vue data里寫對象屬性名的時候，可加引號可不加，但是有中劃線的時候必須加。

u 單個對象屬性綁定class，根據vue中isActive的狀態改變

Vue.js表單控件綁定

v-model 會根據控件類型自動選取正確的方法來更新元素。

綁定 value

對于單選按鈕，勾選框及選擇列表選項， v-model 綁定的 value 通常是靜態字符串（對于勾選框是邏輯值）：

<!-- 當選中時，`picked` 為字符串 "a" ，單選按鈕-->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 為 true 或 false ，多選框-->
<input type="checkbox" v-model="toggle">
<!-- 當選中時，`selected` 為字符串 "abc"，select選擇框 -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但是有時我們想綁定 value 到 Vue 實例的一個動態屬性上，這時可以用 v-bind 實現，并且這個屬性的值可以不是字符串。

復選框如果是一個則為邏輯值，如果是多個則綁定到同一個數組。

Vue.js組件

以下實例中將 v-bind 指令將 todo 傳到每一個重復的組件中：

Prop 實例

<div id="app">
    <ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
      </ol>
</div>

<script>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
new Vue({
  el: '#app',
  data: {
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})
</script>

注意: prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。

**這里綁定todo屬性是因為父組件不能直接把數據傳到自定義的子組件上，需要綁定一個屬性作為橋梁。

報錯信息

Vue.js2.0 不支持

$index

報錯：

Vue.js.js:569 [Vue.js warn]: Property or method "$index" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

(found in <Root>)