zoukankan      html  css  js  c++  java
  • Vue学习:过滤器、生命周期

    一、过滤器

     vue中的过滤器分为两种,分为私有和全局的。私有的过滤器只能在当前的vum控制view区域使用。下面主要学习全局过滤器的使用。全局过滤器不可以放在vue示例下面。

    过滤器可以用在两个地方:mustache插值和v-bind表达式,过滤器调用时候的格式{{ name | 过滤器的名称 }}

    Vue.filter('过滤器的名称',function(){})
    
    <body>
        <div id="app">
            <p>{{msg | msgFormat('不好玩呀')}}</p> 
        </div>
        <script>
    
            Vue.filter('msgFormat', function (msg, msg1) {
                return msg.replace(/天下第一/g, msg1 );
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: 'java天下第一'
                }
            })
        </script>
    </body>
    

    多个过滤器同时使用

    <body>
        <div id="app">
            <p>{{msg | msgFormat('不好玩') | msgFormat1}}</p>
        </div>
        <script>
            Vue.filter('msgFormat', function (msg, msg1) {
                return msg.replace(/天下第一/g, msg1 );
            })
            Vue.filter('msgFormat1', function (msg) {
                return msg + '第二个过滤器';
            })
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: 'java天下第一'
                }
            })
        </script>
    </body>
    

    二、VUE生命周期

    <script>
            var vm = new Vue({
                el: '#app',
                data: {
                },
                methods: {
                },
                beforeCreate() { 
                    //初始化之前的时候生命周期,实例创建之前
                    //data 和 methods 中的 数据都还没有没初始化  获取不到数据和方法
                },
                created() {
                    //初始化之后的生命周期函数
                    // 在 created 中,data 和 methods 都已经被初始化好了!
                    // 如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作
                },
                beforeMount() {
                    //表示 模板已经在内存中编辑完成了,但是尚未把 模板渲染到 页面中
                    // 在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串
                },
                mounted() {
                    //表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了
                    // 注意: mounted 是 实例创建期间的最后一个生命周期函数,
                    //当执行完 mounted 就表示,实例已经被完全创建好了,此时,如果没有其它操作的话,这个实例,就静静的 躺在我们的内存中,一动不动
                },
    
                //下面是运行期的
                beforeUpdate() {
                     // 这时候,表示 我们的界面还没有被更新  (但是数据被更新了)
                    // 当执行 beforeUpdate 的时候,页面中的显示的数据,还是旧的,此时 data 数据是最新的,页面尚未和 最新的数据保持同步
                },
                updated() {  
                    //页面的原始数据和data里面的数据都已经更新
                    // updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最新的
                },
    
                //下面销毁方法
    
                beforeDestroy() {
                    //实例销毁之前调用(还没有正式开始销毁)。在这一步,实例仍然完全可用。
                },
                destroyed() {
                    //Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
                }
            })
        </script>
    
  • 相关阅读:
    CBUUID UUIDString unrecognized selector sent to instance 错误
    利用php的序列化和反序列化来做简单的数据本地存储
    php 执行外部命令exec() system() passthru()
    php 使用 restler 框架构建 restfull api
    使用ar命令删除iOS静态库重复编译的.o文件
    c++ string 与 char 互转 以及base64
    CLGeocoder Error Domain=kCLErrorDomain Code=2
    mac air/pro 启用三指拖动手势
    osx 10.11.5 El Capitan U盘制作安装
    php cli模式下获取参数的方法
  • 原文地址:https://www.cnblogs.com/yangk1996/p/12656555.html
Copyright © 2011-2022 走看看