vue学习回顾第二天

自动获取焦点

• 方式一：dom版

//通过ref属性对dom的引用，随意命名，不能重复
   <input type="text" v-model="newId"  ref="inputRefId"> 品牌名称:
// 通过this.$refs.ref的值来获取dom
     this.$refs.inputRefId.focus()

• 方式二：通过自定义指令获取焦点
  自定义指令通过Vue.directive()创建，它包含两个参数，一个是自定义指令的名字，可以随便取，但是全部小写；另一个是一个对象，表示自定义指令的配置项。

    Vue.directive('myfocus',{
        // inserted钩子函数，它表示自定义指令插入到标签中的时候就执行
        // inserted钩子函数有两个参数（el,binding） el表示使用自定义指令的元素，binding表示自定义指令的信息
        inserted(el,binding){
            console.log(el);
            console.log(binding);
            el.focus()
        }
    }),

自定义指令的其他使用

<input type="text" v-model="newId" v-mycolor="color">
 //创建v-mycolor指令
        Vue.directive('mycolor',{
            inserted(el,binding){
                // binding.value可以获取传入自定义指令中的属性的值
                el.style.color=binding.value;
            }
        }),  

过滤器

• 创建：通过vue.filter()创建

//使用vue.filter（）创建，有两个参数，过滤器名字和处理函数，函数有一个默认参数，表示要过滤的数据
    Vue.filter("fmtTime",function (time,seprator) {
        console.log(time);
        let y=time.getFullYear();
        let m=time.getMonth()+1;
        let d=time.getDay();
        return y+seprator+m+seprator+d;
    });

• 使用：过滤器的使用 在需要过滤的数据后面加上管道符 | 过滤器名称

<td>{{item.ctime |fmtTime('-')  }}</td>

计算属性

• 计算属性出现的目的是解决模板中放入过多的逻辑会让模板过重且难以维护的问题；计算属性是基于它们的依赖进行缓存的

computed:{
            // 这里fullName就是一个计算属性，它是一个函数，但这个函数可以当成属性来使用
            yourName(){
                return this.firstName+this.lastName;
            }
        }
//使用
<p>{{yourName}}</p>

watch:侦听器,用来观察和响应 Vue 实例上的数据变动

  // watch监听器用来监听data中数据的值，只要监听的数据一变化，它就能执行相应的函数
        // 创建监听器通过watch属性，它是一个对象
        watch:{
            //函数名是要监听的data中的名字
            firstName(newVal,oldVal){
                this.fullName=newVal+this.lastName;
            },
            lastName(newVal,oldVal){
                this.fullName=this.firstName+newVal;
            }
          
        }
    })

深度监听：监听对象时使用

 watch: {
            // 监听对象不能使用下面这种写法，要使用深度监听
            // user(newVal, oldVal) {
            //   console.log('改变了');
            // }

            user: {
                // hanlder这个函数名字固定
                handler (newval) {
                    console.log('改变了');
                    console.log(newval.name);
                },
                // deep:true表示深度监听
                deep: true
            }
        }

computed和watch的使用

• 通常情况下用computed，当需要在数据变化时执行异步或开销较大的操作时，用watch

搜索功能的实现

computed: {
            newList() {
                // var that = this
                // function isContainStr (value) {
                //   // console.log(this);
                //   // !==-1就表示满足条件，能够找到该字符串
                //   return value.name.indexOf(that.searchVal) !== -1
                // }

                // var tempList = this.list.filter(isContainStr)

                // return tempList

                // es6箭头中的this是在哪儿定义就指向谁
                return this.list.filter(value => value.name.indexOf(this.searchVal) !== -1)
            }
        }

axios

• 浏览器与服务器数据交互是遵循http协议的，当浏览器要访问服务器的时候，浏览器需要将相关请求数据提交给服务器（例如：浏览器信息，url地址，参数等），通常是通过请求报文来提交的

