vue基础（二）过滤器、自定义指令与生命周期

最新推荐文章于 2023-04-11 09:36:30 发布

xh943426

最新推荐文章于 2023-04-11 09:36:30 发布

阅读量117

点赞数

分类专栏：生命周期过滤 vue-resource 文章标签： vue

本文链接：https://blog.csdn.net/xh943426/article/details/108111627

版权

生命周期同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

过滤

1 篇文章 0 订阅

订阅专栏

vue-resource

1 篇文章 0 订阅

订阅专栏

一、过滤器

1.过滤器的分类

局部过滤器：只允许在当前组件中使用

    <div id="app">
        <p>{{msg | dataFormat}}</p>
    </div>



        var vm= new Vue({
        el:'#app',
        data:{
            msg:'你不秃头'
        },
        methods:{},
        //定义私有的局部过滤器，只能在当前对象使用
        filters:{
            dataFormat(msg){
                return msg+'谁秃头'
            }
        }
    })

也可以通过传参数让器变得更加灵活

    <div id="app">
        <p>{{msg | dataFormat('谁秃头')}}</p>
    </div>
   

        var vm= new Vue({
        el:'#app',
        data:{
            msg:'你不秃头'
        },
        methods:{},
        //定义私有的局部过滤器，只能在当前对象使用
        filters:{
        //msg 表示过滤的数据   a表示传入的参数
            dataFormat(msg,a){
                return msg+a
            }
        }
    })
   </script>

全局过滤器：所有组件都可以使用

<script>
        // 定义一个 Vue 全局的过滤器，名字叫做  toDouble 补零
        Vue.filter('toDouble', function(msg) {
            // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
            return msg < 10 ? msg : "0" +msg
         })
</script>

    <!-- html // -->

    <div> {{ 9 | toDouble }} </div>
    <!-- // 结果 <div>09</div> -->

也可进行串联

{{ message | filterA | filterB }}

在全局过滤器与局部过滤器中，全局要比局部使用的更广泛
如果过滤器名字重复，会按照远近使用，优先级：局部>全局
一个数据使用多个过滤器时（进行串联），将会从左至右执行，并且下一个过滤器接收的是上一个过滤器处理的结果

二、自定义指令

自定义指令也可分为(v-指令名)：

局部指令：只能在当前组件中使用

<body>
    <div id="app">
       <input type="text" v-foucs>
    </div>
    <script>
        new Vue({
            el:'#app',
            directives:{
                //注册局部指令
                foucs:{
                    //指令定义
                    inserteed:function(el){
                        el.foucs()
                    }

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

全局指令

<body>
    <div id="app">
          <input type="text" v-focus>

    </div>
    <script>
        //注册一个全局指令  v-focus
        Vue.directive('focus',{
            //将绑定元素插入到dom中
            inserted:function(el){
                el.focus()
            }
        })
        new Vue({
            el:'#app'
        })
    </script>

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update:
被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。

三、生命周期

1.图示
大体分为三部：创建=>运行=>销毁
生命周期图示
2.生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

beforeCreate
　　在实例初始化之后，数据观测和event/watcher时间配置之前被调用。
created
　　实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
beforeMount
　　在挂载开始之前被调用：相关的render函数首次被调用。
　　该钩子在服务器端渲染期间不被调用
mounted
el被新创建的 vm. $e l 替换，并挂在到实例上去之后调用该钩子函数。如果 r o o t 实例挂载了一个文档内元素，当 m o u n t e d 被调用时 v m .$ el也在文档内。
该钩子在服务端渲染期间不被调用
beforeUpdate
　　数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前.你可以在这个钩子中进一步第更改状态，这不会触发附加的重渲染过程。
　　该钩子在服务端渲染期间不被调用。
updated
　　由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
　　当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
　　该钩子在服务端渲染期间不被调用。
beforeDestroy
　　实例销毁之间调用。在这一步，实例仍然完全可用。
　　该钩子在服务端渲染期间不被调用。
destroyed
　　Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

四、Vue.js Ajax(vue-resource)使用

Vue 要实现异步加载需要使用到 vue-resource 库
1.引用

在线引入
本地引入
2.get请求
基于全局Vue对象使用http

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);

在一个Vue实例内使用$http

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);

调取后台数据
使用get请求，获取到相对应路由地址，遍历后台数据，将数据渲染到前台页面

 this.$http.get('http://localhost:3000/books').then((data)=>{
                       console.log(data)
                        data.body.forEach(item => {
                           // console.log(item)
                           this.list.push(item)
                        });
                    })

3.post请求
基于全局Vue对象使用http

Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

基于全局Vue对象使用http

this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

后台数据调取
使用post请求，与后台路由对应，写出相对应的key值，写入 {emulateJSON:true}，将数据渲染到前台

tianjia(){
                  this.$http.post('http://localhost:3000/books/tj',{sm:this.sm,zz:this.zz,jj:this.jj},{emulateJSON:true}).then((data)=>{
                          this.chaxun()
                          this.sm=''
                          this.zz=''
                          this.jj=''
                  })