vue-day02-生命周期、过滤器、动画

有钱啊
118 阅读1分钟

一、vue生命周期

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destoryed
<body>

  <div id="app">
    <p>{{ message }}</p>
    <input type="button" @click="change" value="更新数据" />
    <input type="button" @click="destroy" value="销毁" />
  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        message: "Welcome Vue"
      },
      methods: {
        change() {
          this.message = 'fly is me';
        },
        destroy() {
          vm.$destroy();
        }
      },
      beforeCreate: function () {
        console.group('beforeCreate 创建前状态===============》');
        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
        console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
        console.log("%c%s", "color:red", "message: " + this.message);//undefined
      },
      created: function () {
        console.group('created 创建完毕状态===============》');
        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
        console.log("%c%s", "color:green", "data   : " + this.$data); //[object Object]  =>  已被初始化
        console.log("%c%s", "color:green", "message: " + this.message); //Welcome Vue  =>  已被初始化

      },
      beforeMount: function () {
        console.group('beforeMount 挂载前状态===============》');
        console.log("%c%s", "color:green", "el     : " + (this.$el)); //已被初始化
        console.log(this.$el); // 当前挂在的元素
        console.log("%c%s", "color:green", "data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:green", "message: " + this.message); //已被初始化
      },
      mounted: function () {
        console.group('mounted 挂载结束状态===============》');
        console.log("%c%s", "color:green", "el     : " + this.$el); //已被初始化
        console.log(this.$el);
        console.log("%c%s", "color:green", "data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:green", "message: " + this.message); //已被初始化
      },
      beforeUpdate: function () {
        alert("更新前状态");
        console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
        console.log("%c%s", "color:green", "el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:green", "data   : " + this.$data);
        console.log("%c%s", "color:green", "message: " + this.message);
        alert("更新前状态2");
      },
      updated: function () {
        console.group('updated 更新完成状态===============》');
        console.log("%c%s", "color:green", "el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:green", "data   : " + this.$data);
        console.log("%c%s", "color:green", "message: " + this.message);
      },
      beforeDestroy: function () {
        console.group('beforeDestroy 销毁前状态===============》');
        console.log("%c%s", "color:red", "el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red", "data   : " + this.$data);
        console.log("%c%s", "color:red", "message: " + this.message);
      },
      destroyed: function () {
        console.group('destroyed 销毁完成状态===============》');
        console.log("%c%s", "color:red", "el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red", "data   : " + this.$data);
        console.log("%c%s", "color:red", "message: " + this.message)
      }
    })
  </script>
</body>

vue 组件生命周期

初始

beforeCreate   

created  

  最快发送ajax

挂载

beforeMounte   

mounted

  最快操作DOM元素

更新

beforeUpdate  

updated    

  更新里面操作数据一定要判断

销毁

beforeDestroy 

destoryed

二、vue-resource发送网络请求

发送网络请求

  1. xhr

  2. jquery ajax

  3. vue-resource

只能在vue的基础上才能使用，2.0 之后不更新

   created() {
       // console.log(this.$http)

       // get
       this.$http.get('http://jsonplaceholder.typicode.com/todos').then(res => {
         console.log(res)
       })

       // post

       // this.$http.post(url,params,headers).then(res => {
       //   console.log(res)
       // })


     }

  1. axios
    可以使用在任意的框架中 ```js new Vue({ el: "#app", data: {

    }, async created() { console.log(axios)

    // get const { data } = await axios.get('jsonplaceholder.typicode.com/todos') console.log(data)

    // post

    // this.$http.post(url,params,headers).then(res => { // console.log(res) // })

    }, methods: { } }) ``` 模拟接口

json-server

  1. npm i json-server -g

  2. 新建json文件

  3. 运行json文件

json-server --watch data.json  

--watch 监听文件变化

--port 设置端口号 默认3000  

--host 设置ip  

查找 

  全部查找  

    get  http://localhost:3000/data

  根据id查找

    get  http://localhost:3000/data/:id 
  
  属性查找

    get  http://localhost:3000/data?id = id  

  分页查找 

    _page 页码 
    _limit 每一页的条数   
    get  http://localhost:3000/data?_page=1&_limit=2
    _start 从第几条开始
    _end 到第几条结束
    get  http://localhost:3000/data?_start=1&_end=2

  模糊查找

   http://localhost:3000/data?q=fly

