深入理解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 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
理解jquery事件冒泡
Jan 03 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
Javascript类型判断相关例题及解析
Aug 26 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
微信小程序中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
基于mysql的论坛(2)
2006/10/09 PHP
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
微信小程序如何实现全局重新加载
2019/06/05 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python 图片验证码代码分享
2012/07/04 Python
Python深度优先算法生成迷宫
2018/01/22 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
中间件分为哪几类
2012/03/14 面试题
店长岗位职责
2013/11/21 职场文书
求职简历自我评价范例
2014/03/12 职场文书
效能风暴心得体会
2014/09/04 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
小学毕业教师寄语
2019/06/21 职场文书
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技