深入理解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 相关文章推荐
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
详解关于Vue单元测试的几个坑
Apr 26 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
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
Python 内置函数complex详解
2016/10/23 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
python Cartopy的基础使用详解
2020/11/01 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
自主招生自荐信
2013/12/08 职场文书
慈善晚会策划方案
2014/05/14 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
廉政承诺书范文
2015/04/28 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书