未分类

深入理解Vue生命周期、手动挂载及挂载子组件_vue.js_脚本之家

23 3月 , 2020  

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

2、$mount()手动挂载

深入理解Vue生命周期、手动挂载及挂载子组件_vue.js_脚本之家。本文介绍了Vue生命周期和手动挂载,分享给大家,具体如下:

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

 {{name}}  挂载  var obj= {name: '张三'} var vm = new Vue function test; } </pre><p><strong>方法二:</strong></p><p>Vue.extend()用以创建没有挂载的的子类,可以使用该子累创建多个实例</p><pre >var app= Vue.extend({ template: '<p>{{firstName}} {{lastName}}</p>', data: function () { return { firstName: 'Walter', lastName: 'White' } } }) // 创建 app实例,并挂载到一个元素上。 new app </pre><p>下面我们使用自动插入label </p><p>手动挂载插件:https://vuefe.cn/api/#Vue-extend</p><p><strong>动手写代码</strong></p><p>1、先移除user-name.vue 里显示错误的label,因为我们要手动插入</p><pre ><label >用户不合法</label></pre><p>2、先看一下我们插件validate.js的全部代码,然后我们再分析</p><pre >export default{ install{ Vue.prototype.checkUserName =  => { if{ return true; // 如果没有填写,默认为true } if(/w{6,20}/.test{ return true; }else{ return false; } } Vue.prototype.errorLabel = null; Vue.prototype.hasError = false; Vue.directive{ let errorTpl = Vue.extend({ template:'<label >用户不合法</label>' }); // 实例化并挂载 Vue.errorLabel = .$mount().$el; }, update{ if(/w{6,20}/.test{ // 验证通过 if { el.parentNode.removeChild; Vue.hasError = !Vue.hasError; } }else{ // 验证没有通过 if { el.parentNode.appendChild; Vue.hasError = ! Vue.hasError; } } }, }) }}</pre><p>3、定义了2个prototype</p><pre >Vue.prototype.errorLabel = null;Vue.prototype.hasError = false;</pre><p>errorLabel错误提示模板,我们在要bind() 方法中创建,然后挂载到它上面;hasError 是辅助属性,方便我们用来判断当前是有错误还是没有错误。 </p><p>4、在update() 方法中,实时监听用户的输入,然后移除/添加 错误模板</p><pre > update{ if(/w{6,20}/.test{ // 验证通过 if { el.parentNode.removeChild; Vue.hasError = !Vue.hasError; } }else{ // 验证没有通过 if { el.parentNode.appendChild; Vue.hasError = ! Vue.hasError; } } },</pre><p>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。</p>

1、vue的生命周期:

方法一:


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图