vue組件開發

• 下載

bower  前端包管理器
bower install vue#1.0.28包名  安裝  
bower uninstall包名   卸載
bower info 查看包的相關信息

import 組件名 from 組件路徑
import 直接文件路徑

-------------------------------------------

• vue  動畫（過渡） 

本質走的是css3的transition,animation
<div id="div1" v-show="bSign" transition="fade"

<style>
 .fade-transition {
    transition:1s all ease; 
 }
 .fade-enter{opacity:0}
 .fade-leave{opacity:0}
</style>
----------------------------------------------
animate.css 和 vue結合作動畫

--------------------------------------
new Vue({
  transitions:{
      bounce:{
     enterClass:'zoomInLeft',
     leaveClass:'zoomOutRight'
  }
 }

})

-----------------------------------------

• vue組件：  

  組件一個大的對象；
定義組件：
1.全局組件；
組件裏面想要放數據：
data必須是函數的形式，函數必須返回一個對象json
var Aaa=Vue.extend({
  data() {
  return {
     msg:'我是標題';
   }

  },
  methods:{
     change() {
      this.msg='changed'
     }
  }
  template:'<h3 @click="change">{{msg}}</h3>'
});
var a=new Aaa();
Vue.componet('aaa',Aaa);

2.局部組件
   放到某個組件內部
var vm= new Vue({
   el:'#box',
   components:{//局部組件
      'my-aaa',{
   template:'<h2>good</h2>'
     }
   
   }

 })
-------------------------------------------
另外一種編寫組件的方式：
 Vue.component('my-aaa',{
   template:'<h2>good</h2>'
});
----------------------------------
配合模板：
 1.template:
 2.d單獨放到某個地方
   a)
   <script type='x-template' id="aaa">
      <h2 @click="change">{{msg}}</h2>
    </script>
   b) <template id='aaa'>
       </template>

-------------------------------------------
動態組件:
<component :is="a"></component>
其中a是組件

------------------------------------------
組件的嵌套：
vue-devtools    調試工具
vue默認狀況下，子組件沒法訪問父組件的數據；

------------------------------------

• 組件間的數據傳遞：

1.子組件就想獲取父組件的data
  在調用子組件：
    子組件以內：props:['m','myMsg']
           props:{
            'm':String,
          'myMsg':Number
       }
<template id='aaa'>
   <bbb :msg='msg2' :my-msg='msg2'></bbb>  :m自定義屬性
</template>

   components:{
    'bbb':{
     propS:['msg','myMsg'],
     template:'<h3>我是子組件-->{{msg}}<br/>{{myMsg}}</h3>'
  }
}
  
-----------------------------------------
父組件獲取子組件數據，

  子組件把本身的數據，發送到父組件，
   vm.$emit(數據名稱(事件名稱)，數據)   
   this.$emit('child-msg',this.a);
  父組件接收子組件數據：
   v-on
   @child-msg=「get」