• 请求报文的格式分为：

  1. 请求报文行
  2. 请求报文头
  3. 请求报文体

http响应报文
当浏览器请求服务器的时候，服务器需要将数据返回给浏览器，这种数据是通过响应报文响应回浏览器的

• 响应报文的格式分为：
  1. 响应报文行
  2. 响应报文头
  3. 响应报文体
• get请求

    methods: {
      getData: function () {
        var url = 'http://157.122.54.189:9093/api/getprodlist'
        axios.get(url)
          .then(res => {
            this.list = res.data.message
            console.log(this.list);
          })
          .catch(error => {
            console.log(error);
          })
      }
    }

• post请求

 axios.post('http://157.122.54.189:9093/api/addproduct', {
                name: '哈哈哈'
            })
                .then(res => {
                    console.log(res.data);
                })
                .catch(error => {
                    console.log(error);
                })

获取数据和删除数据

<script>
  var vm = new Vue({
    el: "#app",
    data: {
      list: []
    },
    mounted () {
      this.getList()
    },
    methods: {
      getList: function () {
        var url = 'http://157.122.54.189:9093/api/getprodlist'
        axios.get(url)
          .then(res => {
            this.list = res.data.message
          })
          .catch(error => {
            console.log(error);
          })
      },
      deleteData: function (id) {
        var url = 'http://157.122.54.189:9093/api/delproduct/'+id
        axios.get(url)
          .then(res => {
            this.getList()
          })
          .catch(error => {
            console.log(error);
          })
      }
    }
  })
</script>

vue过渡和动画的几种方式

1. 方式一：transition结合css实现过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2.js"></script>
    <style>
        /* 定义进入过渡的开始状态 ，离开过渡的结束状态*/
        .slide-enter, .slide-leave-to {
            padding-left: 100px;
        }
        /* 定义过渡的状态 */
        .slide-enter-active, .slide-leave-active {
            transition: all 2s;
        }
        /* 定义进入过渡的结束状态，离开过渡的开始状态 */
        .slide-enter-to, .slide-leave {
            padding-left: 0px;
        }

    </style>
</head>
<body>
<div id="app">
    <!--用transition将要过渡的元素包裹，name就是类名前缀-->
    <transition name="slide">
    <h1 v-if="isShow">qinduankaifa</h1>
    </transition>
    <button @click="isShow=!isShow" style="color: red;">显示/隐藏</button>
</div>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            isShow:true
        }
    })
</script>
</body>
</html>

2 transition结合animate.css实现过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2.js"></script>
  <link rel="stylesheet" href="animate.css">
</head>
<body>
<div id="app">
    <!--
        enter-active-class 定义进入动画的状态
        leave-active-class 定义离开动画的状态
       -->
    <transition
            enter-active-class="animated zoomIn"
            leave-active-class="animated hinge"
    >
    <h4 v-if="isShow">一见无始道成空</h4>
    </transition>
    <button @click="isShow=!isShow" style="color: red;">显示/隐藏</button>
</div>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            isShow:true
        }
    })
</script>
</body>
</html>

3 transition结合钩子函数实现过渡

1. 过渡动画进入
   before-enter 过渡动画进入之前，一般在这个方法中定义目标元素的初始位置
   enter 过渡动画进入中，在这个方法中定义目标元素的结束位置
   after-enter 过渡动画结束后，通常在这个方法里面重置初始值
   enter-cancelled 取消过渡动画时被调用

2. 过渡动画离开
   before-leave 动画离开之前触发
   leave 过渡动画进入中触发
   after-leave 过渡动画离开结束后
   leave-cancelled 取消过渡动画时被调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue2.js"></script>

