vue基础（三）

1.vue中添加定时器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <p v-show="isShow">我爱你赵丽颖</p>
    <button @click="destroy">点击销毁</button>
  </div>
  <script src="./js/vue.js"></script>
  <script>
    new Vue({
      data:{
        isShow:true
      },

      //挂载之后
      mounted() {
        //回调代码一般都在这  发ajax  定时器
        //vm中设置timer属性
        this.timer = setInterval(() => {
          this.isShow = !this.isShow
        }, 1000);
      },

      beforeDestroy() {
        // 一般是在销毁实例之前的一些善后工作 清除定时器，解绑事件等相关
        clearInterval(this.timer)
      },
      
      methods: {
        destroy(){
          //点击按钮我要销毁vm实例，销毁之前自动会调用beforeDestroy回调
          this.$destroy() //销毁实例的方法，固定的
        }
      },
    }).$mount('#root')
  </script>
</body>
</html>

2.vue的生命周期

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <!-- 插值花括号中，可以使用js语法 -->
    <p v-show="isShow" ref="pp">{{isShow?'我爱你赵丽颖':'我爱你杨幂'}}</p>
    <button @click="destroy">点击销毁</button>
  </div>
  <script src="./js/vue.js"></script>
  <script>

    new Vue({
      data:{
        isShow:true
      },
      //生命周期钩子执行的顺序是固定的
      beforeCreate() {
        //打印数据是看不见的
        console.log(this.isShow) //undefined，
      },
      created() {
        //打印vm的数据可以看见
        console.log(this.isShow) //true
        // 报错，Error in created hook: "TypeError: Cannot read property 'innerText' of undefined"
        // console.log(this.$refs.pp.innerText)
      },

      beforeMount() {
        //挂在前，模板挂在前（生成正儿八经的标签，虚拟dom）
         console.log(this.isShow) //true
         // Error in beforeMount hook:报错
         console.log(this.$refs.pp.innerText)
      },

      mounted() {
        console.log(this.$refs.pp) //true
        // 挂载后，可以打印看到文本
        console.log(this.$refs.p.innerText) //我爱你赵丽颖
        //回调代码一般都在这  比如发ajax  定时器
        this.timer = setInterval(() => {
          this.isShow = !this.isShow
        }, 1000);
      },

      // 跟新数据，打印的还是之前的数据
      beforeUpdate() {
        console.log(this.isShow,this.$refs.pp.innerText)
      },

      // 跟新数据，打印的是变化的数据
      updated() {
        console.log(this.isShow,this.$refs.pp.innerText)
      },


      beforeDestroy() {
        // 一般是在销毁实例之前的一些善后工作 清除定时器，解绑事件等相关
        console.log('销毁前')
       
      },
      destroyed() {
        //销毁后可以打印提示信息
        console.log('销毁了')
      },
      methods: {
        destroy(){
          clearInterval(this.timer)
          //点击按钮我要销毁vm实例，销毁之前自动会调用beforeDestroy回调
          this.$destroy() //销毁实例的方法，固定的
        }
      },
    }).$mount('#root')
  </script>
</body>
</html>

3.过渡和动画效果

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

    条件渲染 (使用 v-if)
    条件展示 (使用 v-show)
    动态组件
    组件根节点 */

    /* 已经进入， 打算离开 */
    .xxx-enter-active,
    .xxx-leave-active {
      transition: opacity .5s;
    }

    /* 打算进入，已经离开 */
    .xxx-enter,
    .xxx-leave-to

    /* .fade-leave-active below version 2.1.8 */
      {
      opacity: 0;
    }


    /*动画*/
    /* 类名bounce */
    .bounce-enter-active {
      animation: bounce-in .5s;
    }

    .bounce-leave-active {
      animation: bounce-in .5s reverse;
    }

    /* 关键帧名 bounce-in */
    @keyframes bounce-in {
      /* scale缩放 */
      0% {
        transform: scale(0);
      }

      50% {
        transform: scale(1.5);
      }

      100% {
        transform: scale(1);
      }
    }
  </style>
</head>

<body>
  <div id="demo">
    <button @click="show = !show">
      Toggle
    </button>

    <!-- 动画标签，包裹需要添加动画的元素 -->
    <transition name="xxx">
      <p v-if="show">hello</p>
    </transition>
  </div>

  <div id="example-2">
    <button @click="show = !show">Toggle show</button>
    <!-- bounce 类名 -->
    <transition name="bounce">
      <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia
        diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
    </transition>
  </div>



  <script src="./js/vue.js"></script>
  <script>
    new Vue({
      el: '#demo',
      data: {
        show: true
      }
    })


    new Vue({
      el: '#example-2',
      data: {
        show: true
      }
    })
  </script>
</body>

</html>

4，自定义指令

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <p v-text="msg"></p>
    <p v-upper="msg"></p>
  </div>

  <div id="root1">
    <p v-text="msg"></p>
    <p v-upper="msg"></p>
  </div>
  <script src="./js/vue.js"></script>
  <script>

    //全局指令  所有的vue实例都能使用
    //指令名字不包含v- 而且不能是大写

    // element是元素，bindings是对象，有个value属性，为标签文本
    // Vue.directive('upper',function(element,bindings){
    //   // console.log(bindings)
    //   element.textContent = bindings.value.toUpperCase()
    // element.innerText= bindings.value.toUpperCase()
    // })
    


    new Vue({
      el: '#root',
      data() {
        return {
          msg: 'i love you~'
        }
      },
      //局部指令  只有当前的实例可以使用
      directives: {
        upper(element, bindings) {
          // console.log(bindings)
          element.textContent = bindings.value.toUpperCase()
        }
      }
    })

    new Vue({
      el: '#root1',
      data() {
        return {
          msg: 'i love you~'
        }
      },

    
    })
  </script>
