前端之Vue.js庫的使用
vue.js簡介
Vue.js讀音 /vjuː/, 相似於 viewjavascript
Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和關注程度在三大框架中稍微勝出，而且它的熱度還在遞增。css
Vue.js能夠做爲一個js庫來使用，也能夠用它全套的工具來構建系統界面，這些能夠根據項目的須要靈活選擇，因此說，Vue.js是一套構建用戶界面的漸進式框架。html
Vue的核心庫只關注視圖層，Vue的目標是經過儘量簡單的 API 實現響應的數據綁定，在這一點上Vue.js相似於後臺的模板語言。前端
Vue也能夠將界面拆分紅一個個的組件，經過組件來構建界面，而後用自動化工具來生成單頁面(SPA - single page application)系統。vue
Vue.js使用文檔及下載Vue.js
Vue.js使用文檔已經寫的很完備和詳細了，經過如下地址能夠查看：https://cn.vuejs.org/v2/guide/
vue.js若是當成一個庫來使用，能夠經過下面地址下載：https://cn.vuejs.org/v2/guide/installation.htmljava
Vue.js基本概念
首先經過將vue.js做爲一個js庫來使用，來學習vue的一些基本概念，咱們下載了vue.js後，須要在頁面上經過script標籤引入vue.js，開發中可使用開發版本vue.js，產品上線要換成vue.min.js。node
<script type="text/javascript" src="js/vue.min.js"></script>
Vue實例
每一個 Vue 應用都是經過實例化一個新的 Vue對象開始的：python
window.onload = function(){
var vm = new Vue({
el:'#app',
data:{message:'hello world!'}
});
}
......
<div id="app">{{ message }}</div>
其中，el屬性對應一個標籤，當vue對象建立後，這個標籤內的區域就被vue對象接管，在這個區域內就可使用vue對象中定義的屬性和方法。webpack
數據與方法
當一個 Vue 實例被建立時，它向 Vue 的響應式系統中加入了其data對象中能找到的全部的屬性。當這些屬性的值發生改變時，視圖將會產生「響應」，即匹配更新爲新的值。還能夠在Vue實例中定義方法，經過方法來改變實例中data對象中的數據，數據改變了，視圖中的數據也改變。ios
window.onload = function(){
var vm = new Vue({
el:'#app',
data:{message:'hello world!'},
methods:{
fnChangeMsg:function(){
this.message = 'hello Vue.js!';
}
}
});
}
......
<div id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改變數據和視圖</button>
</div>
Vue.js模板語法
模板語法指的是如何將數據放入html中，Vue.js使用了基於 HTML的模板語法，容許開發者聲明式地將DOM綁定至底層 Vue 實例的數據。全部 Vue.js的模板都是合法的 HTML ，因此能被遵循規範的瀏覽器和 HTML 解析器解析。
插入值
數據綁定最多見的形式就是使用「Mustache」語法 (雙大括號) 的文本插值：
<span>Message: {{ msg }}</span>
若是是標籤的屬性要使用值，就不能使用「Mustache」語法，須要寫成使用v-bind指令：
<a v-bind:href="url" v-bind:title='tip'>百度網</a>
插入的值當中還能夠寫表達式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url">連接文字</a>
指令
指令 (Directives) 是帶有「v-」前綴的特殊屬性。指令屬性的值預期是單個JavaScript表達式，指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於DOM。常見的指令有v-bind、v-if、v-on。
<!-- 根據ok的布爾值來插入/移除 <p> 元素 --> <p v-if="ok">是否顯示這一段</p> <!-- 監聽按鈕的click事件來執行fnChangeMsg方法 --> <button v-on:click="fnChangeMsg">按鈕</button>
縮寫
v-bind和v-on事件這兩個指令會常常用，因此有簡寫方式：
<!-- 完整語法 --> <a v-bind:href="url">...</a> <!-- 縮寫 --> <a :href="url">...</a> <!-- 完整語法 --> <button v-on:click="fnChangeMsg">按鈕</button> <!-- 縮寫 --> <button @click="fnChangeMsg">按鈕</button>
計算屬性和偵聽屬性
計算屬性
模板內的表達式很是便利，可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
這個表達式的功能是將message字符串進行反轉，這種帶有複雜邏輯的表達式，咱們可使用計算屬性
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
......
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
偵聽屬性
偵聽屬性的做用是偵聽某屬性值的變化，從而作相應的操做，偵聽屬性是一個對象，它的鍵是要監聽的對象或者變量，值通常是函數,當你偵聽的元素髮生變化時，須要執行的函數，這個函數有兩個形參，第一個是當前值，第二個是變化後的值。
indow.onload = function(){
var vm = new Vue({
el:'#app',
data:{
iNum:1
},
watch:{
iNum:function(newval,oldval){
console.log(newval + ' | ' + oldval)
}
},
methods:{
fnAdd:function(){
this.iNum += 1;
}
}
});
}
Class 與 Style 綁定
使用v-bind指令來設置元素的class屬性或者sytle屬性，它們的屬性值能夠是表達式，vue.js在這一塊作了加強，表達式結果除了是字符串以外，還能夠是對象或者數組。
Class綁定
對象語法
能夠給v-bind:class傳一個對象，以動態的切換class
<div class="static" v-bind:class="{active:isActive,'text-danger':hasError }"></div>
data屬性值以下：
data: {
isActive: true,
hasError: false
}
最終渲染的效果：
<div class="static active"></div>
也能夠給v-bind:class傳一個對象引用
<div v-bind:class="classObject"></div>
data屬性值能夠寫成：
data: {
classObject: {
active: true,
'text-danger': false
}
}
數組語法
能夠給v-bind:class傳一個數組，以應用一個 class 列表
<div v-bind:class="[activeClass, errorClass]"></div>
......
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
最終渲染爲：
<div class="active text-danger"></div>
若是你也想根據條件切換列表中的 class，能夠用三元表達式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
不過，當有多個條件class時這樣寫有些繁瑣。因此在數組語法中也可使用對象語法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
style綁定
對象語法
v-bind:style 的對象語法十分直觀——看着很是像 CSS，但實際上是一個JavaScript 對象。CSS 屬性名能夠用駝峯式 (camelCase) 來命名：
<div v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
data數據以下：
data: {
activeColor: 'red',
fontSize: 30
}
也能夠給v-bind:style傳一個對象引用
<div v-bind:style="styleObject"></div>
data數據以下：
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
數組語法
v-bind:style 的數組語法能夠將多個樣式對象應用到同一個元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
條件渲染
經過條件指令能夠控制元素的建立(顯示)或者銷燬(隱藏)，經常使用的條件指令以下：
v-if
v-if能夠控制元素的建立或者銷燬
<h1 v-if="ok">Yes</h1>
v-else
v-else指令來表示 v-if 的「else 塊」，v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，不然它將不會被識別。
<div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div>
v-else-if
v-else-if，顧名思義，充當 v-if 的「else-if 塊」，能夠連續使用：
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>
v-show
另外一個用於根據條件展現元素的選項是 v-show 指令。用法和v-if大體同樣，可是它不支持v-else,它和v-if的區別是，它製做元素樣式的顯示和隱藏，元素一直是存在的：
<h1 v-show="ok">Hello!</h1>
列表渲染
經過v-for指令能夠將一組數據渲染到頁面中，數據能夠是數組或者對象，v-for 指令須要使用 item in items 形式的特殊語法，items 是源數據數組而且 item 是數組元素迭代的別名。
遍歷數組
<ul id="example-1">
<li v-for="item in items">
{{ item}}
</li>
</ul>
vue對象建立以下：
var example1 = new Vue({
el: '#example-1',
data: {
items: ['foo','bar']
}
})
若是想加上索引值，能夠加上第二個參數
<ul id="example-2">
<li v-for="(item, index) in items">
{{ index }} - {{ item.message }}
</li>
</ul>
遍歷對象
也能夠用 v-for 經過一個對象的屬性來迭代
<ul id="v-for-object">
<li v-for="value in object">
{{ value }}
</li>
</ul>
若是想加上對象屬性名，能夠加上第二個參數
<ul id="v-for-object">
<li v-for="(value,key) in object">
{{ key }}-{{ value }}
</li>
</ul>
事件處理
事件綁定方法
能夠用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼，事件的處理，簡單的邏輯能夠寫在指令中，複雜的須要在vue對象的methods屬性中指定處理函數。
<div id="example-1">
<!-- 在指令中寫處理邏輯 -->
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
......
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
methods屬性中指定處理函數：
<div id="example-2">
<!-- greet 是在下面定義的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
......
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 對象中定義方法
methods: {
greet: function () {
// `this` 在方法裏指向當前 Vue 實例
alert('Hello ' + this.name + '!')
}
}
})
事件修飾符
實際開發中，事件綁定有時候牽涉到阻止事件冒泡以及阻止默認行爲，在vue.js能夠加上事件修飾符
<!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件再也不重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符能夠串聯 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form>
表單輸入綁定
能夠用 v-model 指令在表單 <input> 及 <textarea> 元素上建立雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素
單行文本框
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本框
<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
複選框
單個複選框，綁定到布爾值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多個複選框，綁定到同一個數組：
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
......
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
單選框
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
......
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
下拉框
<div id="example-5">
<select v-model="selected">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
......
new Vue({
el: '...',
data: {
selected:''
}
})
過濾器
Vue.js容許你自定義過濾器，可被用於一些常見的文本格式化。過濾器能夠用在兩個地方：雙花括號插值和 v-bind 表達式
<!-- 在雙花括號中 -->
{{ prize | RMB }}
<!-- 在v-bind中 -->
<div v-bind:id="rawId | formatId"></div>
過濾器其實是一個函數，能夠在一個組件的選項中定義組件內部過濾器：
filters:{
RMB:function(value){
if(value=='')
{
return;
}
return '¥ '+value;
}
}
或者在建立 Vue 實例以前全局定義過濾器：
Vue.filter('Yuan',function(value){
if(value=='')
{
return;
}
return value+'元';
});
此時過濾器'RMB'只能在定義它的對象接管標籤內使用，而'Yuan'能夠全局使用
自定義指令
指令是用來作dom操做的，若是vue現有的指令不能知足開發要求，咱們須要對普通DOM元素進行底層操做，這時候就會用到自定義指令。
定義一個全局指令，讓input框自動獲取焦點
Vue.directive('focus',{
inserted:function(el,binding){
el.focus();
el.style.background = 'gold';
console.log(binding.name);
}
})
......
<div id="app">
<input type="text" v-focus>
</div>
若是定義成vue對象局部的，能夠用vue對象的directives屬性：
directives: {
focus: {
inserted: function (el,binding) {
el.focus();
el.style.background = 'gold';
console.log(binding.name);
}
}
}
實例生命週期
每一個Vue實例在被建立時都要通過一系列的初始化過程——例如，須要設置數據監聽、編譯模板、將實例掛載到DOM並在數據變化時更新 DOM 等。同時在這個過程當中會自動運行一些叫作生命週期鉤子的函數，咱們可使用這些函數，在實例的不一樣階段加上咱們須要的代碼，實現特定的功能。
beforeCreate
在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。
created
在實例建立完成後被當即調用。在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始
beforeMount
在掛載開始以前被調用：相關的 render 函數首次被調用。
mounted
實例掛載到dom以後被調用，能夠當成是vue對象的ready方法來使用，通常用它來作dom的初始化操做。
beforeUpdate
數據發生變化前調用
updated
數據發生變化後調用
數據交互
vue.js沒有集成ajax功能，要使用ajax功能，可使用vue官方推薦的axios.js庫來作ajax的交互。 axios庫的下載地址：https://github.com/axios/axios/releases
axios完整寫法：
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
axios請求的寫法也可寫成get方式或post方式。
執行get請求
// 爲給定 ID 的 user 建立請求
// then是請求成功時的響應，catch是請求失敗時的響應
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可選地，上面的請求能夠這樣作
axios.get('/user', {
params: {
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);
});
ES6語法
ES6是JavaScript語言的新版本，它也能夠叫作ES2015，以前學習的JavaScript屬於ES5，ES6在它的基礎上增長了一些語法，ES6是將來JavaScript的趨勢，並且vue組件開發中會使用不少的ES6的語法，因此掌握這些經常使用的ES6語法是必須的。
變量聲明let和const
let和const是新增的聲明變量的開頭的關鍵字，在這以前，變量聲明是用var關鍵字，這兩個關鍵字和var的區別是，它們聲明的變量沒有預解析，let和const的區別是，let聲明的是通常變量，const申明的常量，不可修改。
alert(iNum01) // 彈出undefined // alert(iNum02); 報錯，let關鍵字定義變量沒有變量預解析 // alert(iNum03); 報錯，const關鍵字定義變量沒有變量預解析 var iNum01 = 6; // 使用let關鍵字定義變量 let iNum02 = 12; // 使用const關鍵字定義變量 const iNum03 = 24; alert(iNum01); // 彈出6 alert(iNum02); // 彈出12 alert(iNum03); // 彈出24 iNum01 = 7; iNum02 = 13; //iNum03 = 25; // 報錯,const定義的變量不可修改,const定義的變量是常量 alert(iNum01) alert(iNum02); alert(iNum03);
箭頭函數
能夠把箭頭函數理解成匿名函數的第二種寫法，箭頭函數的做用是能夠在對象中綁定this，解決了JavaScript中this指定混亂的問題。
// 定義函數的通常方式
/*
function fnRs(a,b){
var rs = a + b;
alert(rs);
}
fnRs(1,2);
*/
// 經過匿名函數賦值來定義函數
/*
var fnRs = function(a,b){
var rs = a + b;
alert(rs);
}
fnRs(1,2);
*/
// 經過箭頭函數的寫法定義
var fnRs = (a,b)=>{
var rs = a + b;
alert(rs);
}
// fnRs(1,2);
// 一個參數能夠省略小括號
var fnRs2 = a =>{
alert(a);
}
fnRs2('haha!');
// 箭頭函數的做用，能夠綁定對象中的this
var person = {
name:'tom',
age:18,
showName:function(){
setTimeout(()=>{
alert(this.name);
},1000)
}
}
person.showName();
模塊導入import和導出export
javascript以前是沒有模塊的功能的，以前作js模塊化開發，是用的一些js庫來模擬實現的，在ES6中加入了模塊的功能，和python語言同樣，python中一個文件就是一個模塊，ES6中，一個js文件就是一個模塊，不一樣的是，js文件中須要先導出(export)後，才能被其餘js文件導入(import)
// model.js文件中導出
var person = {name:'tom',age:18}
export default {person}
// index.js文件夾中導入
import person from 'js/model.js'
// index.js中使用模塊
person.name
person.age
/*
上面導出時使用了default關鍵字，若是不使用這個關鍵字，導入時須要加大括號：
import {person} from 'js/model.js'
*/
目前ES6的模塊功能須要在服務器環境下才能夠運行。
對象的簡寫
javascript對象在ES6中能夠作一些簡寫形式，瞭解這些簡寫形式，才能方便咱們讀懂一些在javascript代碼中簡寫的對象。
let name = '李思';
let age = 18;
/*
var person = {
name:name,
age:age,
showname:function(){
alert(this.name);
},
showage:function(){
alert(this.age);
}
}
*/
// 簡寫成下面的形式
var person = {
name,
age,
showname(){
alert(this.name);
},
showage(){
alert(this.age);
}
}
person.showname();
person.showage();
vue組件
組件(Component)是Vue.js最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼。全部的 Vue 組件同時也都是 Vue 的實例，因此可接受相同的選項對象 (除了一些根級特有的選項) 並提供相同的生命週期鉤子。
註冊及使用組件
// 註冊一個組件：
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
//使用組件
<div id="example">
<my-component></my-component>
</div>
......
new Vue({
el: '#example'
})
data 必須是函數
組件就是vue的實例，全部vue實例中屬性和方法，組件中也能夠用，可是data屬性必須是一個函數，由於組件會重複使用在多個地方，爲了使用在多個地方的組件數據相對獨立，data屬性須要用一個函數來返回值。
// 定義組件
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
}
})
// 使用組件
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
......
new Vue({
el: '#example-2'
})
props傳遞數據
若是想給組件中傳遞參數，組件要顯式地用 props 選項聲明它預期的數據：
<!-- 樣式 -->
<style>
.breadcrumb{width:90%;line-height:50px;
border-bottom:1px solid #ddd;margin:0px auto;}
.breadcrumb .hot{font-weight:bold;color:red;letter-spacing:2px;}
</style>
......
<div id="app">
<bread-crumb pos="首頁>圖片列表"></bread-crumb>
</div>
<script>
Vue.component('bread-crumb',{
props:['pos'],
template:'<div class="breadcrumb" @click="fnLight">當前位置：<span :class="{hot:isHot}">{{pos}}</span></div>',
data:function(){
return {
isHot:false
}
},
methods:{
fnLight:function(){
this.isHot = !this.isHot;
}
}
})
let vm = new Vue({
el:'#app'
})
</script>
單文件組件
將一個組件相關的html結構，css樣式，以及交互的JavaScript代碼從html文件中剝離出來，合成一個文件，這種文件就是單文件組件，至關於一個組件具備告終構、表現和行爲的完整功能，方便組件之間隨意組合以及組件的重用，這種文件的擴展名爲「.vue」，好比："menu.vue"。
單文件組件代碼結構
// 使用template標籤來定義html部分
<template>
<div class="breadcrumb" @click="fnLight">
當前位置：<span :class="{hot:isHot}">{{pos}}</span>
</div>
</template>
// javascript要寫成模塊導出的形式：
<script>
export default{
props:['pos'],
name:'breadcrumb',
data:function(){
return {
isHot:false
}
},
methods:{
fnLight:function(){
this.isHot = !this.isHot;
}
}
}
</script>
// 樣式中若是有scope關鍵字，表示這些樣式是組件局部的，不會影響其餘元素
<style scoped>
.breadcrumb{
width:90%;
line-height:50px;
border-bottom:1px solid #ddd;
margin:0px auto;
}
.breadcrumb .hot{
font-weight:bold;
color:red;
letter-spacing:2px;
}
</style>
Vue組件開發自動化工具
windows終端操做
一、打開終端
在window開始的搜索框，輸入cmd，回車；或者在開始上點右鍵，選擇運行，輸入cmd回車；或者在window窗口的地址欄上輸入cmd，回車。
二、經常使用終端命令
// 查看文件夾內容 dir +回車 // 進入某個文件夾 cd 文件夾名 +回車 // 進入上一級文件夾 cd .. +回車 // 切換到e盤 e: +回車 // 清除屏幕 cls +回車
Node.js
Node.js是一個新的後端(後臺)語言，它的語法和JavaScript相似，因此能夠說它是屬於前端的後端語言，後端語言和前端語言的區別：
- 運行環境：後端語言通常運行在服務器端，前端語言運行在客戶端的瀏覽器上
- 功能：後端語言能夠操做文件，能夠讀寫數據庫，前端語言不能操做文件，不能讀寫數據庫。
Node.js若是安裝成功，能夠查看Node.js的版本,在終端輸入以下命令：
node -v
npm
npm是node.js的包管理器，安裝了node.js同時會自動安裝這個包管理器，能夠npm命令來安裝node.js的包。這個工具至關於python的pip管理器。
安裝vue的自動化工具
vue開發生態區提供了用node.js開發的自動化開發工具包，這個工具包能夠幫咱們編譯單文件組件。
// 全局安裝 vue-cli npm install --global vue-cli
生成Vue單頁面應用項目目錄
單頁應用(SPA)
單頁Web應用（single page web application，SPA），就是將系統全部的操做交互限定在一個web頁面中。單頁應用程序 (SPA) 是加載單個HTML頁面，系統的不一樣功能經過加載不一樣功能組件的形式來切換，不一樣功能組件所有封裝到了js文件中，這些文件在應用開始訪問時就一塊兒加載完，因此整個系統在切換不一樣功能時，頁面的地址是不變的，系統切換能夠作到局部刷新，也能夠叫作無刷新，這麼作的目的是爲了給用戶提供更加流暢的用戶體驗。
生成項目目錄
使用vue自動化工具能夠快速搭建單頁應用項目目錄。該工具爲現代化的前端開發工做流提供了開箱即用的構建配置。只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：
// 生成一個基於 webpack 模板的新項目 $ vue init webpack my-project // 啓動開發服務器 ctrl+c 中止服務 cd my-project npm run dev
項目目錄結構說明
須要關注的是上面標註的三個目錄：
- 文件夾1(src)，主開發目錄，要開發的單文件組件所有在這個目錄下
- 文件夾2(static)，靜態資源目錄，全部的css，js文件放在這個文件夾
- 文件夾3(dist)，項目打包發佈文件夾，最後要上線單文件項目文件都在這個文件夾中
還有node_modules目錄是node的包目錄，config是配置目錄，build是項目打包時依賴的目錄。
頁面結構說明
整個項目是一個主文件index.html,index.html中會引入src文件夾中的main.js,main.js中會導入頂級單文件組件App.vue,App.vue中會經過組件嵌套或者路由來引用components文件夾中的其餘單文件組件。
組件嵌套
將單文件組件組合在一塊兒有兩種方式，一種是嵌套方式，一種用路由的方式。嵌套的方式代碼以下：
下圖示中，假設組件A中要嵌入組件B
<template>
// 在A組件中使用B組件
<B_zujian></B_zujian>
</template>
<script>
// 先導入B組件，其中'@'表示src目錄，組件後的vue擴展名能夠省略
import B_zujian from '@/components/B_zjian'
export default{
name:'A_zujian',
data:function(){
return {
iNum:0
}
},
// 接着在components屬性選項中註冊
components:{
B_zujian
}
}
</script>
路由
能夠經過路由的方式在一個組件中加載其餘組件，要使用路由功能，須要在main.js中先導入路由的包,而後在組件對象中還須要包含它。
import router from './router'
new Vue({
.....
router
})
組件中經過路由標籤來加載其餘的路由
<!-- 路由標籤 --> <router-view></router-view> <!-- 簡寫成下面一個標籤的形式： --> <router-view/>
路由標籤裏面加載哪一個組件呢？在router文件中的index.js文件中設置
import Vue from 'vue'
import Router from 'vue-router'
// 導入對應組件 '@' 表示src文件夾
import MainList from '@/components/MainList'
import UserList from '@/components/UserList'
import UpDate from '@/components/UpDate'
// 使用路由模塊的固定寫法
Vue.use(Router)
// path爲'/'表示路由默認加載的組件
// 這些路由默認設置的是App.vue中的路由標籤加載的組件
export default new Router({
routes: [
{
path: '/',
name: 'MainList',
component: MainList
},
{
path: '/user',
name: 'UserList',
component: UserList
},
{
path: '/update',
name: 'UpDate',
component: UpDate
}
]
})
經過連接能夠切換路由標籤裏面對應的組件，連接的地址是上面index.js文件中定義的path值，不過連接標籤是"router-link",連接地址用'to'來定義：
<router-link to="/">股票信息</router-link> <router-link to="/user">我的中心</router-link>
連接地址中能夠傳遞參數，格式以下：
// name對應的是路由中定義的一個path對應的name屬性
<router-link :to='{name:"UpDate",params:{code:item.code}}'>
有時候須要在組件的js中跳轉頁面，也就是改變路由，改變路由有下面這些方式：
// 當前頁面從新加載
this.$router.go('/user');
// 跳轉到另一個路由
this.$router.push({path:'/user'});
// 獲取當前的路由地址
var sPath = this.$route.path;
數據請求及跨域
數據請求
數據請求使用的是ajax，在vue中使用的axios.js，這個文件能夠在index.html文件中引入，也能夠做爲模塊導入，在main.js中導入這個模塊，而後將它綁定在Vue類的原型上。
import axios from 'axios' Vue.prototype.axios = axios
在組件的js代碼中使用axios：
this.axios({......})
跨域請求
vue的自動化工具提供了開發的服務器，咱們在這個服務器環境下開發，改動代碼能夠立刻更新顯示，錯誤了還有代碼提示，很是方便，可是，若是咱們組件中須要數據，並且數據在另外一個服務器環境下運行，咱們就須要跨域請求數據，vue工具中可使用代理來跨域請求，設置的方法是：在項目的config文件夾中，打開index.js,在proxyTable一項中設置：
// 'http://localhost:7890' 表示的是要跨域請求的地址
// 若是請求的地址是：'http://localhost:7890/index_data'
// 在請求時就能夠寫成: '/apis/index_data'
'/apis': {
target: 'http://localhost:7890',
changeOrigin: true,
pathRewrite: {
'^/apis': ''
}
}
打包上線
項目開發完成後，須要把請求數據的代理地址改爲和提供數據的服務器在同一個域的地址，由於最終會把前端代碼放在和數據在同一個域的服務器下面運行。
// 將下面的請求地址 '/apis/index_data' // 改爲 '/index_data'
改完請求地址後，就能夠將代碼打包，生成最終能夠上線的單文件結構：
// 打開終端，ctrl+c停掉開發服務器，執行下面的命令 npm run build
自動化程序會將打包的文件自動生成到項目的dist文件夾中。
將這些文件拷貝到提供數據服務的服務器的靜態目錄文件夾中，完成最終的上線！
- 1. 前端之Vue.js庫的使用
- 2. 前端框架之Vue.js 庫的使用
- 3. web前端 - vue.js - skitter 插件的使用
- 4. 前端Vue.js之路【1】
- 5. 前端面試題之vue.js
- 6. 前端框架之Vue.js
- 7. 前端架構之路：使用Vue.js開始第一個項目
- 8. Vue.js前端部署
- 9. Vue.js 前端建立
- 10. 前端框架Vue.js
- 更多相關文章...
- • 使用UDP協議掃描端口 - TCP/IP教程
- • PHP gd_info - 取得當前安裝的 GD 庫的信息 - PHP參考手冊
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Composer 安裝與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端之Vue.js庫的使用
- 2. 前端框架之Vue.js 庫的使用
- 3. web前端 - vue.js - skitter 插件的使用
- 4. 前端Vue.js之路【1】
- 5. 前端面試題之vue.js
- 6. 前端框架之Vue.js
- 7. 前端架構之路：使用Vue.js開始第一個項目
- 8. Vue.js前端部署
- 9. Vue.js 前端建立
- 10. 前端框架Vue.js