二八、vue2与vue1的区别（三）

26.vue2.0与vue1的区别

• 1. 在每个组件模板，不在支持片段代码 组件中模板:

      之前:
          <template>
              <h3>我是组件</h3><strong>我是加粗标签</strong>
          </template>
      现在:  必须有根元素，包裹住所有的代码
          <template id="aaa">
                  <div>
                      <h3>我是组件</h3>
                      <strong>我是加粗标签</strong>
                  </div>
          </template>
          <script>
              Vue.component('aaa',{
                 template:'#aaa'
             });
          </script>
     

• 1. 关于组件定义 Vue.extend 这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，咱也不用——废弃

     Vue.component(组件名称,{ 在2.0继续能用

       data(){}
       methods:{}
       template:
     

     });

     2.0推出一个组件，简洁定义方式： 也可以在外面定义

       var info={
         template:'#my-info'
     };
     Vue.component('my-info',info);
     

• 1. 生命周期 之前:

      init    
      created
      beforeCompile
      compiled
      ready        √    ->     mounted
      beforeDestroy    
      destroyed
     

     现在:

      beforeCreate    组件实例刚刚被创建,属性都没有
      created    实例已经创建完成，属性已经绑定
      beforeMount    模板编译之前
      mounted    模板编译之后，代替之前ready  *
      beforeUpdate    组件更新之前
      updated    组件更新完毕    *
      beforeDestroy    组件销毁前
      destroyed    组件销毁后          
     

• 1. 循环 2.0里面默认就可以添加重复数据

     arr.forEach(function(item,index){

     });

     去掉了隐式一些变量

      $index    $key
     

     之前:

      v-for="(index,val) in array"
     

     现在:

      v-for="(val,index) in array" 
     

• 1. track-by="id"
     变成 //可以重复添加相同的数据
• 1. 自定义键盘指令 之前：Vue.directive('on').keyCodes.ctrl=17;
     现在: Vue.config.keyCodes.ctrl=17 //用config装一些自己定义的内容;

• 1. 过滤器 之前: 系统就自带很多过滤 {{msg | currency}} {{msg | json}} //json已经变成默认输出; .... limitBy filterBy ..... 一些简单功能，自己通过js实现 到了2.0， 内置过滤器，全部删除了 lodash 工具库 _.debounce(fn,200) 自定义过滤器——还有

     Vue.filter('toDou',function(n){
         //alert(input);
         return n<10?'0'+n:''+n;
     });
     

     但是,自定义过滤器传参

     之前: {{msg | toDou '12' '5'}} 现在: {{msg | toDou('12','5')}}

27.组件通信:

• vm.$emit()

    vm.$on();
  
    父组件和子组件:
  
    子组件想要拿到父组件数据:
        通过  props
  
    之前，子组件可以更改父组件信息，可以是同步  sync
    现在，不允许直接给父级的数据，做赋值操作
  
    问题，就想更改：
        a). 父组件每次传一个对象给子组件, 对象之间引用    √
        b). 只是不报错, mounted中转
  

  可以单一事件管理组件通信: vuex var Event=new Vue();

  Event.$emit(事件名称, 数据)

  Event.$on(事件名称,function(data){

  //data
  

  }.bind(this));

  debounce 废弃

  ->   lodash
      _.debounce(fn,时间)       
  

28.vue2动画

• 2.0以后 transition 组件

  运动东西(元素，属性、路由....)

  class定义: .fade-enter{} //初始状态 .fade-enter-active{} //变化成什么样 -> 当元素出来(显示)

  .fade-leave{} .fade-leave-active{} //变成成什么样 -> 当元素离开(消失)

                + beforeEnter(el){
                      console.log('动画enter之前');
                  },
                  enter(el){
                      console.log('动画enter进入');
                  },
                  afterEnter(el){
                      console.log('动画进入之后');
                      el.style.background='blue';
                  },
                  beforeLeave(el){
                      console.log('动画leave之前');
                  },
                  leave(el){
                      console.log('动画leave');
                  },
                  afterLeave(el){
                      console.log('动画leave之后');
                      el.style.background='red';
                  }
                + <transition name="fade"
                      @before-enter="beforeEnter"
                      @enter="enter"
                      @after-enter="afterEnter"
                      @before-leave="beforeLeave"
                      @leave="leave"
                      @after-leave="afterLeave">
                      <p v-show="show"></p>
                  </transition>
  

  如何animate.css配合用？

  <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
          //    <p v-show="show"></p>
          //    <p v-show="show" class='animated></p>
          </transition>
  

  多个元素运动:

  <transition-group enter-active-class="" leave-active-class="">
      <p :key=""></p>
      <p :key=""></p>
  </transition-group>       
  

29.vue2 路由

• http://router.vuejs.org/zh-cn/index.html 基本使用:

  1. 布局 主页

  2. 路由具体写法 //组件 var Home={

      template:'<h3>我是主页</h3>'
     

     }; var News={

      template:'<h3>我是新闻</h3>'
     

     };

     //配置路由 const routes=[

      {path:'/home', component:Home},
      {path:'/news', component:News},
     

     ];

     //生成路由实例 const router=new VueRouter({

      routes
     

     });

     //最后挂到vue上 new Vue({

      router,
      el:'#box'
     

     });

  3. 重定向 之前 router.rediect 废弃了 {path:'*', redirect:'/home'}

