vue學習筆記一

vue.js簡介

概念：構建使用者介面的漸進式框架。

（漸進式：不必一開始就用Vue所有的全家桶，根據場景，官方提供了方便的框架供你使用。）

Vue 的核心庫只關注檢視層。

【引入vue】

可以建立一個 .html 檔案，然後通過如下方式引入 Vue：

<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>複製程式碼

<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>複製程式碼

$ npm install vue複製程式碼

安裝腳手架：

1. cnpm install webpack -g複製程式碼

2. npm install vue -cli -g

3. vue init webpack myproject複製程式碼

4. cd 目錄路徑複製程式碼

5. npm install複製程式碼

6. npm run dev複製程式碼

Project name 【輸入專案名】

Project description 【專案描述】

Use ESlint to lint your code? 【程式碼檢查】

Set up unit tests 【測試】

Setup e2e tests with Nighwatch? 【測試】

在通過npm安裝專案後，我們需要對其目錄進行解析：

（1） Build：專案構建（webpack）相關程式碼;

（2） config：配置目錄，包括埠號等。

（3） node_modules：npm載入的專案依賴模組

（4） src：這個目錄當中的內容包含了我們基本上要做的事情，這裡包含了幾個檔案：

（一）assets：存放圖片

（二）components：存放元件檔案

（三）App.vue：專案入口檔案，元件也可以直接寫在這裡不適用components

（四）main.js：核心檔案

（5） static：靜態資源目錄

（6） test：初始測試目錄

（7） .xxxx：配置檔案，包括git配置和語法配置等

（8） index.html：首頁

（9） package.json：專案配置檔案

（10） README.md：說明文件

相容性：

Vue 不支援 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支援所有相容 ECMAScript 5 的瀏覽器。

【建立vue例項】

var vm = new Vue({
  // 選項
})複製程式碼

【生命週期函式】

1.beforeCreate 建立前執行（data和el都還未初始化） 

 2.create 完成建立 （完成了data資料初始化，el還未初始化） 

 3.beforeMount 載入前（完成了data和el資料初始化） 

 4.mounted 載入後html已經渲染(ajax請求可以放在這個函式中) 

 5.beforeUpdate 更新前狀態（view層的資料變化前，不是data中的資料改變前） 

 6.update 更新狀態後 

 7.beforeDestroy 銷燬前 

 8.destroy 銷燬後 （Dom元素存在，只是不再受vue控制）

模板語法

插值表示式：{{ msg}}

v-html：動態注入標籤，注意：你的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對使用者提供的內容使用插值。

v-bind：動態繫結一個或多個html屬性，繫結時注意屬性前加冒號:disabled/:id

v-if：條件判斷，根據真假判斷條件符合即渲染結果。在切換時元素及它的資料繫結 / 元件被銷燬並重建。

v-else:限制：前一兄弟元素必須有 v-if 或 v-else-if。

v-else-if:前一兄弟元素必須有 v-if 或 v-else-if。

v-on：用來監聽事件，繫結事件 （可縮寫為@click）

阻止預設事件：【v-on:click.prevent="go(index,$event)"】

阻止預設事件冒泡：【v-on:click.stop="go(index,$event)"】

只生效一次：【v-on:click.once="go(index,$event)"】

鍵盤事件監聽：【v-on:keyup.enter="write"】

v-text: 更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

v-show:根據表示式之真假值，切換元素的 display CSS 屬性。

v-for:基於源資料多次渲染元素或模板塊，v-for 指令需要使用 item in items 形式的特殊語法。最好加上:key

v-model:在表單控制元件或者元件上建立雙向繫結。

v-once:只渲染元素和元件一次。

【v-if有更高的切換開銷，v-show有更高的初始渲染開銷，頻繁切換使用v-show,條件很少改變使用v-if】

特殊特性

有相同父元素的子元素必須有獨特的 key。重複的 key 會造成渲染錯誤。

最常見的用例是結合 v-for

計算屬性

computed:{}複製程式碼

有偵聽的效果，寫在計算屬性中的方法可以直接在插值表示式中使用；

繫結class

<div v-bind:class="{ active: isActive }"></div>複製程式碼

上面的語法表示 active 這個 class 存在與否將取決於資料屬性 isActive 的 狀態。

v-bind:class 指令也可以與普通的 class 屬性共存，例如：

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>複製程式碼

全域性API

filter：

Vue.filter('my-filter', function (value) {
  // 返回處理後的值
})

// getter，返回已註冊的過濾器
var myFilter = Vue.filter('my-filter')複製程式碼

例：

data(){

nums:[1,2,3,4,5,6,7],

},

methods:{

   getOdd(){

this.nums.filter(function(num){

    if (num % 2 !==0){

        console.log(num);}})

}}

component：

// 註冊元件，傳入一個擴充套件過的構造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 註冊元件，傳入一個選項物件 (自動呼叫 Vue.extend)
Vue.component('my-component', { /* ... */ })複製程式碼

其他：

watch只能監聽一個物件

computed可以對多個物件進行監聽

安裝配置路由

1 npm install --save vue-router 

2 main.js下：import router from './router',new Vue裡新增router

3 index.js裡：import Router from 'vue-router'

 Vue.use(Router)

4 檢視載入的位置：<router-view></router-view>

5 實現類似選項卡或者錨點連結的功能 用於元件間的跳轉 使用標籤 進行跳轉 

 <router-link to="/words">words</router-link> 

<router-link to="/Navlist/words">words</router-link>複製程式碼

6 在index.js注入的地方加上：redirect:"/test2/test1", 即預設顯示哪個子頁面

7 【路由點選高亮效果】 全域性：

 index.js裡面給全域性新增一個class名，然後全域性都可以使用這個class 在export default new Router裡寫：linkActiveClass: "active", 

然後在想要路由點選高亮的頁面style裡： .active{ color: red; }

懶載入

安裝：cnpm install vue-lazyload --save-dev 

引入在main.js中： import VueLazyload from 'vue-lazyload' 

Vue.use(VueLazyload) 

在要載入的頁面使用標籤： <img v-lazy="imgUrl"/> imgUrl為data中的資料

使用swiper

1 cnpm install --save vue-awesome-swiper

2 main.js裡：

 import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)複製程式碼

使用element

1 npm i element-ui -S

2 main.js裡：

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

引入jQuery

1 npm install jquery --save-dev

2 在build/webpack.base.conf.js中新增如下內容：

var webpack = require('webpack')

3 在src/main.js檔案中 引入jquery或在單頁面中引用

import $ from 'jquery'

4 npm run dev

5 mounted（）裡呼叫