Vue 2.0 一文教程
基礎特性
漸進式開發
可以 單HTML頁面 使用Vue,也可以整個專案使用Vue
生命週期
- beforeCreate 例項開始初始化時同步呼叫,資料觀測和事件尚未初始化
- created 例項建立之後呼叫,完成資料繫結,事件方法。Document尚未掛載
- beforeMount 在Document掛載之前執行
- mounted 編譯結束時呼叫。指令已生效,資料變化已能觸發DOM更新 (不保證$el已經插入文件)
- beforeUpdate 再次更新例項時會呼叫,此時DOM尚未更新
- Updated 再次更新例項並更新完DOM後呼叫
- beforeDestroy 開始銷燬例項時呼叫,此刻例項仍有效
- destroyed 例項被銷燬之後呼叫
資料繫結
文字插值
最基礎的形式,使用 雙大括號{{}} (源自Mustache語法)
<span>Hello {{name}}</span>
插值也可以應用在HTML屬性中
<div id='id_{{blogId}}'></div>
// 2.0 寫法
<div v-bind:id='"id_"+blogId'/>
<div :id='"id_"+blogId'/>
過濾器
過濾器可以用在兩個地方:雙花括號插值 和 v-bind 表示式 (後者從 2.1.0+ 開始支援)。過濾器應該被新增在 JavaScript 表示式的尾部,由“管道”符號指示
<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
計算屬性
類比Java的 Getter 和 Setter ,先將資料進行處理。
var vm = new Vue({
el:'#app',
data:{
firstName:'NEW',
lastName:'CIH'
},
computed:{
fullName:function (){
return this.firstName + ' ' + this.lastName
}
}
})
該用例即為 單頁面使用Vue 的用法
表單控制元件
Vue提供 v-model 指令對錶單元素進行雙向繫結,修改表單元素同時,例項中的對應屬性值也會同時更新。
- Text
<input type="text" v-model="email"/>
<span>Your input is {{email}}</span>
- Radio
<input type="radio" value="male" v-model="gender">男
<input type="radio" value="famale" v-model="gender">女
<span>選擇的性別是 {{gender}}</span>
- CheckBox
<input type="checkbox" value="1" v-model="multiChecked">1
<input type="checkbox" value="2" v-model="multiChecked">2
<input type="checkbox" value="3" v-model="multiChecked">3
<input type="checkbox" value="4" v-model="multiChecked">4
<span>你選擇了 {{multiChecked.join('|')}} </span>
- Select
<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>你選擇了 {{selected}} </span>
Class及Style繫結
<div class="tab" v-bind:class="{'active':active}"></div>
// Vue例項中必須有
data:{
active:false
}
指令
內建指令
- v-bind 動態繫結DOM元素屬性
- v-model 繫結表單控制元件
- v-if 及 v-else 根據條件展示對應的模板內容
<div v-if="yes"> yes </div>
<div v-else> no </div>
- v-show 功能同v-if,
v-if 與 v-show 的區別:v-if在條件為false的情況下並不進行模板的編譯,而v-show則會在模板編譯好之後將元素隱藏掉。v-if的切換消耗比v-show高,但初始條件為false的情況下,v-if的初始渲染要稍快
- v-for
<ul>
<li v-for=item in items">
<h1> {{item.title}} </h1>
</li>
</ul>
- v-on 事件繫結
<button v-on:click='popLoginDialog'></button>
// 簡寫
<button @click='popLoginDialog'></button>
v-text 更新元素的文字值
v-HTML 用於更新元素的innerHTML,接受的字串不會進行編譯操作,按普通HTML處理。
<div v-HTML="blogContent"></div>
- v-el 在DOM元素註冊一個索引,使得可以直接訪問DOM元素。(通過$els屬性呼叫)
<div v-el:blog-content> there is a blog el </div>
// 獲取文字,vm即為該例項名
vm.$els.blogContent.innerText
由於HTML不區分大小寫,在v-el如果使用了駝峰命名,系統會自動轉換成小寫。但可以使用 - 來連線期望大寫的字母
- v-ref 功能同 v-el,作用於子元件上。(通過$refs訪問)
- v-pre 跳過編譯該元素
- v-cloak 可以隱藏未編譯的Mustache標籤直到例項準備完畢 (解決閃現問題)
<div v-cloak> {{message}} </div>
官方推薦搭配如下 CSS 屬性一起使用
[v-cloak]{
display:none
}
- v-once 標明元素或元件只渲染一次。(即使隨後發生繫結資料的變化或更新,該元素或元件及包含的子元素都不會被編譯和渲染)
自定義指令
通過 Vue.directive(id, definition) 可以註冊一個全域性指令
元件
元件選項與Vue選項的區別
在Vue中,屬性的賦值是直接賦值
var vm = new Vue({
el : '#app',
data : {
name : 'newcih'
}
})
而在元件中需要定義
var MyComponent = Vue.extend({
data : function() {
return {
name : 'newcih'
}
}
})
因為自定義元件可能擁有多個例項,如果直接將物件data傳遞給Vue.extend({}),那所有使用中的元件例項都會共享該data物件,所以需要通過函式返回一個新物件
元件Props
選項Props是元件中非常重要的一個選項。元件例項的作用域是孤立的,子元件的模板和模組中是無法直接呼叫父元件的資料,所以通過Props將父元件的資料傳遞給子元件
Vue.component('my-child', {
props : ['parentContent'],
template : '<span> {{parentContent}} is from parent </span>'
})
<my-child parent-Content="This data"></my-child>
同指令,註冊元件的Props也要注意駝峰命名的轉換,即通過 - 連線字母來達到大寫字母的目的
一個完整的元件程式碼
檔名 components/Test.vue
<template>
<!-- 存放模板程式碼 -->
<div v-if="isLogin">
Welcome, {{name}}
<button @click="login">登入</button>
</div>
</template>
<script>
export default {
// 存放資料
data () {
return {
name : 'newcih'
}
},
// 生命週期函式
created : function () {
// 方法呼叫
},
// 計算屬性
computed : {
isLogin () {
return true
}
},
// 監聽函式
watch : {
'name' (newValue, oldValue) {
// 變數name的值變化時觸發
}
},
// 事件及自定義函式
methods : {
login : function () {
}
}
}
</script>
<style scoped>
<!-- 存放css程式碼 -->
</style>
狀態管理
Vuex是狀態管理模式的一種實現庫,主要以外掛的形式和Vue.js進行配合使用,能夠使我們在Vue.js中管理複雜的元件事件流。
在一些大型應用中,有時會遇到單頁面應用包含著大量的元件及複雜的資料結構,而且可能各種元件還會相互影響各自的狀態,在這種情況下元件樹中的事件流會很快變得非常複雜,也使除錯變得困難。為了解決這種情況,我們往往引入 狀態管理 這種設計模式。
- Store 倉庫,用於儲存整個應用所需要的資訊
- State 狀態,Store中的資料
- Mutations 變更,更新Store的介面
一個完整的狀態管理實現
檔名 vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isLogin: true
},
mutations: {
UPDATE_LOGIN_STATE (state, loginState) {
state.isLogin = loginState
}
},
getters: {
getLoginState: state => {
return state.isLogin
}
}
})
觸發 mutations 的方式可以為
this.$store.commit('UPDATE_LOGIN_STATE', true)
獲取 state 資料的方式可以為
return this.$store.getters.getLoginState
獲取 State 資料推薦在計算屬性中獲取,即放置到 computed 中執行
開發實踐
專案結構
- my-project
- build 存放webpack相關配置和指令碼
- config 存放配置檔案,用於區分開發環境,測試環境,線上環境的不同
- src 專案原始碼及需要引用的資原始檔
- assets
- components
- App.vue
- main.js
- static 不需要webpack處理的靜態資源
- test 用於存放測試檔案
- .babelirc
- .editorconfig
- .eslintignore
- .eslintrc.js
- .gitignore
- index.html 專案入口,嵌入了App.vue元件
- package.json
- README.md
配置代理伺服器
設定 config/index.js 檔案中的屬性如下
// proxyTable中新增'/api'表明 : 介面'/api'開頭的才使用代理,其它的如靜態資源則使用本地檔案
proxyTable : {
'/api' : {
target : 'http://my.service.com',
changeOrigin : true,
pathRewrite : {
'^/api' : '/api'
}
}
}
// pathRewrite表明 : 將前端的介面代理URL中開頭的 **/api** 替換為 **/api**,如果後臺服務提供的介面並沒有 **/api** 等字首,則可以寫為如下
pathRewrite : {
'^/api' : ''
// 或者是
'^/api' : '/'
}
使用Axios傳送請求
Axios是Vue 2.0後作者推薦的,不再維護vue-resource。Axios的使用手冊可 點選檢視
基本使用如下
// 傳送Get請求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 傳送Post請求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Axios的Post請求預設傳送的是 JSON 格式的資料,如果後臺使用SpringMVC搭建,則可以使用註解 @RequestBody 接受引數
外掛
開發外掛
開發的外掛必須提供 install 方法,第一個引數是 Vue構造器,第二個引數是可選的選項物件。一個例子如下
require('es6-promise').polyfill()
import axios from 'axios'
import {Promise} from '[email protected]@es6-promise'
export const Axios = axios.create({
baseURL: '',
timeout: 5000
})
// POST傳參序列化(新增請求攔截器,即localStorage如果有token欄位,則帶上該欄位到請求頭的authentication欄位)
Axios.interceptors.request.use(config => {
if (localStorage.token) {
config.headers.authentication = localStorage.token
}
return config
}, error => {
return Promise.reject(error)
})
export default {
install (Vue) {
Object.defineProperty(Vue.prototype, '$http', {value: Axios})
}
}
額外專題:關於 Promise
Promise是抽象非同步處理物件以及對其進行各種操作的元件。在使用Promise進行一步處理的時候,我們必須按照介面規定的方法編寫處理程式碼,而不會像回撥函式那樣可以自己自由的定義回撥函式的引數,而必須遵守統一的程式設計方式來編寫程式碼。Promise的功能是可以將複雜的非同步處理輕鬆地進行模式化。
建構函式
var promise = new Promise(function(resolve, reject) {
// 非同步處理
// 處理結束後,呼叫resolve或reject
}
靜態方法
- Promise.reject() 返回一個使用接受到的值進行reject的新的promise物件
- Promise.resolove() 具有 .then 方法的物件。
使用Promise
- 建立promise物件
- new Promise(fn) 返回一個promise物件
- 在 fn 中指定非同步處理
- 處理結果正常,呼叫 resolve(處理結果值)
- 處理結果錯誤,呼叫 reject(Error物件)
- 建立XHR的promise物件
function getURL(URL) {
return new Promise(function(resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', URL, true);
req.onload = function() {
if (req.status == 200) {
resolve(req.responseText);
} else {
reject(new Error(req.statusText));
}
};
req.onerror = function() {
reject(new Error(req.statusText));
};
req.send();
});
}
// 執行示例
var URL = "http://httpbin.org/get";
getURL(URL).then(function onFulfilled(value) {
console.log(value);
}).catch(function onRejected(error) {
console.error(error);
});
使用外掛
通過全域性方法 Vue.use() 使用外掛
// 呼叫 NewPlugin.install(Vue)
Vue.use(NewPlugin)
// 或是傳入選項物件
Vue.use(NewPlugin, {someOption : true})
Vue.js 官方提供的一些外掛 (例如 vue-router) 在檢測到 Vue 是可訪問的全域性變數時會自動呼叫 Vue.use()。然而在例如 CommonJS 的模組環境中,你應該始終顯式地呼叫 Vue.use():
// 用 Browserify 或 webpack 提供的 CommonJS 模組環境時
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了呼叫此方法
Vue.use(VueRouter)
Vue的外掛庫,點選進入
實踐視訊
後續釋出
相關推薦
Vue 2.0 一文教程
基礎特性 漸進式開發 可以 單HTML頁面 使用Vue,也可以整個專案使用Vue 生命週期 beforeCreate 例項開始初始化時同步呼叫,資料觀測和事件尚未初始化 created 例項建立之後呼叫,完成資料繫結,事件方法。D
『王霸之路』從0.1到2.0一文看盡TensorFlow奮鬥史
0 序篇 2015年11月,Google正式釋出了Tensorflow的白皮書並開源TensorFlow 0.1 版本。 2017年02月,Tensorflow正式釋出了1.0.0版本,同時也標誌著穩定版的誕生。 2019年10月,TensorFlo
vue.js 2.0 官方文檔學習筆記 —— 01. vue 介紹
lan fun 數據 特性 sem https 代碼 guide pos 這是我的vue.js 2.0的學習筆記,采取了將官方文檔中的代碼集中到一個文件的形式。目的是保存下來,方便自己查閱。 !官方文檔:https://cn.vuejs.org/v2/guide/ 01.
Vue 2.0 的路由如何從一個單文件組件啟動?
ima ash pre info vue ren pos lod clas import Vue from ‘vue‘; import App from ‘./app.vue‘; import router from ‘./router‘; var app = new
從HTTP/0.9到HTTP/2:一文讀懂HTTP協議的歷史演變和設計思路
eight 結果 key 視頻 this sso單點登陸 會有 研究 patch 本文原作者阮一峰,作者博客:ruanyifeng.com。 1、引言 HTTP 協議是最重要的互聯網基礎協議之一,它從最初的僅為瀏覽網頁的目的進化到現在,已經是短連接通信的事實工業標準,最新版
vue 2.0 實戰 移動音樂app(一)專案準備工作 別名踩坑
1.package.json中新增依賴,"dependencies","devDependencies" "dependencies": { "babel-runtime": "^6.0.0", "vue": "^2.5.2", "vue-rout
Vue 2.0 學習筆記一 基於webpack模板建立專案
vuejs 框架需要基於nodejs自帶的npm下載 所以電腦先安裝nodejs 地址:https://nodejs.org/en/download/ 1全域性安裝腳手架 npm install --global vue-
Orleans 2.0官方文件(閆輝的個人翻譯)——2.1 入門教程1:Orleans基礎
教程1—— 建立一個極小的Orleans應用程式 本教程提供了有關建立基本功能的Orleans應用程式的分步說明。它被設計為自包含且極盡簡約,具有以下特徵: 它僅依賴於NuGet包 它已在使用Orleans 2.2.0的Visual Studio 2017中進行了測試
spring boot 2.0 官方文件 (一)
原文來自:https://docs.spring.io/spring-boot/docs/2.0.0.RELEASE/reference/htmlsingle/技術與英文都是渣渣的翻譯學習:如有錯誤,請大神們指正。原文作者, , , , , , , , , , , , 版本:
vue.2.0-自定義全局組件
new turn welcome 文件夾 微軟 ont return con def App.vue <template> <div id="app"> <h3>welcome vue-loading</h3>
初識vue 2.0(2):路由與組件
組件化 script -128 watch css image 暫時 效果 默認 1,在上一篇的創建工程中,使用的的模版 webpack-simple 只是創建了一個簡單的demo,並沒有組件和路由功能,此次采用了webpack模版,自動生成組件和路由。^_^ 在模版初始
Apache Spark 2.2.0 中文文檔 - SparkR (R on Spark) | ApacheCN
機器學習 matrix ren mes 網頁 eve growth ear 統計 SparkR (R on Spark) 概述 SparkDataFrame 啟動: SparkSession 從 RStudio 來啟動 創建 SparkDataFrames 從本地
CL0940-全網稀缺Vue 2.0高級實戰 獨立開發專屬音樂WebAPP
express 語法 新一代 2.x 個人 就是 ref 基礎 復用 CL0940-全網稀缺Vue 2.0高級實戰 獨立開發專屬音樂WebAPP 學習要趁早,點滴記錄,學習就是進步! 隨筆背景:在很多時候,很多入門不久的朋友都會問我:我是從其他語言轉到程序開發的,有沒有一些
vue 2.0 路由切換以及組件緩存源代碼重點難點分析
基於 代碼實現 而是 答案 html fine 傳遞參數 並且 等等 關於vue 2.0源代碼分析,已經有不少文檔分析功能代碼段比如watcher,history,vnode等,但沒有一個是分析重點難點的,沒有一個是分析大命題的,比如執行router.push之後到底是如何
Spring Boot 2.0(一):【重磅】Spring Boot 2.0權威發布
Spring Boot就在昨天Spring Boot2.0.0.RELEASE正式發布,今天早上在發布Spring Boot2.0的時候還出現一個小插曲,將Spring Boot2.0同步到Maven倉庫的時候出現了錯誤,然後Spring Boot官方又趕緊把 GitHub 上發布的 v2.0.0.RELEA
Spring Boot 2.0.1 入門教程
代碼生成 -i Coding fig IT code location sta -a 簡介 Spring Boot是Spring提供的一套基礎配置環境,可以用來快速開發生產環境級別的產品。尤其適合開發微服務架構,省去了不少配置麻煩。比如用到Spring MVC時,只需把sp
Vue 2.0 隨記
lis info col pan 百度翻譯 技術分享 clas opened view 1、watch 中,immediate的用法: immediate -->百度翻譯 立即的 new Vue({ el: ‘#app-7‘,
Django 2.0官方文檔中文 渣翻 總索引(個人學習,歡迎指正)
裝飾 csr porting other 步驟 exe 擴展 生產 blank Django 2.0官方文檔中文 渣翻 總索引(個人學習,歡迎指正) 置頂 2017年12月08日 11:19:11 閱讀數:20277 官方原文: https://docs.dja
Vue 2.0的學習筆記:Vue的過濾器
保持 computed title 添加 處理 顏色 一個 神奇 bubuko 轉自: https://www.w3cplus.com/vue/how-to-create-filters-in-vuejs.html 過濾器的介紹 1、在Vue中使用過濾器(Filters)
Vue: axios 請求封裝及設置默認域名前綴 (for Vue 2.0)
找到 檢查 evel require login word -- const 步驟 1. 實現效果 以get方法向http://192.168.32.12:8080/users 發起請求、獲取數據並進行處理 this.apiGet(‘/users‘, {}) .the