333

引入vue2.0:
    bower info vue 查看版本
    http://vuejs.org/

到了2.0以后，有哪些变化?

• 1.在每个组件模板，不在支持片段代码
  组件中模板:
  之前:
  <template>
  <h3>我是组件</h3>
  <strong>我是加粗标签</strong>
  </template>
  现在: 必须有根元素，包裹住所有的代码
  <template id="aaa">
  <div>
  <h3>我是组件</h3>
  <strong>我是加粗标签</strong>
  </div>
  </template>

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

    Vue.component(组件名称,{    //在2.0继续能用
        data(){}
        methods:{}
        template:
    });
  

  • 2.0推出一个组件，简洁定义方式：
    var Home={
    template:'' //-> Vue.extend()
    };

• 3.生命周期
  之前:
  init
  created
  beforeCompile
  compiled
  ready √ -> mounted
  beforeDestroy
  destroyed
  现在:
  beforeCreate 组件实例刚刚被创建,属性都没有
  created 实例已经创建完成，属性已经绑定
  beforeMount 模板编译之前
  mounted 模板编译之后，代替之前ready *
  beforeUpdate 组件更新之前
  updated 组件更新完毕 *
  beforeDestroy 组件销毁前
  destroyed 组件销毁后

• 4.循环

  • 2.0里面默认就可以添加重复数据；

  • 去掉了隐式一些变量
    $index $key

    之前:
    v-for="(index,val) in array"
    现在:
    v-for="(val,index) in array"
    其实是效仿js原生的forEach
    arr.forEach(function(item,index){
    });

• 5.track-by="id"变成:key="id"
  变成：
  <li v-for="(val,index) in list" :key="index">

• 6.自定义键盘指令
  之前：Vue.directive('on').keyCodes.ctrl=17;
  现在: Vue.config.keyCodes.ctrl=17;

• 7.过滤器
  之前:
  系统就自带很多过滤
  {{msg | currency}}
  {{msg | json}}
  ....
  limitBy
  filterBy
  .....
  一些简单功能，自己通过js实现

    到了2.0， 内置过滤器，全部删除了
    类似lodash    工具库 _.debounce(fn,200)
  
    自定义过滤器——还有
        但是,自定义过滤器传参
        之前: {{msg | toDou '12' '5'}}
        现在:     {{msg | toDou('12','5')}}
  

• 8.组件通信:
  vm.$emit()
  vm.$on();

    父组件和子组件:
  
    子组件想要拿到父组件数据:
        通过  props
  
    之前，子组件可以更改父组件信息，可以是同步  sync
    现在，不允许直接给父级的数据做赋值操作，而且sync已经被去掉了
  

  问题，就想更改：
  a). 方法一：父组件每次传一个对象给子组件, 对象之间引用 √
  b). 只是不报错, mounted中转，这种方法改不了父组件数据

---

• 可以用单一事件管理组件通信: （类似于自己写一个vuex）
  var Event=new Vue();

  Event.$emit(事件名称, 数据);    //发送
  
  Event.$on(事件名称,function(data){  //接收
      //data
  }.bind(this));
  

<div class="box">
        <aaa></aaa>
        <bbb></bbb>
        <ccc></ccc>
    </div>
    <template id="aaa">
        <div>
            <strong>我是A组件---{{a}}</strong>
            <input type="button" value="发送数据" @click="send">
        </div>
    </template>
    <template id="bbb">
        <div>
            <strong>我是B组件---{{b}}</strong>
            <input type="button" value="发送数据" @click="send">
        </div>
    </template>
    <template id="ccc">
        <div>
            <strong>我是C组件---{{c}}</strong>
            <input type="button" value="发送数据" @click="send">
            <h2>接受a数据---{{a}}</h2>
            <h2>接受b数据---{{b}}</h2>
        </div>
    </template>
    <script>
        //注册一个单一事件
        var vm = new Vue();

        var A = {
            data(){
                return {a:"我是A数据"}
            },
            methods:{
                send(){
                    vm.$emit("sendA",this.a);
                }
            },
            template:"#aaa"
        };
        var B = {
            template:"#bbb",
            methods:{
                send(){
                    vm.$emit("sendB",this.b);
                }
            },
            data(){
                return {b:"B数据"};
            }
        };
        var C = {
            template:"#ccc",
            methods:{
                send(){
                    vm.$emit("sendC",this.c);
                }
            },
            data(){
                return {a:"",b:"",c:"C数据"};
            },

            mounted(){
                vm.$on("sendA",function (daA) {
                    this.a = daA;
                }.bind(this));
                vm.$on("sendB",function (daB) {
                    this.b = daB;
                }.bind(this));
                vm.$on("sendC",function (da) {
                    this.a = da;
                    this.b = da;
                }.bind(this));
            }
        };

        new Vue({
            el:".box",
            components:{
                aaa:A,
                bbb:B,
                ccc:C
            }
        })
    </script>

