vue基础（二）

1.vue中的过滤器

vue.js允许你自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方：mustache插值和v-bind表达式，过滤器应该被添加在JavaScript表达式的尾部，由他的“管道”符指示：

1 .1定义一个Vue全局过滤

使用Vue的filter方法，第一个参数是过滤器的名称，第二个参数是处理函数

Vue.filter('过滤器名称'，函数)

过滤器小demo：

 <table class="table table-bordered table-hover table-striped">
          <thead>
              <tr>
                  <th>Id</th>
                  <th>name</th>
                  <th>Ctime</th>
                  <th>Operation</th>
              </tr>
          </thead>                                         //html代码部分
          <tbody>
              <tr v-for="item in search(keywords)" :key="item.id">
                  <td>{{ item.id }}</td>
                  <td>{{ item.name }}</td>
                  <td>{{ item.ctime | dataFormate}}</td>
                  <td><a href="" @click.prevent="del(item.id)">删除</a></td>
              </tr>
          </tbody>
      </table>
//过滤器
        Vue.filter('dataFormate',function(data){
            var dt =new Date();
            //yyyy-mm-dd
            var y=dt.getFullYear();
            var m=dt.getMonth()+1;
            var d=dt.getDate();
            return y+'-'+m+'-'+d;
        })
        //创建vue实例，得到ViewModel
        var vm=new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            keywords: '', //搜索关键字
            list: [
                { id: 1 ,name: '奔驰' ,ctime: new Date()},
                { id: 2 ,name: '奥拓' ,ctime: new Date()},
                { id: 3 ,name: '大众' ,ctime: new Date()}
            ]
           
        }

{{ item.ctime | dataFormate}}中的第一个参数item.ctime是data中数据，第二个参数是过滤器名称，两者之间用’’|’'隔开,当程序运行时，item.ctime的值会传递到过滤器，经过过滤器后，最终的结果是过滤器返回的值。过滤器中会将所接受到的参数中的默认时间格式替换成所定义的yyyy-mm-dd的格式，并返回

1.2定义一个私有过滤器

私有filters定义方式：

