深入理解Vue生命周期、手动挂载及挂载子组件

站长资源 2024/11/28 佚名

2 0 1

本文介绍了Vue生命周期和手动挂载，分享给大家，具体如下：

1、vue的生命周期：

2、$mount()手动挂载

当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；

假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。

例如：

方法一：

<div id="app"> 
 {{name}} 
</div> 
<button onclick="test()">挂载</button> 
<script> 
 var obj= {name: '张三'} 
 var vm = new Vue({ 
  data: obj
 }) 
 function test() { 
  vm.$mount("#app"); 
 }

方法二：

Vue.extend()用以创建没有挂载的的子类,可以使用该子累创建多个实例

var app= Vue.extend({ 
 template: '<p>{{firstName}} {{lastName}}</p>', 
   data: function () { 
    return { 
    firstName: 'Walter', 
    lastName: 'White' 
    } 
    } 
   }) 
 // 创建 app实例，并挂载到一个元素上。 
 new app().$mount('#app')

下面我们使用自动插入label

手动挂载插件:https://vuefe.cn/api/#Vue-extend

动手写代码

1、先移除user-name.vue 里显示错误的label，因为我们要手动插入

<label class="label label-danger">用户不合法</label>

2、先看一下我们插件validate.js的全部代码，然后我们再分析

export default{
  install(Vue){

    Vue.prototype.checkUserName = (value) => {
      if(value == ""){
        return true; // 如果没有填写,默认为true
      }

      if(/\w{6,20}/.test(value)){
        return true;
      }else{
        return false;
      }
    }

    Vue.prototype.errorLabel = null;
    Vue.prototype.hasError = false;

    Vue.directive("uname",{
      bind(){
        let errorTpl = Vue.extend({
          template:'<label class="label label-danger">用户不合法</label>'
        });
        // 实例化并挂载
        Vue.errorLabel = (new errorTpl()).$mount().$el;
      },
      update(el,binding,vnode){
        if(/\w{6,20}/.test(el.value)){
          // 验证通过
          if (Vue.hasError){
            el.parentNode.removeChild(Vue.errorLabel);
            Vue.hasError = !Vue.hasError;
          }
        }else{
          // 验证没有通过
          if (!Vue.hasError){
            el.parentNode.appendChild(Vue.errorLabel);
            Vue.hasError = ! Vue.hasError;
          }

        }
      },
    })
  }
}

3、定义了2个prototype

Vue.prototype.errorLabel = null;
Vue.prototype.hasError = false;

errorLabel错误提示模板，我们在要bind() 方法中创建，然后挂载到它上面；hasError 是辅助属性，方便我们用来判断当前是有错误还是没有错误。

4、在update() 方法中，实时监听用户的输入，然后移除/添加错误模板

 update(el,binding,vnode){
   if(/\w{6,20}/.test(el.value)){
     // 验证通过
     if (Vue.hasError){
       el.parentNode.removeChild(Vue.errorLabel);
       Vue.hasError = !Vue.hasError;
     }
   }else{
     // 验证没有通过
     if (!Vue.hasError){
       el.parentNode.appendChild(Vue.errorLabel);
       Vue.hasError = ! Vue.hasError;
     }
   }
 },

5、演示效果如下图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Vue生命周期,vue,挂载子组件,vue,手动挂载

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“深入理解Vue生命周期、手动挂载及挂载子组件”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

深入理解Vue生命周期、手动挂载及挂载子组件

详解微信小程序Page中data数据操作和函数调用

微信小程序中button组件的边框设置的实例详解

评论“深入理解Vue生命周期、手动挂载及挂载子组件”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接