Vue 使用 JQuery方法 完美替代 JQuery

替换方法对比

JQuery

window.onload = function() { } 这个JS函数会在整个页面的document全部加载完成以后执行。
不仅要求页面的DOM tree全部加载完成，而且要求所有的外部图片和资源全部加载完成

 window.onload=function(){
    alert("页面资源内容已加载完");
};

$(function(){ } 这个JS函数在页面结构加载完成执行 ，无需等待页面资源全部加载完成等同于 $(document).ready(function(){}

 $(function()
{
    alert("页面结构加载完");
});
$(document).ready(function(){
	alert("页面结构加载完");
}

Vue

created：在模板渲染成 html 前调用，即通常初始化某些属性值，然后再渲染成视图。

  export default {
    name: 'Test',
    create:function () {
      alert("模板已渲染等待页面加载")
    }
  } 

mounted：在模板渲染 html 后显示 Dom 元素时调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

  export default {
    name: 'Test',
    mounted:function () {
      alert("页面已加载")
    }
  } 

Vue 替代 JQuery

使用 mounted 替代 $(function(){});

$(function(){
    alert('页面已加载');
});

替换后

  export default {
    name: 'Test',
    mounted:function () {
      alert("页面已加载")
    }
  }