VueJS 基礎知識及項目總結

一、build ：dev-server.js 是在使用終端命令時啓動時執行的，裏面能夠修改端口號 （修改第16行便可）

二、index.html 是整個文件的入口

  src 裝的是你寫入的文件
三、main.js 是當前文件的主要的邏輯入口

   APP.vue 是根組件

四、一些事件和方法

v-on:click="事件名"
v-on:keyup="事件名" //在按下任意鍵時觸發
v-on:keyup.enter="事件名" // 在按下enter 鍵時觸發
v-on:keyup.alt.enter="事件名" // 須要按住alt鍵再按下enter鍵纔會被調用

更多事件能夠去官方文檔查看

五、
<li v-for="user in users">
<input type="checkbox" class="toggle"
v-model="user.contacted"
>
<!--下面span中 :class是綁定一個樣式，user.contacted爲true 時有這個樣式，爲false時，沒有這個樣式-->
<span :class="{contacted:user.contacted}">
{{user.name}}:{{user.email}}
<button v-on:click="deleteUser(user)">x</button>
</span>

</li>

六、如何使用路由

修改了main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Users from './components/Users'
import Test from './components/Test'

Vue.use(VueRouter)

Vue.config.productionTip = false
//設置路由
const router = new VueRouter({
mode:'history',
base:__dirname,
routes:[
{path:"/",component:Users},
{path:"/test",component:Test},
]
})
/* eslint-disable no-new */
new Vue({
router,
template: `
<div id="app">
<ul>
<li>
<router-link to="/">Users</router-link>
<router-link to="/test">Test</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}).$mount("#app")

七、如何使用http 請求

安裝 resource npm install vue-resource --save

jsonplaceholder.typicode.com 中有一些寫好的數據

created 方法不須要調用自動執行


八、核心概念

vue:組件化 雙向數據流（基於ES5中的defineProperty 來實現的），IE9+才支持

angular:模塊化 雙向數據綁定 （髒檢測：一個數組（$watch））

在 vue 官網上有vue與其餘框架的對比（建議學完vue 再看）

雙向數據流：
1向 ：js 內存屬性發生改變，影響頁面的變化

1向 ： 頁面的改變影響js內存屬性的改變

九、經常使用指令

v-text 是元素的innerText 只能在雙標籤中使用

v-html 是元素的innerHTML，不能包含{{xxx}}

v-if 元素是否移除或者插入

v-show 元素是否顯示或隱藏

v-model 雙向數據綁定

v-bind:value :給value 賦值 v-bind是單向數據綁定（內存js 改變影響頁面）

建立一個項目基本步驟：

一、建立 index.html

建立div 標籤，id=「App」

二、配置main.js

1）引入vue
2）引入 app.vue，用它的內容來替換 div id = app
3) 構建 vue 實例

new Vue({

//渲染內容的目的地

el:'#app',

//渲染內容

render:function(c){ // c只是一個形參，叫什麼均可以
return c(App)

}

})

//通常來講，key是固定的，值是你設置的（可變的）

三、app.vue

裏面能夠寫代碼在瀏覽器中顯示了

<template></template>
<script></script>
<style></style>

十、class 結合v-bind 使用

須要根據可變的表達式的結果來給class 賦值，就須要用到v-bind：class="xxx"
v-bind：屬性名="表達式"，最終表達式運算結束的結果賦值給該屬性名

——簡化的寫法是：`：屬性名="表達式"`
class：結果的分類：
——一個樣式：返回字符串（三元表達式和key和樣式的清單對象）
——多個樣式：返回對象（樣式作key，true 或false作值）

箭頭函數：（c）=>{return c(App)}

一、參數是一個的時候，小括號能夠省略
二、當代碼只有一行且是返回值的時候，能夠省略大括號
上述箭頭函數簡寫爲 c = > c(App)

v-bind:class="isRed?'red':'green'" 三元表達式來取其一 取一個，返回一個字符串

取多個 返回一個對象

複雜狀況，經過遍歷，根據當前對象的成績，匹配成績和樣式
的清單對象，用成績作key，取對象的value，最終返回字符串作樣式名
:class="{'A':'red','B':'green'}"[stu.score]
這裏stu.score 爲key，經過score去取對象中的值

十一、methods 和 v-on 的使用

*綁定事件的方法
`v-on 事件名="表達式||函數名"` 好比:v-on:click="change()"
簡寫：`@事件名="表達式||函數名"`

* 函數名若是沒有參數，能夠省略() 只給一個函數名稱 ，好比 v-on:click="change"

*聲明組件內的函數，在export default 這個對象的根屬性加上methods屬性，其是一個對象，

——key 是函數名，值是函數體
*在export default 這個對象的根屬性加上data屬性，其是一個函數，返回一個對象
——對象的屬性是咱們初始化的變量的名稱

*凡是在 template 中使用變量或者函數，不須要加 this，在script中使用就須要加上this

十二、v-for 的使用

* 可使用操做數組（item，index）
* 可使用操做對象（value，key，index）
* key是相似trank by 的一個屬性
* 爲的是告訴vue ，js 中的元素，與頁面之間的關聯，當試圖刪除元素的時候，是單個元素的刪除而不是整版替換，因此須要關聯其關係，設置（必須，性能） 2.xxx以後必須設置


1三、漂亮的列表

*綁定class，根據成績級別顯示不一樣的 class
:class="{'A':'red','B':'green','C':'blue','D':'pink','E':'gray'}[hero.score]"

*列表的添加和刪除功能
添加： 經過點擊事件向數組中push對象
刪除：根據v-for 中的index ，將被點擊的某條刪除

1四、父子組件

在 vue文件中的style 中填寫的樣式默認是全局的，若是想要局部有效，在style 標籤上加上 scoped 字樣

*父和子，使用的是父，被用的是子
*父須要聲明子組件，引入子組件對象，聲明方式以下
```javascript
import 組件對象 from './xxx.vue'
export default{
components:{
組件名：子組件對象
}
}
*全局組件，使用更爲方便，不須要聲明，直接用
*在main.js 中引入一次，使用`vue.component('組件名','組件對象')`
*全部的組件就能夠直接經過組件名使用
Vue.component('headerVue',headerVue);//註冊一個組件，第一個參數是名稱，第二個參數是實際的對象
// （顯示什麼內容，具有什麼功能）

1五、父組件傳遞值給子組件

* 父組件經過子組件的屬性將值進行傳遞
——方式有2：常量: prop1="常量值"
變量: prop2="變量名"
子組件須要聲明
- 根屬性props:['prop1','prop2']
- 在頁面中直接使用{{prop1}}
- 在js中應該如何使用prop1？ 經過 this.prop1 獲取

1六、子組件向父組件通訊（vuebus）擴展

經過new Vue()這樣的一個對象，來$on('事件名',fn(prop1,prop2))
另外一個組件引入同一個vuebus，來$emit('事件名',prop1,prop2)

建立通訊的js文件，代碼爲
import Vue from 'vue';
var connector = new Vue();
export default connector;

父組件中template部分代碼：
<sub-vue></sub-vue>
<button @click="listen">爸爸焦急的聽電話</button>

script中的部分代碼：

import connect from './connector.js';
methods:{
listen(){
connect.$on('phone',function(msg){
console.log(msg);
})
}
}
子組件中template 部分代碼：
<button @click="callDaddy">打電話給爸爸</button>

script 中的部分代碼：
methods:{
callDaddy(){
// 發射信號
connect.$emit('phone','62分鐘來')
}
}

1七、vue.js 文檔分類
一、全局的表明Vue.的
二、實例的表明this. 或者 new Vue().
三、選項表明 new Vue()的參數或者export default 裏邊的屬性
全局：經過vue 調用 分 API 和 配置

全局配置
silent
optionMergeStrategies
devtools
errorHandler
warnHandler
ignoredElements
keyCodes
performance
productionTip

全局 API
Vue.extend
Vue.nextTick
Vue.set
Vue.delete
Vue.directive
Vue.filter
Vue.component
Vue.use
Vue.mixin
Vue.compile
Vue.version

選項 / 數據 options/類別
data
props
propsData
computed
methods
watch
選項 / DOM options
el
template
render
renderError
選項 / 資源 options
directives
filters
components

以上帶選項的都與實例相關，如：

new Vue({
el:
render:
})
export default{
components:{},
methods:{

}
}

實例：組件內的this 和 new Vue()

實例方法 / 事件
vm.$on
vm.$once 只觸發一次
vm.$off 取消事件
vm.$emit

指令
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-pre
v-cloak
v-once

1八、複習

* vue 單文件方式 xxx.vue
*1：準備好配置文件 package.json (包描述文件&&封裝命令npm run dev)+webpack.config.js文件（打包的配置文件）
*2：建立index.html(單頁應用的頁)
*3：建立main.js(入口文件)
*4：引入vue和相關的文件 xxx.vue
*5：new Vue(options)
*6:options：
-data
-methods
-components（組內聲明子組件）
-props
*7：實例
-在組件內（xxx.vue）中的this
-new Vue()
-事件
+this.$on(事件名，回調函數(參數))
+this.$emit(事件名，數據)
+this.$once(事件名，回調函數(參數)) 就觸發一次
+this.$off(事件名)；取消事件
*8:全局
-Vue.component('組件名'，組件對象) 在哪裏均可以使用

*9：組件傳值
-父傳子：屬性做爲參數
+常量 title='xxx'子組件聲明接收參數 props:['xxx']
+變量 v-bind:title='num' 子組件聲明接收參數props:['xxx']
-子傳父：vuebus（只能是同一輛車，即事件名相同）
+ 先停車到父組件，on一下
+ 再開車到子組件，若是須要的話，emit一下，觸發上述時間的回調函數

1九、過濾器

*content | 過濾器，vue中沒有提供相關的內置過濾器，能夠自定義過濾器
*組件內的過濾器 + 全局過濾器

-組件內過濾器就是options中的一個filters 的屬性（一個對象）+多個key 就是不一樣過濾器名，多個value就是與key 對應的過濾方式函數體

-全局過濾器就是Vue.filter(名，fn)

*輸入的內容幫我作一個反轉
當全局過濾器和組件內過濾器重名時，以組件內過濾器爲有效

總結：
-全局： 範圍大，若是出現同名時，權利小
-組件內：若是出現同名時，權力大，範圍小

20、獲取DOM 元素

*救命稻草，前端框架就是爲了減小DOM操做，可是特定狀況下，也留了後門。
*在指定的元素上，添加 ref ='名稱'
*在獲取的地方加入 this.$refs.名稱A
-若是ref放在了原生DOM元素上，獲取的數據就是原生DOM對象
+ 能夠直接操做
-若是ref放在了組件對象上，獲取的就是組件對象,進行操做
-對應的事件
+created 完成了數據的初始化，此時還未生成DOM，沒法操做DOM
+mounted 將數據已經裝載到了DOM之上，能夠操做DOM

*兩個鉤子函數 created and mounted （也能夠叫事件）
// 組件建立後，數據已經完成初始化，可是DOM還未生成
created(){//事件的處理函數（created）
console.log('created:',this.$refs.myDiv);//獲取不到
},
// 數據裝載到DOM後，各類數據已經就位，將數據渲染到DOM上，DOM已經生成
mounted(){
//console.log(this);
console.log('sub:',this.$refs.sub.$el);
// 獲取組件對象，並獲取到其的DOM對象
this.$refs.sub.$el.innerHTML = "你好";
// console.log('mounted',this.$refs.myDiv);
//涉及DOM類的操做
//this.$refs.myDiv.innerHTML="123456789"
// 涉及到數據的操做
this.text="嘻嘻哈哈";
}

2一、mint-ui

*餓了麼，element-ui 在PC端使用的
*移動端版本 mint-ui
*https://mint-ui.github.io/#!/zh-cn
安裝 mint-ui命令：npm i mint-ui -S

注意：項目中應該按需引入

//引入所有組件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);

//按需引入部分組件
import { Cell,Checklist } from 'minu-ui';
Vue.component(Cell.name,Cell);
Vue.component(Checklist.name,Checklist);

meta:vp 回車，能夠出來meta的完整適配代碼：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

注意：
- 若是是所有安裝的方式
+ 1：在template中能夠直接使用組件標籤 +2：在script中必需要聲明，也就是引入組件對象（按需加載）

2二、 獲取網站技術的插件

* wappalyzer
獲取到當前網站的使用的技術

2三、vue-router

* 前端路由 核心就是錨點值的改變，根據不一樣的值，渲染指定DOM位置的不一樣數據

*ui-router:錨點值改變，如何獲取模板？ ajax

*vue中，模板數據不是經過ajax請求來，而是調用函數獲取到模板內容

*核心：錨點值改變
*之後看到vue開頭，就知道必須Vue.use
* vue的核心插件：
-vue-router 路由
-vuex 管理全局共享數據
*使用方式
-1：下載 `npm i vue-router -S`
-2：在main.js 中引入`import VueRouter from 'vue-router'`
-3：安裝插件`Vue.use(VueRouter)`
-4：建立路由對象並配置路由規則
+ `let router = neew VueRouter({routes:[{path:'/home',component:Home}]})`
-5：將其路由對象傳遞給Vue 的實例，options中
+ options中加入`router:router`
-6：在app.vue中留坑
<!-- 留坑，很是重要 -->
<router-view></router-view>

2四、 Vue 學習方式

vue:這個對象怎麼來的？
框架的使用，關注vue代碼怎麼寫，不會照抄
框架，先掌握運用

組件的組成部分：

結構、樣式、動態效果

基於webpack 編譯——>核心，最終理解打包的好處

2五、 命名方式使用router-link

//建立路由對象並配置路由規則
let router = new VueRouter({
routes:[
//一個個對象
{name:'music',path:'/myMusic',component:Music},
{path:'/movie',component:Movie}
]
})
*router-link實際是根據name 找到對應的路徑；
<!-- 一、去哪裏 -->
<router-link :to="{name:'music'}">進入音樂1</router-link>
<router-link :to="{name:'music'}">進入音樂2</router-link>
<router-link :to="{name:'music'}">進入音樂3</router-link>
<!-- 也能夠跟路徑使用 ，可是不建議使用-->
<router-link to="/movie">進入電影</router-link>
Vue.use(VueRouter);//掛載屬性

2、基礎學習

一、 vue中響應的數據綁定和視圖組件

能夠從github上找vue的學習資源
1：漸進式框架Vue

Vue是什麼

構建用戶界面的漸進式框架
只關注視圖層（view）

2：vue中兩個核心點

vue中兩個核心點
1：響應的數據綁定

1）當數據發生改變->自動更新視圖
2）利用Object.definedProperty （不兼容IE8）中的setter/getter代理數據，監控對數據的操做

2： 組合的視圖組件

1） ui頁面映射爲組件樹
2） 劃分組件可維護、可重用、可測試

3：虛擬DOM

運行js的速度是很快的，大量操做DOM就會很慢時常在更新數據後會從新渲染頁面形成資源浪費。

4：MVVM模式

M：model 數據模型
V：view 視圖模型
VM：view-Model 視圖模型

經典例子：(這裏是引入vue.js的代碼寫法)
<div id="demo">
<input type="text" v-model="message"/>
<p>{{message}}</p>
</div>
let data = {message:'hello,world'};
var vm = new Vue({
el:'#demo',
data:data
});

5：Vue實例

*vue實例
每個應用都是經過Vue這個構造函數建立根實例啓動new Vue（選項對象）
* 須要傳入選項對象，對象包含掛載元素，數據，模板，方法等。
el: 掛載元素選擇器 String|HtmlElement
data: 代理數據 Object|Function
methods:定義方法 Object

*vue代理data數據

每一個Vue實例都會代理其data對象裏全部的屬性，這些被代理的屬性是響應的。新添加的屬性不具有響應功能，改變後不會更新視圖。

* vue 實例自身屬性和方法
暴露自身屬性和方法：以$ 開頭，例如 $el $data....

6：聲明式渲染

*聲明式：只須要聲明在哪裏作什麼，而無需關心如何實現

*命令式：須要以具體代碼表達在哪裏作什麼，如何實現
var arr = [1,2,3,4,5];
//求數組中每一項的倍數，放在另外一個數組中
for(var i=0;i<arr.length;i++){
newArr.push(arr*2);
}
var newArr = arr.map(function(){});

*vue聲明式渲染：
arr.map(function(item){
return item*2
});

7：指令

什麼是指令
是一種特殊的自定義行間屬性
指令的職責就是當其表達式的值改變時相應地某些行爲應用到DOM上
在Vue中，指令以v-開頭
8：模板
9：vue中的雙向數據綁定

1)Vue中的內置指令：
v-bind 動態的綁定數據，簡寫爲：
v-on綁定事件監聽器，簡寫爲@
v-text 更新數據，會覆蓋已有結構
v-html 能夠解析數據中的html結構
v-show 根據值的真假，切換元素的display屬性
v-if 根據值的真假，切換元素會被銷燬、重建
v-else-if 多條件判斷，爲真則渲染
v-else 條件都不符合渲染
v-for 基於元數據屢次渲染元素或模板塊
v-model 在表單控件元素上建立雙向數據綁定
v-pre 跳過元素和子元素的編譯過程
v-once 只渲染一次，隨後數據更新不從新渲染
v-cloak 隱藏未編譯的Mustache語法，css中設置[vcloak]{display:none}

2)html模板

