3.Vue学习笔记—生命周期、过滤器、指令、插件

页川叶川

已于 2023-05-30 16:55:52 修改

阅读量941

点赞数

分类专栏： Vue学习笔记文章标签： Vue.js

于 2019-06-14 07:51:39 首次发布

本文链接：https://blog.csdn.net/affluent6/article/details/91544272

版权

Vue学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文目录如下：

注意: 撰写本文目的主要是为了给自己做一个备忘录，如果你学过vue并且希望从本文中找到一些忘记的知识点，那么你可以阅读本文章。由于文章内讲解并不是很多，因此此文章并不适合小白入门使用。

8.生命周期

每个Vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。
常用的钩子:
create: 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用，需要初始化处理一些数据时会比较有用。
mounted: el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
beforeDestory: 实例销毁之前。主要解绑一些使用addEventListener监听的事件

示例代码:

  <div id="test">
    <button @click="killVM">killvm</button>  <!--click的名称不能含有destory？-->
    <p v-show="isShow">王顺顺</p>
  </div>

  <script type="text/javascript">
    new Vue({
      el: '#test',
      data: {
        isShow: true
      },

      mounted() {                  //初始化之后立即调用(1次)
        this.intervalId = setInterval(() => { //如果用function的话,this就是指window
          this.isShow = !this.isShow
            console.log("---------");
        }, 1000)
      },

      beforeDestroy() {            //死亡时前调用一次
          //清除定时器
          clearInterval(this.intervalId)
      },

      methods: {
          killVM() {
              this.$destroy()       //但是停止之后会有内存泄漏，定时器仍然在执行，需要清除定时器
          }
      }
    })
  </script>

9.过滤器

过滤器主要用于数据的格式化，例如格式化日期。

前端页面展示:
日期格式化
前端代码:

<div id="test">

    <h2>显示格式化的日期时间</h2>
    <p>{{date}}</p>
    <p>完整版:{{date | dateString}}</p>
    <p>日期:{{date | dateString('YYYY-MM-DD')}}</p>
    <p>时间:{{date | dateString('HH:mm:ss')}}</p>
    <!--此语句会将date的值传输给dateString过滤器处理-->

</div>

js代码:

<script>
    //自定义过滤器
    Vue.filter('dateString', function (value, format) {
      return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
    })
    // Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {
    //   return moment(value).format(format)
    // })

    new Vue({
      el: '#test',
      data: {
        date: new Date()
      }
    })
</script>

10.指令

10.1.基础使用

<!--css样式-->
<style>
    [v-cloak] {
      display: none;
      /*配合实现 v-cloak*/
    }
</style>


<!--前端页面代码-->
<div id="example">
    <p ref="content">xztywss.top</p>
    <button @click="hint">提示</button>

    <!-- <p>{{msg}}</p> -->
    <p v-cloak>{{msg}}</p> //v-cloak 防止闪现 需要配合css实现
</div>


<!--js代码-->
<script>
    new Vue({
        el: '#example',
        data: {
            msg: "wss"
        },
        methods: {
            hint() {
                alert(this.$refs.content.textContent) //textContent = innerhtml
            }
        }
    })
</script>

10.2.注册指令

没有太多需要解释的，这里仅仅给出一段示例代码，想了解更多请百度搜索吧！

示例代码:

<body>

    <!-- 1) 注册全局指令 
        Vue.directive('my-directive',function(el,binding){ 
        el.innerHTML=binding.value.toupperCase() 
    }) 
    2) 注册局部指令 
    directives:{ 
        'my-directive':{
             bind(el,binding){
                 el.innerHTML=binding.value.toupperCase() 
             } 
         } 
    } 
    3) 使用指令 v-my-directive='xxx' -->


    <div id="test1">
        <p v-upper-text="msg1"></p>
        <p v-lower-text="msg1"></p>
    </div>

    <div id="test2">
        <p v-upper-text="msg2"></p>
        <p v-lower-text="msg2"></p>
    </div>

    <script>
        //定义全局指令
        //el 指令属性所在的标签对象
        //binding 包含指令相关信息数据的对象
        Vue.directive('upper-text', function (el, binding) {
            console.log(el, binding)
            el.textContent = binding.value.toUpperCase()
        })

        new Vue({
            el: '#test1',
            data: {
                msg1: 'NBA I Love This Game'
            },

            //局部指令
            directives: {
                // 'lower-text': function (el, binding) {
                //     el.textContent = binding.value.toLowerCase()
                // }
                'lower-text'(el, binding) {
                     el.textContent = binding.value.toLowerCase()
                }
            }
        })

        new Vue({
            el: '#test2',
            data: {
                msg2: 'Just Do It！'
            }
        })
  </script>

</body>

11.插件

合理地使用插件能使我们做项目的过程中达到事半功倍的效果，此处给出一个简单示例

简单实例:

<body>

    <div id="test">
        <p v-my-directive="msg"></p>
    </div>

    <script type="text/javascript">
        //声明使用插件
        Vue.use(MyPlugin) //内部会执行MyPlugin.install(Vue)

        Vue.myGlobalMethod()


        const vm = new Vue({
            el: '#test',
            data: {
                msg: 'I Love You!'
            }
        })
        vm.$myMethod();
    </script>

</body>

页川叶川

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
3.Vue学习笔记—生命周期、过滤器、指令、插件

注意: 撰写本文目的主要是为了给自己做一个备忘录，如果你学过vue并且希望从本文中找到一些忘记的知识点，那么你可以阅读本文章。由于文章内讲解并不是很多，因此此文章并不适合小白入门使用。8.生命周期每个Vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。常用的钩子:create: 实例创建完成后调用，此阶段...
复制链接

扫一扫