添加  

    post  axios.post('http://localhost:3000/data',{name:'fly'})

更新  

    post  axios.put('http://localhost:3000/data/1',{name:'fly'})

删除

    post  axios.delete('http://localhost:3000/data/1')

过滤器

过滤器

Vue.filter('过滤器的名称',callback) 实例1：

  <body>
        <div id="app">
          <h1>{{msg }}</h1>
          <h1>{{msg | msgFmt('单纯', '疯狂')}}</h1>
        </div>

        <div id="app2">
          <h1>{{msg }}</h1>
          <h1>{{msg | msgFmt('单纯', '疯狂')}}</h1>
        </div>
        <script>
              // arg1 --- 要过滤的数据 默认传递
              // arg2 --- 单纯
              // arg3 --- '疯狂'
            Vue.filter('msgFmt', (arg1, arg2, arg3) => {
            // console.log(arg)
            return arg1.replace(arg2, arg3)
              })

              // 全局过滤器可以使用在任意的实例中 
              // 私有的过滤器只能使用在自己的实例
              // 当全局和私有同时存在就近原则使用私有的   
              new Vue({
                el: "#app",
                data: {
                  msg: '谁是我们班最单纯的男人'
                },
                created() {
                },
                methods: {
                },
                filters: {
                  msgFmt(arg1, arg2, arg3) {
                  return arg1.replace(arg2, arg3) + '~~~~~'
                  }
                }
              })

              new Vue({
                el: "#app2",
                data: {
                  msg: '谁是我们班最单纯的男人'
                }
              })
        </script>
      </body>

实例2：（时间格式化）

<input type="text" :value="item.time | dateFmt()" disabled>
   Vue.filter('dateFmt', (arg, arg2 = 'YYYY-MM-DD HH:mm:ss') => {
    return moment(arg).format(arg2)
  })

使用场景

插值表达式、属性绑定   

{{data | 过滤器的名称}}

自定义指令

自定义指令

Vue.directive('指令的名称',{
  bind() {

  },
  inserted() {

  },
  updated() {

  }
})

简化写法自动执行了 bind 和 updated
Vue.directive('指令的名称',callack) 实例：

<body>
<div id="app">
  <h1 v-color="'green'">自定义指令</h1>
  <input type="text" v-focus>
</div>
<script>
  // 自定义指令 定义的时候名称不需要添加 v-前缀 ，使用的时候需要 添加 v-前缀   
  // el 添加该指令的元素的 DOM
  // binding 指令的值 其为一个对象 可以通过  binding.value 获取具体的值    
  // 简化写法自动执行了 bind 和 updated    
  // Vue.directive('color', {
  //   bind(el, binding) {
  //     console.log(binding)
  //     // el.style.color = 'red'
  //     el.style.color = binding.value
  //   }
  // })

  // Vue.directive('focus', {
  //   // bind(el) {
  //   //   // 是在内存中 一般用于操作样式    
  //   //   el.style.color = 'green'
  //   // },
  //   inserted(el) {
  //     // 页面已经渲染完毕了，一般用于操作DOM
  //     el.focus()
  //   }
  // })
  new Vue({
    el: "#app",
    data: {

    },
    created() {
    },
    methods: {
    },
    filters: {

    },
    directives: {
      // color: {
      //   bind(el, binding) {
      //     console.log(binding)
      //     // el.style.color = 'red'
      //     el.style.color = binding.value
      //   }
      // },
      color(el, binding) {
        console.log(binding)
        el.style.color = binding.value
      },
      focus: {
        // bind(el) {
        //   // 是在内存中 一般用于操作样式    
        //   el.style.color = 'green'
        // },
        inserted(el) {
          // 页面已经渲染完毕了，一般用于操作DOM
          el.focus()
        }
      }
    }
  })
</script>
</body>

动画

动画

v-enter/v-leave-to   起点、终点

