$mount()手动挂载

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

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

new Vue({

//el: '#app',

router,

render: h => h(App)

// render: x => x(App)

// 这里的render: x => x(App)是es6的写法

// 转换过来就是: 暂且可理解为是渲染App组件

// render:(function(x){

// return x(App);

// });

}).$mount("#app");

或者

new Vue({

el: '#app',

router,

render: h => h(App)

// render: x => x(App)

// 这里的render: x => x(App)是es6的写法

// 转换过来就是: 暂且可理解为是渲染App组件

// render:(function(x){

// return x(App);

// });

});
new Vue({

  render: h=> h(App)

}). $mount(root)

Vue 2.0新增的函数,可以直接给绑定节点渲染一个vue组件,如果在Vue 1.x下,就应该使用

new Vue({
el: '#app',
components: { App }
});

然后在页面中写入标记:

<div id="app">
<app></app>
</div>

Vue render: h => h(App) $mount的更多相关文章

  1. new Vue({ render: h => h(App), }).$mount('#app')

    这里创建的vue实例没有el属性,而是在实例后面添加了一个$mount('#app')方法. $mount('#app') :手动挂载到id为app的dom中的意思 当Vue实例没有el属性时,则该实 ...

  2. 关于Vue中的 render: h => h(App) 具体是什么含义?

    render: h => h(App) 是下面内容的缩写: render: function (createElement) { return createElement(App); } 进一步 ...

  3. Vue中render: h => h(App)的含义

    // ES5 (function (h) { return h(App); }); // ES6 h => h(App); 官方文档 render: function (createElemen ...

  4. vue-cli: render:h => h(App)是什么意思

    import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: ...

  5. Vue2.0 render:h => h(App)

    new Vue({ router, store, //components: { App } vue1.0的写法 render: h => h(App) vue2.0的写法 }).$mount( ...

  6. render: h => h(App) $mount 什么意思

    初始一个vue.js项目时,常常发现main.js里有如下代码: new Vue({ render: h => h(App) }).$mount('#app') 这什么意思?那我自己做项目怎么改 ...

  7. vue中render: h => h(App)的详细解释

    2018年06月20日 10:54:32 H-L 阅读数 5369   render: h => h(App) 是下面内容的缩写:   render: function (createEleme ...

  8. 如何理解render: h => h(App)

    学习vuejs的时候对这句代码不理解 new Vue({ el: '#app', router, store, i18n, render: h => h(App) }) 查找了有关资料,以下为结 ...

  9. 解析vue2.0中render:h=>h(App)的具体意思

    render:h=>h(App)是ES6中的箭头函数写法,等价于render:function(h){return h(App);}. 注意点:1.箭头函数中的this是 指向 包裹this所在 ...

随机推荐

  1. windows下用ADT进行android NDK开发的具体教程(从环境搭建、配置到编译全过程)

    郑重申明:如需转载本博客,请注明出处,谢谢! 这几天在学习android NDK的开发.那么首先让我们来看看android NDK开发的本质是什么. NDK(Native Development Ki ...

  2. js的一些常用判断小实验

    下面是小实验案例 // 0 if(undefined) { console.log('1'); } else { console.log('0'); } // 0 if(null) { console ...

  3. JS模式

    策略 命令 迭代器 代理 组合 发布/订阅 单例 享元 职责链 中介者 装饰者 状态 适配器 设计原则: 单一职责.最少知识.开放-封闭

  4. 【使用uWSGI和Nginx来设置Django和你的Web服务器】

    目录 安装使用uWSGI 配置Nginx结合uWSGI supervisor Django静态文件与Nginx配置 @ *** 所谓WSGI . WSGI是Web服务器网关接口,它是一个规范,描述了W ...

  5. 超好用的谷歌浏览器、Sublime Text、Phpstorm、油猴插件合集

    原文:超好用的谷歌浏览器.Sublime Text.Phpstorm.油猴插件合集 - 『精品软件区』 - 吾爱破解 - LCG - LSG |安卓破解|病毒分析|破解软件|www.52pojie.c ...

  6. C# textBox控件只允许为数字和小数点并且提取出这个数字

    一. textBox控件实现只允许为数字和小数点 如下图所示,在textBox控件框内输入只能是 要在textBox控件属性设置按键按下的事件触发,如下图所示: 二.源代码 textBox控件只允许为 ...

  7. osgi实战学习之路:1. ant+bnd+felix搭建osgi之HelloWorld

    开发环境分为三个部份 osgi_provider: bundle开发环境,对外提供服务 osgi_consumer: 引用其他bundle osgi_main: 执行測试 项目主要内容 : commo ...

  8. javascript 将时间戳格式化

    <script>function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocaleString().repl ...

  9. Linq复杂对象查询

    复杂的查询对象, using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...

  10. Thinkphp的 is null 查询条件是什么,以及exp表达式如何使用

    Thinkphp的 is null 查询条件是什么,以及exp表达式如何使用 一.总结 一句话总结:$map['name'] = array('exp','is null'); 1.is null判断 ...