VUE筆記

• 建立項目
• 安裝npm

npm實際上是Node.js的包管理工具（package manager）。npm能夠根據依賴關係，把全部依賴的包都下載下來並管理起來。不然，靠咱們本身手動管理，確定既麻煩又容易出錯。要安裝npm只需安裝node.js便可，經過node.js官網（https://nodejs.org/en/）下載node.js，按步驟安裝便可，在Windows上安裝時務必選擇所有組件，包括勾選Add to Path。安裝完成後，請打開命令提示符，而後輸入node -v，若是安裝正常有版本信息輸出表明安裝完成，此時能夠輸入npm -v 檢測npm是否安裝成功，若是安裝成功，則會有npm版本信息。

• 安裝cnpm

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

• 安裝VUE

npm install -g vue-cli

• 初始化項目

vue init webpack demo / vue init webpack-simple demo（完整的/簡化的）

• 下載依賴

cd demo(項目目錄)

cnpm install（下載依賴）

• 運行項目

npm run dev

• Vue-resource使用（https://github.com/pagekit/vue-resource#cdn）
• 安裝：在項目根目錄中執行如下命令（必須添加--save   這樣依賴才能加入到package.json中）

cnpm install vue-resource --save

• 導入到mian.js

<script>

  import VueResource from 'vue-resource';

  Vue.use(VueResource);

</script>

• 使用

var api = api;

this.$http.get(api).then((response)=>{

  console.log(response);

  var list = response.body.data;

  this.list = list;

},response=>{

  console.log(err);

})

• axios使用(https://github.com/axios/axios)
• 安裝：在項目根目錄中執行如下命令（必須添加--save   這樣依賴才能加入到package.json中）

cnpm install axios  --save

• 引入：哪裏用哪裏引入（在哪一個文件中使用就在哪一個文件中引入）

<script>

  import Axios from 'axios';

</script>

• 使用

Axios.get(api).then((response)=>{

  console.log(response);
 
  var list = response.data.data;

  this.list = list;

}).catch((err)=>{

  console.log(err);

})

• 引入組件
• 首先建立一個組件頁面
• 在須要引入的頁面引入組件

import Home from '組件的相對路徑';

• 在components註冊組件

components:{

  'v-home':Home,  //v-home 爲自定義標籤

}

• 在頁面中須要使用組件的地方引用自定義標籤

<v-home></v-home>

• 父組件給子組件傳值
• 在調用子組件標籤中綁定屬性

<!--父組件給子組件傳值：在調用子組件標籤中綁定自定義屬性title並賦值title  如果方法  不要加()-->

<v-header :title="title" :run="run"></v-header>

• 接收父組件的傳值

props:['title','run']//接收父組件傳過來的值 props是一個數組

• 使用父組件傳過來的值

<div>我是頭部組件--{{title}}</div>//這裏的title就是props中接收的值
<button @click="run()">子組件執行父組件run方法</button>

• 父組件主動獲取子組件數據和方法
• 在home組件引用子組件的時候定義ref

<v-header ref="header"></v-header> //header 至關於給子組件給一個id

• 在須要用到子組件方法或屬性的時候進行調用

this.$refs.header.msg   //獲取子組件中msg屬性

this.$refs.header.run();  //執行子組件中的run()方法

• 子組件主動獲取父組件數據和方法
• 在子組件中須要用到父組件屬性或方法的地方直接調用

this.$parent.msg   //獲取父組件中msg屬性

this.$parent.run();  //執行父組件中的run()方法

• 非父子組件傳值

• 新建一個空的vue實例

import Vue from 'vue'

var VueEvent = new Vue();

• 將新建的Vue實例暴露出去

export default VueEvent;

• 廣播數據

//在須要傳值的頁面引入vue實例
import VueEvent from "新建空的Vue實例.js文件的相對路徑"
//VueEvent爲新建的Vue實例 to-news 爲該廣播數據的key  this.msg爲要廣播的數據
VueEvent.$emit("to-news",this.msg)

• 接收廣播數據

//在須要接收廣播數據的頁面引入新建的Vue實例
import VueEvent from "新建空的Vue實例.js文件的相對路徑"
//監聽廣播數據
mounted(){
  //to-news爲廣播數據時的key
  VueEvent.$on("to-news",data=>{
     console.log(data);
  })
}

• Vue路由
• 介紹

    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：

• 嵌套的路由/視圖表
• 模塊化的、基於組件的路由配置
• 路由參數、查詢、通配符
• 基於 Vue.js 過渡系統的視圖過渡效果
• 細粒度的導航控制
• 帶有自動激活的 CSS class 的連接
• HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行爲
• 安裝

npm install vue-router --save  /  cnpm install vue-router --save

• 在main.js中引入並Vue.use(VueRouter)

import VueRouter from 'vue-router'

Vue.use(VueRouter)

• 配置路由

1. 建立組件，引入組件

//引入組件
import News from "組件1的相對路徑";
import Home from "組件2的相對路徑";

     2. 定義路由

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '*', component: Bar } //默認頁面
]

   在這裏，也能夠爲路由命名，例如：