---------------------------------------------
vm.$dispatch(事件名，數據)  子級向父級發送數據
vm.$broadcast(事件名，數據）  父級向子級廣播數據
    配合：events{}
  var vm=new Vue({
   el:'#box',
   events:{
    
}
})
在vue2.0已淘汰；

-------------------------------------------

• slot:

   位置，槽口
   佔位置，當組件裏面有一些特定的佈局不想被覆蓋時，用slot佔位置
 <ul slot="ul-slot"><li>sdfsd</li></ul>
 <slot name='ul-slot'></slot>
 
--------------------------------------------

• vue-router  1.0

單頁面應用，路由
根據不一樣的url地址，出現不一樣的效果

v-link="{path:'/home'}" v-link指令  跳轉連接
坑 <router-view>展現內容</router-view>

//1.準備一個根組件
  
  var App=Vue.extend();
  
//2.Home  News組件
 var Home=Vue.extend({
   template:‘我是主頁’;
   
});

//3.準備路由：
  var router=new VueRouter();

//4.關聯
  router.map({
     'home':{component:Home},
     'news':{component:News}
  })

//5.啓動路由
   router.start(App,'#box')

//6.跳轉：
   router.redirect({
    '/aaa':'/home'
  
 })

----------------------------------

• 嵌套路由（多層路由）：

默認增長：class="v-link-active"
能夠增長active時的樣式
子組件  subRoutes:{
  
}
'home':{
    component:Home,
    subRoutes:{
    'login':{
        component:{
        template:'<strong>我是登陸信息</strong>'
        }
        },
    'reg':{
        component:{
        template:'<strong>我是註冊信息</strong>'
        }
            }
        }
    },

----------------------------------------

• 路由的其餘信息:

[object Object]  對象  用json過濾

  /detail/:id/age/:age    :冒號用來標誌當前參數
{{$route.parmas |json}}   --->parmas獲得當前參數的值，有幾個獲得幾個
$route.parmas 當前參數
$route.path   當前路徑
{{$route.query |json}}  當前路由的數據

---------------------------------------------
vue-loader:
style-loader
css-loader
url-loader
html-loader 

後臺： nodejs   -->require exports
    broserify   模塊加載器，只能加載js
    webpack     模塊加載器,最後打包到一塊兒

vue-loader 基於webpack

.vue文件:
  放置vue組件的代碼：
  <template>
  html
</template>
  <style>
    css    
</style>
  <script>
  js  es6
</script>

babel-loader  把es6代碼編譯成es5代碼
-----------------------------------------
webpack.config.js  webpack的配置文件
main.js      入口文件
index.html
App.vue     vue文件  官方推薦A大寫
package.json      工程文件（項目依賴，名稱，配置）
       npm init --yes

----------------------------

• ES6:模塊化開發

導出模塊：
export default {}
引入模塊
import 模塊 from  地址

-------------------------------------
npm install webpack --save-dev
不只下載到本地，並且添加到package.json中的devdependices中
npm install webpack-dev-server --save-dev

webpack-dev-server --inline --hot --port 8082
      熱加載，不刷新
cnpm install vue-loader@8.5.4 --save-dev

errnoExceprion  
EADDRINUSE  端口被佔用

cnpm install vue-html-loader --save-dev
clear
css-loader vue-style-loader
 vue-hot-reload-api  驗證代碼中的錯誤
exclude:/node_modules/ 

babel:{
  presets:['es2015'],
  plugins:['transform-runtime']
  
}
用babel編譯所需的loader（es6語法所需）
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime

-------------------------------------
最核心:
cnpm install vue@1.0.28 --save

------------------------------

• 運行：

1.cmpm install 
2.npm run dev
    package.json  
     "script":{"dev":--------------}

<style scope>局部的style

"build":"webpack -p"  打包並壓縮

上線：npm run build
    
--------------------------------------

• 腳手架：

  vue-cli----vue 腳手架
        vue已經提供好了基本項目結構

自己集成了不少項目模板：
    simple
   webpack
        (多) ESlint 檢查代碼規範，統一代碼風格
       (多)  單元測試
    webpack-simple 

 
    browserify
    browserify-simple

-------------------------------------

• 基本使用：

1.npm install vue-cli -g   安裝vue命令環境
   veu -v  
2. vue init <模板名> 文件夾名     生成項目模板
3.進入生成目錄
   npm install 
   npm run dev
   cls
------------------------------------
vue init webpack-simple#1.0 vue-webpack-simple-demo
在vue中不建議直接改，存一下再改，由於vue要通知視圖；

-----------------------------------------

• vue 2.0

2.0以後的變化:
1.在每一個組件模板中，不支持片斷代碼：
  關於組件模板，必須有根元素包裹組件的代碼；

• 2.關於組件的定義:

  1) Vue.extend  能夠用，廢棄
   2) Vue.conponent(組件名稱，{  也能夠用不推薦
     data(){},
    methods:{},
    template:
 })
   3) var Home={  //2.0
      template:""
 }

• 3.  生命週期

   2.0
    beforeCreate  組件實例剛剛被建立，屬性都尚未 
    Created  實例已經建立完成，屬性已綁定，Dom沒有綁定
    beforeMount   模板編譯以前，
    mounted    模板編譯完成   代替以前compiled和ready
    beforeUpdate  組件數據更新以前
    updata   組件數據更新完畢
    beforeDestroy   組件銷燬以前、

•     destroyed     
• 4.循環

    2.0裏面默承認以添加劇復的數據 
    在2.0去掉了一些隱士的變量
     v-for="(val,index) in list"
     arr.forEach(function(val,index){})

 

• 5.track-by="id"

   變成
    <li v-for="(val,index) in list" :key="index">
---------------------------------------------

• 6.自定義鍵盤指令

   Vue.config.keyCodes.ctrl=17;

• 7.過濾器：

   以前系統自帶不少過濾器
   2.0全部內置的過濾器所有刪除
    lodash  工具庫
    在2.0中json是直接轉的

• 8自定義過濾器;

  一小點變化，傳參用（）
  Vue.filter("過濾器名"，function(){})
    
-------------------------------------------

• 9.關於組件的通訊

    vm.$emit();
    vm.$on();
   子組件已經不容許給 父組件直接更改數據了
   a) 父組件每次傳一個對象給子組件，對象之間引用
   b)  子組件先定義一個空的對象的變量，來接收從父組件傳過來的值如b:''，
       而後在子組件中在mounted()中轉一下，用this.b=this.msg; 
       而後添加事件改變時只改變this.b的內容，父組件的msg不受影響
------------------------------------------

• 能夠單一事件管理組件通訊  vuex

  var Event= vew Vue();
     Event.$emit(事件名稱，數據)
  
     Event.$on(事件名稱，function(data){
        
}.bind(this))

-------------------------------------------
debounce  廢棄
    ---》lodash 用
        _.debounce(fn,time)

---------------------------------------------

• vue 動畫

vue路由
transition  以前屬性
到了 2.0以後，transition組件

<transition name="fade" @before-enter="beforeEnter">

函數方法：
 @before-enter="beforeEnter"   進入動畫enter以前
 @enter=「enter」   動畫enter進入
 @afterEnter="afterEnter"  動畫進入以後
 @before-leave="beforeLeave"  動畫leave以前
 @leave="leave" 動畫leave
 @after-leave="afterLeave"   動畫leave離開以前

  每一個方法都有本身的el，屬於本身的！！！
