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


Posted in Javascript onSeptember 27, 2017

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

1、vue的生命周期:

深入理解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生命周期、手动挂载及挂载子组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
jquery实现左右轮播图效果
Sep 28 jQuery
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
js实现简单的打印表格
Jan 15 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 #Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 #Javascript
vue-cli项目中怎么使用mock数据
Sep 27 #Javascript
javaScript实现复选框全选反选事件详解
Nov 20 #Javascript
javaScript实现滚动条事件详解
Mar 24 #Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 #Javascript
深入掌握 react的 setState的工作机制
Sep 27 #Javascript
You might like
无线电广播的开始
2002/01/30 无线电
第十二节 类的自动加载 [12]
2006/10/09 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
Python实现的概率分布运算操作示例
2017/08/14 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
python实现高斯投影正反算方式
2020/01/17 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
python实现简单的学生管理系统
2021/02/22 Python
python在协程中增加任务实例操作
2021/02/28 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
模具数控专业自荐信
2014/01/27 职场文书
中学生检讨书1000字
2014/10/28 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
父亲去世追悼词
2015/06/23 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
基督教追悼会答谢词
2015/09/29 职场文书