const routes = [
  { path: '/foo', component: Foo,name:'Foo' },
  { path: '/bar', component: Bar,name:'Bar' }
]

     3. 實例化VueRouter

const router = new VueRouter({
  routes // (縮寫) 至關於 routes: routes
})

    4. 建立和掛載根實例

const app = new Vue({
  router
}).$mount('#app')

     5. 使用router-link組件導航

<router-link to="/foo">Go to Foo</router-link>
 <router-link to="/bar">Go to Bar</router-link>

    若是是已命名路由，也能夠寫成：

<router-link to="{name:'Foo'}">Go to Foo</router-link>
 <router-link to="{name:'Bar'}">Go to Bar</router-link>

   若是要帶參數形式以下：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

    這種形式下，目的地地址至關於： 

/user/123

    6. 渲染路由匹配到的組件

<router-view></router-view>

• Vue動態路由
• 使用場景

1.  把某種模式匹配到的全部路由，全都映射到同個組件
2. 傳遞參數

• 配置方法

在配置路由時，path參數動態變化部分用":參數名"代替，當匹配到一個路由時，參數值會被設置到 this.$route.params，能夠在每一個組件內使用。舉例以下：

模式	匹配路徑	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: '123' }

  3. 對於普通的路由，可使用get傳值

模式	匹配路徑	$route.params.qurey
/user?id=123	/user	{ id: '123' }

• 編程式導航（經過js跳轉）

除了使用 <router-link> 建立 a 標籤來定義導航連接，咱們還能夠藉助 router 的實例方法，經過編寫代碼來實現。

• router.push(location, onComplete?, onAbort?)

想要導航到不一樣的 URL，則使用 this.$router.push() 方法。這個方法會向 history 棧添加一個新的記錄，因此，當用戶點擊瀏覽器後退按鈕時，則回到以前的 URL

相比：

聲明式	編程式
<router-link :to="...">	this.$router.push(...)

 該方法的參數能夠是一個字符串路徑，或者一個描述地址的對象。例如：

// 字符串  
router.push('home') // 跳轉到/home

// 對象   home是配置路由時配置的組件路徑 // 跳轉到/home
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }}) // 跳轉到/user/123

// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }}) //跳轉到 /register?plan=private

注意：若是提供了 path，params 會被忽略，上述例子中的 query 並不屬於這種狀況。取而代之的是下面例子的作法，你須要提供路由的 name 或手寫完整的帶有參數的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這裏的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

一樣的規則也適用於 router-link 組件的 to 屬性。

在 2.2.0+，可選的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回調做爲第二個和第三個參數。這些回調將會在導航成功完成 (在全部的異步鉤子被解析以後) 或終止 (導航到相同的路由、或在當前導航完成以前導航到另外一個不一樣的路由) 的時候進行相應的調用。

注意： 若是目的地和當前路由相同，只有參數發生了改變 (好比從一個用戶資料到另外一個 /users/1 -> /users/2)，你須要使用 beforeRouteUpdate 來響應這個變化 (好比抓取用戶信息)。

• router.replace(location, onComplete?, onAbort?)

跟 this,$router.push() 很像，惟一的不一樣就是，它不會向 history 添加新記錄，而是跟它的方法名同樣 —— 替換掉當前的 history 記錄。

聲明式	編程式
<router-link :to="..." replace>	router.replace(...)

• router.go(n)

這個方法的參數是一個整數，意思是在 history 記錄中向前或者後退多少步，相似 window.history.go(n)。

例子

// 在瀏覽器記錄中前進一步，等同於 history.forward()
router.go(1)

// 後退一步記錄，等同於 history.back()
router.go(-1)

// 前進 3 步記錄
router.go(3)

// 若是 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)