</body>

</html>

5，自定义过滤器

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <p>{{timeNow | timeFormat}}</p>
    <p>{{timeNow | timeFormat('hh:mm:ss')}}</p>
  </div>

  <div id="root1">
    <div>{{ msg | filterA | filterB}}</div>

  </div>
  <script src="./js/vue.js"></script>

  <!-- Moment.js 是一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期。 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.js"></script>
  <script>
    //自定义过滤器 是用来对渲染的数据进行进一步的计算之后，返回新数据再去渲染

    // //全局过滤，timeFormat为新的计算值的名称
    // Vue.filter('timeFormat',function(value,format='YYYY-MM-DD hh:mm:ss'){
    //   return moment(value).format(format)
    // })
    //局部

    new Vue({
      el: '#root',
      data() {
        return {
          timeNow:Date.now()
        }
      },

      //局部过滤
      filters:{
        // timeFormat为过滤新值后的名称
        timeFormat(value,format='YYYY-MM-DD hh:mm:ss'){
          return moment(value).format(format)
        }
      }
      
    })

    new Vue({
      el:"#root1",
      data(){
        return {
          msg:'2018'
        }
      },

      //过滤器, value代表需要过滤的原值，即msg,filterA为过滤后的值
      filters:{
        filterA(value){
        return value+ '年'
        },
        filterB(value){
          return value +"hello"
        }

      }

    })
  </script>
</body>

</html>

6，自定义插件

插件模块，

MyPlugin.js
(function(w){
  let MyPlugin = {}

  MyPlugin.install = function (Vue, options) {
    // 1. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
      console.log('myGlobalMethod全局方法调用了，切记实例不能直接使用，是Vue的方法')
    }
  
    // 2. 添加一个全局资源(asset)
    Vue.directive('my-directive', {
      bind (el, binding, vnode, oldVnode) {
        // 一些逻辑……
        el.innerText = binding.value.toUpperCase()
      }
    })
  
    // 4. 添加一个实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
      console.log('$myMethod实例方法调用了，切记Vue不能直接使用，是V实例化对象的方法')
    }
  }
  w.MyPlugin = MyPlugin
})(window);
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <p v-my-directive="msg"></p>
  </div>
  <script src="./js/vue.js"></script>
  <script src="./myPlugin.js"></script>
  <script>
    //获取MyPlugin对象
    console.log(MyPlugin)

    Vue.use(MyPlugin) //重要，声明使用插件，本质就是自动调用插件对象的install方法
    Vue.myGlobalMethod()

    let vm = new Vue({
      el:'#app',
      data(){
        return {
          msg:'liu'
        }
      }
    })

    vm.$myMethod()
  </script>
</body>
</html>

7,自定义组件（非单文件）

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root">
    <!-- 3.使用组件，本质是实例化了一个组件对象 -->
    <mybutton></mybutton>
  </div>
  <script src="./js/vue.js"></script>
  <script>


    //麻烦的写法
    // //1、定义组件，本质是定义了一个实例化组件对象的构造函数
    // const VueComponent = Vue.extend({
    //   //配置对象，和Vue当中传的配置对象几乎一样，只是不能写el
    //   //可以理解组件就是一个小的vm
    //   data(){
    //     return {
    //       count:0
    //     }
    //   },
    // // 模板,点击按钮，count递增
    //   template:'<button @click="count++">你点击了{{count}}</button>'
    // })

    // //2、注册组件 本质是给组件对象起名字，mybutton
    // Vue.component('mybutton',VueComponent)

    //3、使用组件，本质是实例化了一个组件对象



    //全局简单写法：
    Vue.component('mybutton', {
      //配置对象，和Vue当中传的配置对象几乎一样，只是不能写el
      //可以理解组件就是一个小的vm
      data() {
        return {
          count: 0
        }
      },
      template: '<button @click="count++">你点击了{{count}}</button>'
    })



    new Vue({
      el: '#root',
      //自定义组件,注册组件到vm中,局部定义组件
      components: {
        // 组件名称
        mybutton: {
          //配置对象，和Vue当中传的配置对象几乎一样，只是不能写el
          //可以理解组件就是一个小的vm
          data() {
            return {
              count: 0
            }
          },
          // 如果有两个以上的标签，外头要套个div
          template: '<div><button @click="count++">你点击了{{count}}</button><h2>我爱你</h2></div>'
        },
      }
    })

    
  </script>
</body>

</html>

8，自定义单文件组件

8.1 , component---Mybutton子组件，

<template>
  <div>
    <!-- //组件化的标签超过两个以上，外头套一个div -->
    <button @click="count++">你点击了{{count}}</button>
    <h2>我爱你</h2>
  </div>
</template>

<script>
export default {
  name: '',
  data:{
    count:0
  }
}
</script>

<style lang="less" scoped>
  
</style>

8.2， 在入口组件App组件引入子组件Mybutton

<template>
  <div>
    <!-- //标签可以简写成单标签 -->
    <MyButton/>
    <MyButton/>
    <MyButton/>
    <MyButton/>
    

  </div>
</template>

<script>


//引入组件对象
import MyButton from './components/MyButton.vue'
// 注册组件,起名为MyButton
// Vue.component('MyButton',MyButton)

export default {
  name: '',
  components:{
    // 简写
    MyButton
  }
}
</script>

<style lang="less" scoped>
</style>

8.3, 在html文件中引入app入口组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    
  </div>
  <script src="./js/vue.js"></script>
  
  <script>
    import App from './App.vue'

    new Vue({
      el:'#root',
      // 注册组件到vm中
      components:{
        
        App
      },
      //模板
      template:'<App/>'
    })
  </script>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/fsg6/p/13490390.html