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 [email protected] --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 [email protected] --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)
 */

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