基於DOM的模板，模板都是可解析的有效的HTML

插值：
文本： 使用"Mustache"語法，（雙大括號）{{value}}
做用：替換實例上的屬性值，當值改變時，插值內容處會自動更新

原生的html：雙大括號輸出的是文本，不會解析html（若是想要解析成html而不是文本，須要在標籤中添加 v-html ，v-html="html" 記住 span中不能包含div ）

屬性：使用v-bind進行綁定，能夠響應變化

使用javascript表達式：寫簡單的表達式

{{1+2}} {{ture？"yes":"no"}

3)template 字符串模板

template選項對象的屬性
模板將會替換掛載的元素。掛載元素的內容都將被忽略
根節點只能有一個（template中只能寫一個根節點不能有並列的）
var vm = new Vue({
el:'#demo',
data:{abc:123},
template:`<div>{{abc}}<span>hello</span></div>`
})
將html結構寫在一對script標籤中，設置type="x-template"
即將template的html寫在script中，如：
<script type="x-template" id="temp">
<div>{{abc}}
<span>hello</span>
</div>
</script>
var vm = new Vue({
el:'#demo',
data:{abc:123},
template:"#temp"
})

4)模板 -render函數

render 選項對象的屬性
createElement(標籤名，數據對象（可省略）,子元素)
綁定的class，值是一個對象，對象的key是class名稱，value是一個表達式，能判斷出是true仍是false；
<div id="demo">
<span :class='{red:addClass}'></span>
</div>
<style>
.red{
background-color:red;
}
.bg{
background:red
}
</style>
var obj = {
addClass:true
}
var vm = new Vue({
el:'#demo',
data:obj,
render(creareElement){
return creareElement(
"ul", //標籤名
{
class:{
bg:true
},
style:{
fontSize:"50px"
},
attrs:{
abc:"hello"
}
},
[
creareElement("li",1),
creareElement("li",2),
creareElement("li",3),
]
)
}
})

