深入理解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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
js时间查询插件使用详解
Apr 07 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 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
PHP新手上路(八)
2006/10/09 PHP
php 验证码制作(网树注释思想)
2009/07/20 PHP
php array_search() 函数使用
2010/04/13 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
PHP xpath()函数讲解
2019/02/11 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
python打开网页和暂停实例
2014/09/30 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
毕业生自我鉴定
2013/12/04 职场文书
事业单位考核材料
2014/05/21 职场文书
干部对照检查材料范文
2014/08/26 职场文书
2015年植树节活动总结
2015/02/06 职场文书
结婚纪念日感言
2015/08/01 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python