Vue.js 2.0 學習重點記錄

 

Vue.js兼容性

Vue.js.js 不支持 IE8 及其如下版本，由於 Vue.js.js 使用了 IE8 不能模擬的 ECMAScript 5 特性。 Vue.js.js 支持全部兼容 ECMAScript 5 的瀏覽器。

Vue.js安裝

安裝方式有兩種：

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

二、使用cdn方法引入

三、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腳手架安裝

# 全局安裝 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  

}  

  port能夠改爲咱們指定的端口，這裏不只能夠改變端口，還能夠根據須要改變其餘配置信息。

 

 

 

建好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>)