vue第二阶段

最新推荐文章于 2023-11-22 11:28:30 发布

jbb158

最新推荐文章于 2023-11-22 11:28:30 发布

阅读量158

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/jbb158/article/details/103273257

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

过滤器

格式

	   <div id="box"> <p>{{进入过滤器的数据data| 过滤器名称('参数1','参数2') }}</p>



    Vue.filter('过滤器名称',function (输入的数据data,参数1,参数2) {
            return pass;
    })


<body>
    
    <div id="box"> <p>{{msg| tihuan('单纯的','冷酷的') }}</p>
    </div>


    <script>
        // 格式1
    Vue.filter('textadd',function(enterdata) {
    
    return enterdata+'    冷酷无情';

    });


        //格式2
    Vue.filter('tihuan',function (enterdata,before,after) {
            return enterdata.replace(before,after);
    })




    var vm = new Vue({
        el:'#box',
        data:{msg:"曾经，我也是一个单纯的少年，哈哈哈哈哈哈哈哈哈"},
        mehtods:{},
    });
    
    

    </script>

自定义指令

浏览器请求到html文件，由上到下解析html文件，内存中生成dom树，渲染页面。
bind：内存中
inserted：页面中
css样式放在bind
js行为代码放在inserted

语法

    Vue.directive('focus', {
      bind: function (el) { 
      插入dom前执行
      },
      
      inserted: function (el) { 
      插入dom后执行
      },


      updated: function (el) {  
      }
    })

使用指令
v-focus

生命周期函数

new Vue() 创建一个空的vue对象，没有进内存

1beforeCreate（创建前）初始化未开始，没有初始化 data和方法，就调用这个函数

2created（创建后）初始化方法和data之后， vue控制的 $e l 还没有进入 e l 之前调用。 < b r / > 3 b e f o r e M o u n t （挂载前）完整模板加载到内存后，但是没有渲染到页面前，调用。页面还没有显示 v m .$ el.data

4mounted（挂载后）内存中的模板应用到页面，也就是,在页面的el 被内存的 vm. $e l 替换，页面可以显示 v m .$ el.data

用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

1-4是创建vue组件
5-6是vue组件运行过程中

5beforeUpdate（更新前）
虚拟dom修改，但是没有同步到渲染页面之前调用。

6updated（更新后）
虚拟dom修改，并应用到页面后调用


    
    <script>
        var vm = new Vue({
            el:'.box',
            data:{
                msg:'哈哈哈',
            },
            methods:{
                show(){
                    console.log('ojbk!');
                }
            },

            beforeCreate(){  //创建vue空组件，分配内存之前
                // console.log(this.msg);
                // this.show();
            },

            created(){          // vue创建组件，vue分配内存之后，  vue渲染页面之前调用
                // console.log(this.msg);
                // this.show();
            },

            beforeMount(){      
                //vue加载到html生成模板，该模板进入内存后，渲染到页面前调用
                // console.log(document.getElementById('hh3').innerHTML);
            },
            mounted(){
                //  vue加载到html文件上生成模板，既加载内存又渲染页面后。

                // console.log(document.getElementById('hh3').innerHTML);
            },


            beforeUpdate(){

                //修改vue组件，但是没应用到页面前调用
                // console.log(this.msg+'这个是vue');
                // console.log(document.getElementById('hh3').innerHTML+'这个是页面');

            },
            updated(){
                console.log(this.msg+'这个是vue');
                console.log(document.getElementById('hh3').innerHTML+'这个是页面');
                    //同时在vue和页面修改后调用
            }

        });

vue发送ajax请求

需要导入vue-resouce.js

格式
在这里插入图片描述

post请求格式


        postInfo() { // 发起 post 请求   application/x-wwww-form-urlencoded
          //  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
          //  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
          this.$http.post('url', {提交数据}, { emulateJSON: true }).then(result => {
            console.log(result.body)
          })
        },

jsonp就是get函数改jsonp即可

jbb158

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue第二阶段

过滤器自定义指令浏览器请求到html文件，由上到下解析html文件，内存中生成dom树，渲染页面。bind：内存中inserted：页面中css样式放在bindjs行为代码放在inserted语法 Vue.directive('focus', { bind: function (el) { 插入dom前执行 }, ...
复制链接

扫一扫

专栏目录