broadcast和dispatch被弃

---

debounce    废弃
改用    ->   lodash的_.debounce(fn,时间)

---

vue动画

---

• transition 之前以属性方式呈现
  <p transition="fade"></p>

    .fade-transition{}
    .fade-enter{}
    .fade-leave{}
  

<head>
    <script src="../vue1.0.js"></script>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .anim-transition{
            transition: 1s all ease;
        }
        .anim-enter{
            opacity: 0;
        }
        .anim-leave{
            opacity: 0;
            transform: translateX(200px);
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="button" value="动画" @click="show=!show" >
        <div class="box1" v-show="show" transition="anim"></div>
    </div>
    <script>
        new Vue({
            el:".box",
            data:{
                show:false
            }
        })
    </script>
</body>

---

• 到2.0以后 transition 组件
  <transition name="fade">
  运动东西(元素，属性、路由....)
  </transition>

    class定义:
    .fade-enter{}   //初始状态
    .fade-enter-active{}  //变化成什么样  ->  当元素出来(显示)
  
    .fade-leave{}
    .fade-leave-active{} //变成成什么样   -> 当元素离开(消失)
  
    transition还有六个事件，事件名为@before-enter/@enter/@after-enter/...，可以在对应的时间点进行相应的设计
  

<head>
    <script src="./vue.js"></script>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .anim-enter-active,.anim-leave-active{
            transition: 1s all ease;
        }
        .anim-enter-active{
            opacity: 1;
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .anim-enter{
            opacity: 0;
            width: 100px;
            height: 100px;
        }
        .anim-leave-active{
            opacity: 0;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="button" value="动画" @click="show=!show" >
        <transition name="anim" @before-enter="showMsg">
            <div class="box1" v-show="show"></div>
        </transition>
    </div>
    <script>
        new Vue({
            el:".box",
            data:{
                show:false
            },
            methods:{
                showMsg(){
                    alert("before-enter");
                }
            }
        })
    </script>
</body>

• 如何animate.css配合用？
  <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
  <p v-show="show"></p>
  </transition>

• 多个元素运动:
  <transition-group enter-active-class="" leave-active-class="">
  <p :key=""></p>
  <p :key=""></p>
  </transition-group>

<div id="box">
    <input type="text" v-model="show">
    <transition-group enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
        <p v-show="show" v-for="(value,index) in lists" :key="1">{{value}}</p>
    </transition-group>
</div>
<script>
    new Vue({
        el:"#box",
        data:{
            show:"",
            list:["apple","banana","orange","pear"]
        },
        computed:{
            lists:function () {
                var arr = [];
                this.list.forEach(function (val) {
                    if (val.indexOf(this.show)!=-1){
                        arr.push(val);
                    }
                }.bind(this));
                return arr;
            }
        }
    })
</script>

---

vue2.0 路由:

关于路由的学习中文网址：http://router.vuejs.org/zh-cn/index.html

基本使用:

• 1.布局
  <router-link to="/home">主页</router-link>

    <router-view></router-view>
  

• 2.路由具体写法
  //组件
  var Home={
  template:'<h3>我是主页</h3>'
  };
  var News={
  template:'<h3>我是新闻</h3>'
  };

    //配置路由
    const routes=[
        {path:'/home', componet:Home},
        {path:'/news', componet:News},
    ];
  
    //生成路由实例
    const router=new VueRouter({
        routes
    });
  
    //最后挂到vue上
    new Vue({
        router,
        el:'#box'
    });
  

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

<div class="box1">
    <router-link to="/home">主页</router-link>
    <router-link to="/news">新闻</router-link>
    <router-view></router-view>
</div>
<script>
    //1.首页、新闻组件
    var Home = {
        template:"<h2>我是主页</h2>"
    };
    var News = {
        template:"<h2>我是新闻</h2>"
    };

    //2.配置路由
    var routes = [
        {path:"/home",component:Home},
        {path:"/news",component:News},
        {path:"*",redirect:"/home"}
    ];

    //3.生成路由实例
    var router = new VueRouter({
        routes : routes    //可以只写成一个routes
    });

    //4.最后挂到vue上
    new Vue({
        router:router,
        el:".box1"
    })
</script>

• 4.路由嵌套:
  /user/username

    const routes=[
        {path:'/home', component:Home},
        {
            path:'/user',
            component:User,
            children:[  //核心
                {path:'username', component:UserDetail}
            ]
        },
        {path:'*', redirect:'/home'}  //404
    ];
  

---

传参：/user/strive/age/10
:id
:username
:age

<div class="box1">
    <router-link to="/home">主页</router-link>
    <router-link to="/user">用户</router-link>
    <router-view></router-view>
</div>
<script>
    //1、准备首页、新闻组件
    var Home = {
        template:"<h2>我是主页</h2>"
    };
    var Users = {
        template:"<div><h2>我是用户</h2>" +
        "<router-link to='/user/wang/age/10'>wang</router-link><br>" +
        "<router-link to='/user/ma/age/20'>ma</router-link><br>" +
        "<router-link to='/user/liu/age/30'>liu</router-link>" +
        "<router-view></router-view></div>"
    };
    var User = {
        template:"<h3>{{$route.params}}</h3>"
    };

    //2.配置路由
    var routes = [
        {path:"/home",component:Home},
        {path:"/user",component:Users,children:[
            {path:':userName/age/:age',component:User}
        ]},
        {path:"*",component:Home},
    ];

    //3.生成路由实例
    var router = new VueRouter({
        routes
    });

    //4.最后挂到vue上
    new Vue({
        router,
        el:".box1"
    });
</script>

---

路由实例方法:
    router.push({path:'home'});  //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
    router.replace({path:'news'}) //替换路由，不会往历史记录里面添加

---

vue-cli脚手架

脚手架: 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配合

---

• 加载css需要两个加载器：
  • style-loader、css-loader
  • 顺序必须要按照：style!css，不可以颠倒。

---

多做项目

444

<div style="display:none">
vue问题:
论坛
http://bbs.zhinengshe.com
</div>

---

• UI组件

  • 别人提供好一堆东西

  • 目的:
    为了提高开发效率；
    功能。

  • 原则: 拿过来直接使用

• 开发时，一般直接使用vue-cli 生成-> vue-loader进行开发。

• 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.想用哪个组件就在main里面写入以下内容用哪个
  引入:
  import {Button,Radio} from 'element-ui'
  使用:
  a). Vue.component(Button.name, Button); 个人不太喜欢
  b). Vue.use(Button); √

---

• 发送请求:
  vue-resourse，交互，但是现在不推荐使用。
  推荐使用axios。

---

mint-ui -> 移动端 ui库

• element-ui -> pc
• 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

自定义vue全局组件：

• 使用：
  <Loading></Loading>

vuex

• 集中式管理组件状态（数据）；

• 官网：http://vuex.vuejs.org

• vuex提供两个非常靠谱的方法：

  • mapAction：管理所有的事件；
  • mapGetters：获取数据。

• 安装：cnpm install vuex -d

vue仿手机新闻站

• 1.拿到静态页面，也可以用vue进行布局；
• 2.用的是假数据；

做项目基本流程：

一、规划组件结构：

• 1.Nav.vue；
• 2.Header.vue；
• 3.Home.vue。

二、编写对应路由

• vue-router；

三、具体编写每个组件流程。