• 路由嵌套:

  /user/username
  
  const routes=[
      {path:'/home', component:Home},
      {
          path:'/user',
          component:User,
          children:[  //核心
              {path:'username', component:UserDetail}
          ]
      },
      {path:'*', redirect:'/home'}  //404
  ];
  
  + 路由实例方法:
        router.push({path:'home'});  //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
        router.replace({path:'news'}) //替换路由，不会往历史记录里面添加
    ------------------------------------------
    vue-cli
  
    1 vue init webpack-simple vueDemo
    2 cd vueDemo
    3 npm/cnpm install  //出现错误重新
    4 npm run dev  (自动打开)
  
    5 cnpm install vue-router --save  (下载路由)
    ------------------------------------------
    npm install
    ------------------------------------------
    脚手架:  vue-loader
        1.0  -> 
        new Vue({
          el: '#app',
          components:{App}
        })    
        2.0->
        new Vue({
          el: '#app',
          render: h => h(App)
        })
    ------------------------------------------
    vue2.0 
        vue-loader和vue-router配合
    ------------------------------------------          
    style-loader    css-loader
  
        style!css

30.vue ui组件

• vue问题:论坛http://bbs.zhinengshe.com

• UI组件

  • bootstrap:twitter 开源

             简洁、大方
             官网文档                
             基于 jquery               
             栅格化系统+响应式工具  (移动端、pad、pc)
    

• bower 前端包管理器 选择版本--jquery#1.11.1

      自动解决依赖
  

• npm node包管理器 选择版本--jquery@1.11.1

• 饿了么团队开源一个基于vue 组件库

  elementUI    PC
  MintUI        移动端
  

• elementUI:

  如何使用
  

  官网:http://element.eleme.io/ 使用:

  1. 安装 element-ui npm i element-ui -D

     npm install element-ui --save-dev

     // i -> install // D -> --save-dev // S -> --save

  2. 引入 main.js 入口文件 import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css'

     全部引入

  3. 使用组件 Vue.use(ElementUI)

     css-loader 引入css 字体图标 file-loader

     less:

      less
      less-loader     
     

• 按需加载相应组件: √

  就需要 按钮
  

  1. babel-plugin-component cnpm install babel-plugin-component -D
  2. .babelrc文件里面新增一个配置 "plugins": [["component", [

      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-default"
      }
     

     ]]]
  3. 想用哪个组件就用哪个 引入:

      import {Button,Radio} from 'element-ui'
     

     使用:

      a). Vue.component(Button.name, Button);  个人不太喜欢
      b). Vue.use(Button);   √
     

• 发送请求:

  vue-resourse        交互
  
  axios
  

• element-ui -> pc

  mint-ui

  移动端 ui库
  
  http://mint-ui.github.io/
  

  1. 下载 npm install mint-ui -S

     -S --save

  2. 引入 import Vue from 'vue'; import Mint from 'mint-ui'; import 'mint-ui/lib/style.css' Vue.use(Mint);

     按需引入: import { Cell, Checklist } from 'minu-ui'; Vue.component(Cell.name, Cell); Vue.component(Checklist.name, Checklist);

  http://mint-ui.github.io/docs/#!/zh-cn2 Mint-ui-demo: 看着手册走了一遍

  https://github.com/itstrive/striveCode/tree/js/vue2.0-Mint-ui-demo

31.vuex --集中式管理数据

• 1、cnpm install vuex
• 2 提供两个方法：
  • mapActions
  • mapGetters:

32.其他

vue: 两种:

    1. 直接页面级开发，script直接引入vue
    2. 工程性开发  , webpack+loader\  vue-cli

---

webpack 配置多文件入口

webpack 打包完很大? bundle.js build.js a). webpack代码拆分: code-spliting b). 提取公共(css,js) c). 预渲染: prerender-spa-plugin d). 后台——开启压缩，gz e). 异步加载组件

    require.ensure

---

vuex:

Vue 10月1 -> 2.0变的简单

---

vue

组件之间通信: vue1.0 -> props -> 子组件可以更改父组件数据 .sync 解决问题:

    0. props
    1. $emit   单一事件管理    Store.js
        var Event=new Vue()
        export default Event
    2. 对象之间引用    √
        msg:'welcome'  -> 子级
        msg:{
            title:'welcome' 
        }
        msg.title
    3. vuex  管理状态

---

this.$el

src/ $http('../src/data/api.')

localhost:8080#/home

localhost:8080/home

main.js ->const router=new VueRouter({})

use

new App({
    router
})

new Vuex.Store()
    ->  构造函数(类) 首字母大写

vue init

webpack2.0-> 端口 8080 8081 8082 8083....

module:{ loaders:[ {test:/.css$/, loader:'style!css'} ] }

module:{ rules:[ {test:/.css$/, loader:'style-loader!css-loader'} ]

}

全家桶

axios——不能use

Vue.prototype.$http=axios;

this.$http.get

loading install

vue init webpack-simple

webpack

this -> new Vue()

this -> 原生jsDOM对象

vue中引入百度地图?

1. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">    ->  需要index.html
2. map.vue
    template
        <div id="div1" :style="style"></div>
    script
        export default{
            data:(){
                style:{
                    width:'100%',
                    height:this.height+'ox'
                }
            },
            props:{
                height:{
                    type:Number,
                    default:300
                },
                longitude:{},
                latitude:{}
            },
            mounted(){
                var map = new BMap.Map("div1");
                var point = new BMap.Point(this.longitude,this.latitude);
                map.centerAndZoom(point, 12);
                var marker = new BMap.Marker(point);// 创建标注
                map.addOverlay(marker);
            }
        }
----------------------------------
App.vue
template:
    <MapView :height="300" :latitude=""></MapView>

import MapView

export default{
    componets:{
        MapView
    }
    mounted:
}
--------------------------------

vue: 指令 属性 事件 数据: data,props/computed

生命周期

---

http://bbs.zhinengshe.com

Vue2.0 -> React

json diff

package.json

cnpm install vue-resource -D

node_modules -> rm -rf

-g -> 命令环境用 webpack