博思軟體實訓總結（三）

本次專案每個人都是全棧開發，在此之前沒有涉獵過前端方面的知識，這一篇就來介紹一下vue的基礎知識。

先上一張MVVM框架邏輯圖，不同於傳統MVP/MVC前後端分離框架，MVVM保留了M層（模型層）和V層（檢視層），而把C/P層（控制層）用框架封裝VM層（ViewModel層），用取而代之。省掉了很多C/P層中對DOM的操作程式碼。如果需要修改V層顯示，只需要修改M層就可以。

1. vue 的三個特點：

資料雙向繫結，元件化，單檔案元件

2、vue的基本概念

全域性api： vue.extend、vue.set
例項選項: new Vue()、el、data、compents

3、功能介面

v-for = (item,index) in arry;//item 陣列的每一項， index：陣列的索引；
v-for = (value,key) in obj // value：物件的值，key物件的屬性；

陣列中不可用的方法：slice，concat；
直接修改陣列list[i] = 值，不可以這樣直接修改；
Vue.set(陣列，索引，{值}) vue的全域性方法set來更改陣列的某一項的值

標籤屬性和條件渲染

事件繫結-內建事件繫結，自定義事件繫結
v-on:click="run"等效於@:click="run" 事件繫結；
自定義事件繫結： 父元件自定義事件
``
子元件觸發 my-event 自定義事件；this.$emit('my-event', opation)；
父元件執行toggle 函式；

計算屬性和資料監聽
computed選項 -計算屬性：根據我們呼叫屬性來跟新，呼叫的屬性沒有變更，我們computed選項裡面的方法讀取的是快取；

頁面內容響應資料v-once
如果你需要頁面內容響應資料的變化，就不加v-once。
如果你需要頁面內容渲染後，不隨資料的變化而變化，就加上這個。
對於一些固定不變的元件，在呼叫時我們可以加上v-once，只在第一次渲染執行，儲存資料在記憶體中，後面再呼叫直接從內容中提取，提高執行效率。

應用

<div id="app">
<div ref="hello" @click="print">hello world</div>
</div>
<script>
var vm=new Vue({
el:"#app",
methods:{
print:function(){
console.log(this.$refs.hello.innerHTML);//this.$refs.hello返回一個引用的dom
}
}
});
</script>

元件的通訊
``等同於<動態的元件名> 動態繫結元件
注：Vue有個單項資料流的概念：即父元件傳遞給子元件的引數，子元件不能直接修改；防止引用型別引數被修改後，如果父元件中其他地方也使用了此引數會受到影響。

子元件props接受的兩種形式：
陣列：['first-name','two-name']，從父元件傳遞兩個屬性值；
動態展現：{{firstName}}
物件：

    {
        'first-name':[number,string]//接受的型別可以是number或者string；
    }

slot：插槽
父元件外掛裡面定義的內容放到子元件slot中：

<a-parent>
    <p slot='header'>我是父元件header</p>
    <p slot='footer'>我是父元件footer</p>
</a-parent>

子元件

<b-children>
    <slot name= 'header'></slot>
    <p>it is children content</p>
     <slot name= 'footer'></slot>
</b-children>

vue高階功能--過渡和動畫

<transition name = 'fade' mode='out-in'>
    // 過渡效果要一定的條件
    多元素過渡：如果標籤名相同，我們需要指定一下key，否則沒有效果；
    <p v-if = 'ishow' key='1'></p>
    <p v-else key='2'></p>
    <div v-if=''></div> 或者
    <div v-show = ''></div>或者
    <div :is='currentViews'></div>動態元件
</transition>

自定義指令：

<input type='text' v-foucus>
directive:{
    foucus: {
        inserted(el,bind){
            el.foucus()
        }
    }
}

4、 環境搭建和常用外掛

使用 vue-cli的優勢：
成熟的vue專案架構設計；
本地測試伺服器；
整合打包上線方案 webpack

使用vue-cli的系統要求：
node.js  (>=4.x);
git
一個能使用node的命令列終端 git bash  或者cmd
npm install vue-cli -g`  ：全域性安裝vue-cli
 `vue init webpack my-project`：初始化專案
 `npm install 安裝專案依賴

npm run dev：在localhost啟動測試伺服器；
npm run bulid：生成上線目錄（部署）

5. vue-router （設定路由） vue 的外掛

a、安裝 vue-router

 npm install vue-router --save  

b、配置路由

import VRouter from ‘vue-router’ ： 在入口頁引入vue-router；
Vue.use(VRouter);  //Vue.use註冊使用vue-router，引入router，我們需要例項化這個router類，
let router = new VRouter({ // 定義自己專案的router變數；
})
new Vue({
  el: '#app',
  router:router,
  template: '<APP/>',
  components: {APP}
})

6、關閉eslint
dev模式下，預設會做eslint檢測，若要關閉，開啟config/index.js，設定useEslint: false，${}佔位符，多行字串

7、生命週期

image.png

8、支援es6
es6中很多新特性很好用class、promise、then、catch、...（陣列轉換符號）、函式設定引數預設值等
a、安裝babel-polyfill

npm install --save-dev babel-polyfill    //淘寶映象是cnpm。

b、在入口main.js檔案當中引入:

import 'babel-polyfill'

c、找到build資料夾下的webpack.base.conf.js

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    //app: './src/main.js'
    app: ['babel-polyfill', './src/main.js']
  }