render 函數第二個參數，數據對象屬性：
class:{} //綁定class，和‘v-bind:class’同樣的API
style:{} //綁定樣式，和 'v-bind:style' 同樣的 API
attrs:{} //添加行間屬性
domProps:{} //DOM 元素屬性
on:{} //綁定事件

nativeOn:{} //監聽原生事件
directives:{} //自定義指令
scopedSlots:{} //slot做用域
slot:{}, // 定義slot名稱
key:"key" //給元素添加惟一標示
ref:"ref" //引用信息

10：翻譯API地址：https://tech.yandex.com/translate/

11：命令行工具(cli)，用於快速搭建大型單頁應用

npm install --global vue-cli
vue init webpack my-project
cd my-project
npm install 加載須要的模塊
npm run dev

12: 在線翻譯項目總結

一、搭建項目開發環境
二、建立根組件和子組件
三、在根組件中引入translateForm組件，完善此子組件，看組件都包括什麼，而後寫代碼。將這些代碼包裹在form中，爲form綁定事件，爲了提交form中的東西
四、須要拿到輸入的內容，使用組件中data方法，定義一個屬性，使用此屬性經過v-model的方法，將值綁定到input上。
五、將上述拿到的值傳遞給根組件，經過 this.$emit("方法名（本身隨便定義，如formSubmit）")（實際上是註冊一個事件）
而後在根組件中的translateForm 標籤中綁定這個事件，如：<translateForm v-on:formSubmit="事件名"></translateForm>
如事件名爲 translateText，此時點擊翻譯按鈕，就能調用tanslateText這個函數了。this.$emit("方法名（本身隨便定義，如formSubmit）"，須要傳遞的參數（如this.textToTranslate）)
參數傳遞過去以後須要有地方接收，即在tanslateText這個函數中添加形參。
六、上述拿到想要翻譯的內容以後，須要進行翻譯，這時須要藉助翻譯的api，須要使用http請求調用接口，使用http就須要安裝vue-resource（因vuejs的做者宣佈再也不繼續維護vue-resource，並推薦你們使用axios）。
安裝好以後，須要在main.js 中引入該模塊，import VueResource form './App'
引入進來以後，要使用Vue.use(VueResource)
在 tanslateText 中調用接口：
this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20171103T033211Z.f02fec6e631bce1f.d4c2b02b1d3981280c37eba265247f888c3e5215')須要傳的參數是文本和language
使用.then()接收http的返回值
.then((reponse)=>{
reponse下的body下的text[0]就是咱們翻譯出來的值
})
將翻譯出來的值放到頁面中：
在App.vue 的data下返回一個 translatedText屬性，而後將response中拿到的值賦值給此屬性
將此屬性傳遞給translateOutput，首先在App.vue中引入translateOutput組件，在app.vue中輸入
<translateOutput></translateOutput> ，經過v-text綁定translatedText 這個屬性，以下：
<translateOutput v-text="translatedText"></translateOutput>，傳過來以後，在 translateOutput中定義一個屬性 props:["translatedText"],在translateOutput中調用此屬性<div id="translateOutput">
{{translatedText}}
</div>
select 中也經過v-model 來傳遞language的值，做爲參數傳給根組件，
created 方法不須要調用，默認會執行。

13： www.worktile.com 員工協做的平臺
Vue
Vuex 一種狀態管理模式
Vue-router
webpack 模塊打包工具
NodeJS 運行在服務器端的JavaScript
Express 一個簡潔而靈活的node.js Web 應用框架，
提供了一系列強大特性幫助你建立各類Web 應用和豐富的HTTP工具

MongoDB 是一個基於分佈式文件存儲的數據庫，旨在爲WEB 應用提供
可擴展的高性能數據存儲解決方案。
Mongoose 是在node.js 環境下對mongodb 進行便捷操做的對象模型工具

小插曲： 查找端口號1099的PID 命令：netstat -ano|findstr "1099"

14：Vue.js API

一、全局配置
Vue.config 是一個對象，包含 Vue 的全局配置。能夠在啓動應用以前修改它的屬性。

silent
optionMergeStrategies
devtools
errorHandler
warnHandler
ignoredElements
keyCodes
performance
productionTip

未完待續.......