filters:{//私有局部过滤器，只能在==当前vm对象控制的view区域==进行使用
    dataFormat(input, pattern=""){//在参数列表中，通过pattern=“”来指定形参默认值，防止报错
    var dt=new Date（input）;
    //获取年月日
    var y=dt.getFullYear();
    var m=(dt.getMonth()+1).toString().padStart(2,'0');
    var d=dt.过滤器getDate().toString().padStart(2,'0');
    //如果传递进来的字符串类型，转为小写之后，等于yyyy-mm-dd，那么就返回年-月-日

定义私有过滤器 过滤器有两个条件【过滤器名称和处理函数】
过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，则优先调用私有过滤器指令

2.vue中的路由

1.什么是路由
后端路由：对于普通网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
前段路由：对于单页面应用程序来说，主要通过URL重点hash（#号）来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求不会包含hash相关内容；所以，单页面程序中的页面跳转主要用hash实现在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前段路由（区别于后端路由）

2.1在vue中使用vue-router

<router-link to"/login">登录</router-link>
<router-link to"/register">注册</router-link>
三.使用router-view组件来显示匹配到的组件
<router-view></router-view>
四.创建使用Vue.extend创建组件
//使用 Vue.extend来创建登录组件

注：https://blog.csdn.net/menxianfu/article/details/77341416 URL 中 ‘#’ 号的含义与作用
创建一个路由对象，当导入 vue-router包之后，在window全局对象中，就有了一个路由的构造函数，叫做VueRouter
在new路由对象的时候，可以为构造函数传递一个配置对象
配置对象中的 route表示【路由匹配规则】的意思，每个路由规则都是一个对象，这个规则对象身上有两个必须的属性
属性1 是path 表示监听那个路由连接地址
属性2 是component，表示如果路由是前边匹配到的path，则展示component属性对应的那个组件
注意：component的属性值，必须是一个组件的模板对象，不能说组件的引用名称

2.2路由重定向（这大佬写的很明白）

3.vue动画

为什么要使用动画？答：动画能提高用户的体验，帮助用户更好的理解页面中的功能

动画概念图片：1.使用 transition 元素，把需要被动画控制的元素包裹起来 ，transition元素是Vue官方提供的
2.自定义两组样式，来控制transition内部的元素实现动画
v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入
v-leave-to【这是一个时间点】是动画离开之后，离开的终止状态，此时，元素动画已经结束了
v-enter-active 【入场动画的时间段】
v-leave-active 【离场动画的时间段】
3.自定义V-前缀，第一步给transition标签加一个name，第二步修改style类名，改为.name值-xx格式
4.使用animate.css 使用第三方动画类库
第一步引入文件，第二步例1

<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
xxx标签
</transition>

例2：

<transition enter-active-class=" bounceIn" leave-active-class="bounceOut"> //若在transition标签中添加 :duration="200"则证明入场出场动画时长都是200毫秒
xxx标签设置 class="animated"                                                //:duration="{ enter:200, leave:400}"设置入场200，出场400
</transition>

5.动画-钩子函数（可理解为动画声明周期函数） 见vue官方文档！
// 注意：动画钩子函数的第一个参数：el表示 要执行动画的那个DOM元素，是个原生的js dom对象，大家可以认为，el是通过document.getElementById（‘’）方式获取到的原生JS DOM对象
注：需要在enter函数中写： el.offsetWidth //这句话，没有实际的作用，但是，如果不写，出不来动画效果，可以认为它会强制动画刷新
//第二个参数done（）可以让动画完成后立即消失
6.使用transition-group实现列表动画
注：在实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transitionGroup
如果要为 v-for 循环创建的元素设置动画，必须为每一个元素设置 :key属性
给transition-group添加appear属性，实现页面刚展示出来入场的效果 tag属性指定transition-group渲染为指定元素，如果不指定tag，默认渲染为span标签
注：通过 mode属性，设置组件切换时候的模式

4.vue组件

什么是组件：组件的出现，就是为了拆分Vue实例代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可
模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一；组件化：是从UI界面的角度进行划分的，前段的组件化，方便UI组件的重用
1.1使用Vue.extend 来创建全局的Vue组件 Vue.extend（{template：‘xxx’}）//通过template属性，指定了组件要展示的HTML结构
1.2使用Vue.component（‘组件的名称’，创建出来的组件模板对象）
例：

var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件</h3>’}）
vue.component('myCom1' , com1)

如果要使用组件，直接吧组件的名称，以HTML标签的形式，引入到页面中即可
如果使用 Vue.component定义全局组件的时候，组件名称使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之间，使用 - 链接 ， 如果不使用驼峰，则直接拿名称来使用即可
vue.component第一个参数：组件的名称，将来在引用的时候，就是以一个标签形式来引入它的，第二个参数：Vue.extend创建的组件，其中template就是组件将来要展示的HTML内容
注：无论是那种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素
组件中的data和methods：
1.组件可以有自己的data数据2.组件的data和实例的data有点不一样，实例中的data可以为一个对象，但是组件中的data必须是一个方法
3.组件中的data除了必须为一个方法之外，这个方法内部还必须返回一个！对象！才行
4.组件中的data数据，使用方式和实例中的data使用方式完全一样
组件切换：
1.见VUE学习文件夹中图片（缺点，只可以对2个组件进行来回切换）

4.2 组件传值

子组件中，默认无法访问到父组件中的data上的数据和methods中的方法
父组件，可以在引用子组件的时候，通过属性绑定{v-bind：}的形式，把需要传递给子组件的数据，以属性绑定的形式传递到子组件内部，供子组件使用。把父组件传递过来的xx属性，先在子组件中的 props数组中定义一下，才能使用这个数据
注意：
1.组件中的所有props中的数据，都是父组件传递给子组件的
2.子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过ajax请求回来的数据，都可以放到data身上，data上的数据都是可读可写的
3.不要直接修改props，因为每当父组件从新渲染后props里的值都会被重写父组件把方法转递给子组件：父组件向子组件传递方法，使用的事事件绑定机制；v-on，当我们自定义了一个事件属性之后，那么，子组件就能通过某些方式来调用传递进去的这个方法了
那么当点击子组件按钮的时候，如何拿到父组件传递过来的func方法，并调用这个方法？
答：this.$emit（‘func’）emit英文原意:是触发，调用，发射的意思
补充：ref获取DOM元素和组件