v-enter-active/v-leave-active  进入和离开的时间

v-enter-to/v-leave  目的点

  1. 可切换的元素

  2. 使用vue提供 transition 标签 包含 动画元素

  3. 设置动画的样式

1.原生动画

<style>
    /* 起点和终点 */
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(300px)
    }

    .v-enter-active {
      transition: all .5s linear;

    }

    .v-leave-active {
      transition: all 1s linear;
    }
  </style>
  
  <body>
  <div id="app">
    <button @click="flag=!flag">toggle</button>
    <transition>
      <div v-show="flag">
        显示隐藏
      </div>
    </transition>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        flag: false
      }
    })
  </script>
</body>

2.原生动画-动画前缀

<style>
    /* 起点和终点 */
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(300px)
    }

    .v-enter-active {
      transition: all .5s linear;

    }

    .v-leave-active {
      transition: all 1s linear;
    }

    
    .fly-enter,
    .fly-leave-to {
      opacity: 0;
      transform: translateY(300px)
    }

    .fly-enter-active {
      transition: all .5s linear;

    }

    .fly-leave-active {
      transition: all 1s linear;
    }
  </style>
  
  
  <body>
  <div id="app">
    <button @click="flag=!flag">toggle</button>
    <transition>
      <div v-show="flag">
        显示隐藏
      </div>
    </transition>
    <button @click="flag2=!flag2">toggle</button>
    <!-- name="" 默认值为v 可以指定成具体的动画-->
    <transition name="fly">
      <div v-show="flag2">
        显示隐藏
      </div>
    </transition>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        flag: false,
        flag2: false
      }
    })
  </script>
</body>

3.animate第三方动画

<link rel="stylesheet" href="./lib/animate.min.css">

<body>
  <div id="app">
    <button @click="flag=!flag">toggle</button>
    <!-- 
      enter-active-class 进入的动画类
      leave-active-class 离开的动画类
      duration 

        方式1 同时设置 进入和离开的时间     
          duration="300"  时间不要超过1000   
        方式2 分开设置 进入和离开的时间   
          :duration="{enter:800,leave: 500}"
    
    -->
    <transition enter-active-class="fadeInRightBig" leave-active-class="fadeOutRightBig"
      :duration="{enter:800,leave: 500}">
      <div v-show="flag" class="animated">
        显示隐藏
      </div>
    </transition>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        flag: false
      }
    })
  </script>
</body>

4.列表动画

<style>
    /* 起点和终点 */
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(300px)
    }

    .v-enter-active {
      transition: all .5s linear;

    }

    .v-leave-active {
      transition: all 1s linear;
    }
  </style>
  
  
  <body>
  <div id="app">
    <input type="text" v-model="name" />
    <button @click="add">add</button>
    <!-- 

      appear 进入就有动画

      tag 指定渲染成具体的标签 默认为 span  
     -->
    <transition-group appear tag="ul">
      <li v-for="item in list" :key="item.id">
        {{item.id}} ---- {{item.name}}
      </li>
    </transition-group>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        name: '',
        list: [
          {
            id: 0,
            name: 'fly'
          },
          {
            id: 1,
            name: 'sky'
          }
        ]
      },
      methods: {
        add() {
          this.list.push({
            id: new Date().getTime(),
            name: this.name
          })
        }
      }
    })
  </script>
</body>

5.半场动画

<body>
  <div id="app">
    <button @click="flag=!flag">toggle</button>
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div v-show="flag">
        显示隐藏
      </div>
    </transition>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        flag: false
      },
      methods: {
        beforeEnter(el) {
          // console.log(el)
          // 设置进入之前的位置
          el.style.transform = 'translate(0,0)'
        },
        enter(el, done) {
          // 强制刷新   重绘 重排   
          el.offsetLeft
          // el.offsetTop
          // 进入之后的位置
          el.style.transform = 'translate(300px,300px)'
          el.style.transition = 'all .5s ease'
          // afterEnter 的回调函数 
          done()
        },
        afterEnter() {
          this.flag = !this.flag
        }
      }
    })

    // false -- true -- false  
  </script>
</body>
avatar
文章
阅读
粉丝