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

  • 
    
Logo

前往低代码交流专区

更多推荐