methods:{
 beforeEnter(el){
   console.log('動畫enter以前');
   el:這裏的el是表明元素自己
 }
}
    運動的東西（元素，屬性，路由）
</transition>
class定義：
.fade-enter  {}  //初始狀態
.fade-enter-active{}  //當元素出來變化成什麼樣  
.fade-leave{}
.fade-leave-active  {}   當元素消失變成什麼樣

-------------------------------------------------】

• 配合animate.css使用；

<transition enter-active-class="bounceInLeft/zoomInleft" 
 leave-active-class="bounceOutRight zoomOutRight">
    <p v-show="show" class="animated"></p>
  加了對應的類以後必須調用class="animated"才能生效
  或者直接在leave-active-class和enter-active-class中加animated;
</transition>

-----------------------------------------------------
多個元素：transition-group 而且用惟一的標誌 :key=""
key裏面的值通常是循環出來的
<transition-group>
  <p :key="1"></p>
 
<p :key="2"></p>

</transition-group>

----------------------------------------------

• vue2.0 路由：

 https://router.vuejs.org/zh-cn/index.html

1.<router-link to="/home">主頁</router-link>
2.展現仍是<router-view></router-view>
3.配置路由
4.生成路由實例
5.掛到vue上

重定向：  {path:'*',redirect:'/home'}

.router-link-active{}  路由激活時的狀態
------------------------------------------------

• 嵌套路由：children:{path:'',component:}

var User ={
  template:`<div>   //必須有根標籤
   <ul>
    <li><router-link to="/user/blue/age/10"></router-link></li>
    <li><router-link to="/user/red/age/60"></router-link></li>
     <li><router-link to="/user/eric/age/90"></router-link></li>
   </ul>
    </div> 

    `

}
  $route.parmas依然存在
children:[
  {path:':username/age/:age',component:UserDetail}

]
:age  
:username
獲取路由的用戶名和age

----------------------------------------------
掛載到vue上，這種寫法能夠替代el,
new Vue({
  router
  
 }).$mount("#box")

路由實例添加的方法
  router.push({path:'home'})  //直接添加一個路由
   本質是往歷史記錄裏添加一條信息  
  router.replace({path:'news'}) 替換一個路由,不會往歷史記錄車裏面添加

----------------------------------------------
new Vue({
  el:'#app'
   render:c =>c(App)
})

-------------------------------------------
import routerConfig from './router.config.js';
 new Vue({
  router,
  el:"#app",
  render:c =>c(App)

})

<style less></style>
----------------------------------------------
vue-loader和vue-router 配合

----------------------------------------------
webpack中的配置文件順序不對的話會引起bug
{
test:/\.css$/ , 
loader:'style!css'   //順序不能反
}

-------------------------------------------

• mint-ui  使用

GitHub：https://github.com/ElemeFE/mint-ui

https://github.com/itstrive/striveCode/tree/js/vue2.0-Mint-ui-demo
http://mint-ui.github.io/docs/#!/zh-cn2

項目主頁：http://mint-ui.github.io/#!/zh-cn

Demo：http://elemefe.github.io/mint-ui/#!/

文檔：http://mint-ui.github.io/docs/#!/zh-cn

cnpm install mint-ui -D

------------------------------------------------
bootstrap  twitter 開源的自適應的組件
基於jquery的，使用前先引

柵格化系統——響應式工具===》移動+pc+pad
-----------------------
餓了麼：開源的基於vue的組件庫
elementui  pc端
MintUi   移動端

bower 前端包管理工具
npm  node包管理工具

---------------------

• 引包能夠經過

1.在index.html中引入(任何ui均可以這種方式)
2.也可經過模塊引到main.js裏面，最終打包到build裏面，包會變得大
  引入 main.js  入口文件，全局引入，任地方都能用

Vue.js UI框架 - element

文檔：http://element.eleme.io/#/zh-CN/component/installation

安裝：

npm i element-ui -D
配置：

http://element.eleme.io/#/zh-CN/component/quickstart
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },

引入：

  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-default/index.css';
   Vue.use(ElementUI);

------------------------------------------

• elementui

npm install element-ui -D  
 
-D  --save-dev
-S   --save
css-loader   引入css 
字體圖標  file-loader
style-loader
<style scoped lang="less">
less有兩個loader 
 less和less-loader

@color:red;
.height(@h){
   height:@h;
}
.my-grid{
    .height(30px);
    border:1px solid @clor;
}
--------------------------------------------------

• 也可按需引入：

   就須要按鈕
1.babel-plugin-component  須要引入這個組件
   cnpm install babel-plugin-component -D
  須要配置，只要跟babel相關的都須要配置

2.在.babelrc裏面配置：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }
  ]]]
}
3.若是你只但願引入部分組件，好比 Button 和 Select，那麼須要在 main.js 中寫入如下內容：
 引入：
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'
使用：
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或寫爲
 * Vue.use(Button)
 * Vue.use(Select)
 */

-----------------------------------------------