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

26.vue2.0与vue1的区别在每个组件模板，不在支持片段代码组件中模板:之前:template>我是组件我是加粗标签template>现在:必须有根元素，包裹住所有的代码template id="aaa">div>我是组件

荼荼荼蘼

5897人浏览 · 2017-05-11 21:57:39

荼荼荼蘼 · 2017-05-11 21:57:39 发布

26.vue2.0与vue1的区别

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

 之前:
     <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);
```

生命周期之前:

 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     
```

按需加载相应组件: √

就需要 按钮

babel-plugin-component cnpm install babel-plugin-component -D

.babelrc文件里面新增一个配置 "plugins": [["component", [

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

]]]

想用哪个组件就用哪个引入:

 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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^