</head>
<body>
<div id="app">
    <!--
          v-on:before-enter="beforeEnter" 进入动画之前
          v-on:enter="enter" 进入动画中
          v-on:after-enter="afterEnter" 进入动画完成后

          v-on:before-leave="beforeLeave"
          v-on:leave="leave"
          v-on:after-leave="afterLeave"
       -->
    <transition
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:after-enter="afterEnter"

            v-on:before-leave="beforeLeave"
            v-on:leave="leave"
            v-on:after-leave="afterLeave">
    <h1 v-if="isShow">qinduankaifa</h1>
    </transition>
    <button @click="isShow=!isShow" style="color: red;">显示/隐藏</button>
</div>
<script>
    let vm=new Vue({
        el:"#app",
        data:{
            isShow:true
        },
        methods:{
            beforeEnter(el){
                el.style.paddingLeft='100px';
            },
            enter(el,done){
               // done()
                let step=1;
                let interval=setInterval(()=>{
                    el.style.paddingLeft=(100-step)+"px";
                    step++;
                    if(step===100){
                        clearInterval(interval);
                        //done()一定要调用，否则会报错
                        done()
                    }
                },10)
            },
            afterEnter(el){

            },
            beforeLeave(el){

            },
            leave(el,done){
                //done()
                let step=0;
                let interval=setInterval(()=>{
                    el.style.paddingLeft=step+"px";
                    step++;
                    if(step===100){
                        clearInterval(interval);
                        done()
                    }
                },10)
            },
            afterLeave(el){

            }
        }
    })
</script>
</body>
</html>

动画的删除

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="./vue2.js"></script>
  <link rel="stylesheet" href="./animate.css">
  <style>
    #app {
      width: 600px;
      margin: 10px auto;
    }

    .tb {
      border-collapse: collapse;
      width: 100%;
    }

    .tb th {
      background-color: #0094ff;
      color: white;
    }

    .tb td,
    .tb th {
      padding: 5px;
      border: 1px solid black;
      text-align: center;
    }

    .add {
      padding: 5px;
      border: 1px solid black;
      margin-bottom: 10px;
    }
    .tipbox {
      width: 200px;
      height: 100px;
      background: lightyellow;
      position: absolute;
      top: 25%;
      left: 50%;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="add">
      编号:
      <input type="text" v-model="newId"> 品牌名称:
      <input type="text" v-model="newName">
      <input type="button" value="添加" @click="addData">
    </div>

    <div class="add">
      品牌名称:
      <input type="text" placeholder="请输入搜索条件">
    </div>

    <div>
      <table class="tb">
        <tr>
          <th>编号</th>
          <th>品牌名称</th>
          <th>创立时间</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime}}</td>
          <td>
            <!-- 将index作为参数传入 -->
            <a href="#" @click="showBox(item.id, index)">删除</a>
          </td>
        </tr>
        <tr v-if="list.length === 0">
          <td colspan="4">没有品牌数据</td>
        </tr>
        <!-- 动态生成内容tr -->
      </table>
    </div>
    <transition
      enter-active-class="animated fadeInRight"
      leave-active-class="animated fadeOutRight"
    >
        <div class="tipbox" v-if="isShow">
          <h3>是否删除{{tempId}}号</h3>
          <button @click="confirmDel">确定</button>
          <button @click="cancelDel">取消</button>
        </div>
    </transition>
  </div>
</body>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      newId: '',
      newName: '',
      isShow: false,
      tempId: '',
      tempIndex: '',
      list: [
        {id: 1, name: 'CC', ctime: new Date()},
        {id: 2, name: 'LV', ctime: new Date()},
        {id: 3, name: 'AA', ctime: new Date()},
        ]
    },
    methods: {
      deleteData (idx) {
        this.list.splice(idx, 1)
      },
      addData () {
        this.list.push({id: this.newId, name: this.newName, ctime: new Date()})
      },
     showBox(id,index){
          this.tempId=id;
          this.tempIndex=index;
          this.isShow=true
     },
    confirmDel(){
          this.isShow=false;
          this.deleteData(this.tempIndex)
    },
        cancelDel(){
          this.isShow=false
        }
    }
  })
</script>

</html>