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')

plugins: [

new webpack.ProvidePlugin({

$: "jquery" ,

jQuery: "jquery"

})

],

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

import $ from 'jquery'

4 npm run dev

5 mounted（）裏調用

vue安裝Bootstrap

一、安裝bootstrap，使用命令npm install bootstrap --save-dev

二、在package.json文件中引入bootstrap這個模塊

三、在src/main.js文件中 引入jquery

1 2	import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min'