在SF问题中看到了一个关于vue-cli中的template问题,问题是这样的:
用vue-cli工具生成的main.js中:

import Vue from 'vue'
import App from './App'
import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

然后问友的问题是:
【template: '<App/>'】这句是什么意思?
是指使用app.vue模板吗?但在vue没有看到这样的用法哦!
里面只有:
1 template:'#xxx' 根据id获取
2 template:'<xx>.....<xx>' 直接使用
请问有没有相关的文档解释呢?

看到这个问题,其实就是vue的开局方式写法总结。

Vue2 加了reader选项后, 再加上几种构建方式, 开局方式真是各种五花八门, 这里列几种常见的, 说说注意点

我们先建立一个 app.vue 来当入口组件, 即所有页面都会以这个组件为模板 (下面代码中无特别说明, App 即指下面这个组件)

<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
<!-- 这里还可以写点其他组件, 或者路由也可以 <router-view></router-view> -->
</div>
</template>
<script>
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<style>
</style>

方式 1

模板文件:

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

注意: vue2 已经不支持直接绑定在 body 和 html 元素上, 所以我们需要在 body 里写个挂载元素

main.js 入口文件:

import App from './app.vue'
new Vue({
el: '#app',
render: creatElment => creatElment(App)
})

这里的采用 es6 的写法, 转出 es5 就是

render: funciton(creatElment) {
return creatElment(App)
}

creatElment 的第一个参数可以是String(HTML 标签名称) | Object(组件对象) | Function(函数), 这里传的就是个组件对象

注意: 这种情况下, App 组件并不是根组件

方式 2

模板文件:

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

main.js 入口文件:

import App from './app.vue'
new Vue({
el: '#app',
render: creatElment => creatElment('App'),
components: {
App
}
})

这个写法是不是和第一种很像? 只不过这里传的就是个App标签, 通过render渲染一个<App></App>元素, 然后把 App 当组件来用
注意: 这种情况下, App 组件并不是根组件

方式 3

模板文件:

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

main.js 入口文件:

import App from './app.vue'
new Vue({
el: '#app',
...App
})

这种方法和方式1 基本一样, 区别就在于render: creatElment => creatElment(App)和...App
render: creatElment => creatElment(App)是把 App 当成一个组件对象, 给render解析, 而...App是将 App 这个组件对象和{el: '#app'}这个对象直接合并, 变成Vue的参数
注意: 这种情况下, this.$root 是 App 组件

注意: 这种写法, 需要在.babelrc里添加stage-3以上的presets, 如:

{
"presets": ["es2015", "stage-2"]
}

方式 4

模板文件:

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

main.js 入口文件:

import App from './app.vue'
new Vue({
el: '#app',
components: {
App
}
})

这种写法就是完全把 App 当成一个组件使用, 所以我们需要在模板里添加<App></App>
注意: 上面这种写法需要在 webpack 配置别名, 这种情况下, App 组件并不是根组件

module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
}

方式 5

模板文件:

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

main.js 入口文件:

import App from './app.vue'
new Vue({
el: '#app',
template: '<App/>',
components: {
App
}
})

这种写法就也是完全把 App 当成一个组件使用, 不过模板直接写在了template选项里
注意: 上面这种写法需要在 webpack 配置别名, 这种情况下, App 组件并不是根组件

module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
}

Vue2 几种常见开局方式的更多相关文章

  1. Vue 几种常见开局方式

    vue的开局方式五花八门,这里列几种常见的. 我们先建立一个app.vue来当入口文件,即所有页面都会以这个组件为模板. <template> <div id="app&q ...

  2. Linux下几种常见压缩方式测试对比

    目录 Linux下几种常见压缩方式测试对比 参考 简介 测试 总结 Linux下几种常见压缩方式测试对比

  3. Redis 的几种常见使用方式

    常见使用方式 Redis 的几种常见使用方式包括: Redis 单副本 Redis 多副本(主从) Redis Sentinel(哨兵) Redis Cluster Redis 自研 各种使用方式的优 ...

  4. java中的线程(2):如何正确停止线程之3种常见停止方式

    1.常见停止方式 自定义线程,其中含退出标志位,在run中判断它. 使用interrupt()方法中断线程 使用stop方法暴力终止(已经弃用) 2.使用标志位 class TestThread ex ...

  5. Fibonacci series(斐波纳契数列)的几种常见实现方式

    费波那契数列的定义: 费波那契数列(意大利语:Successione di Fibonacci),又译费波拿契数.斐波那契数列.斐波那契数列.黄金切割数列. 在数学上,费波那契数列是以递归的方法来定义 ...

  6. java中的线程(2):如何正确停止线程之2种常见停止方式

    1.常见停止方式 结束run函数,run中含退出标志位. 使用interrupt()方法中断线程 使用stop方法暴力终止(已经弃用) 2.结束run class TestThread extends ...

  7. .net core番外第一篇:Autofac的几种常见注入方式、生命周期和AOP

    使用Autofac进行服务注册实践: 新建三个项目,分别是webapi项目 Wesky.Core.Autofac以及两个类库项目 Wesky.Core.Interface和Wesky.Core.Ser ...

  8. java 比较几种常见循环方式的优劣

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt224 我们常用for循环,foeach,while等作为循环list或者数组 ...

  9. masm下几种常见函数调用方式

    masm没有fastcall调用方式,其特点为: 1 第一个参数放入ecx,第二个参数放入edx: 2 如果有剩余参数则从右向左压栈: 3 被调用函数清理栈(平衡栈): 4 若有返回值放入eax: 5 ...

随机推荐

  1. 微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径

    微信小程序 - 相对定位和绝对定位 相对定位relative,绝对定位absolute 相对定位:元素是相对自身进行定位,参照物是自己. 绝对定位:元素是相对离它最近的一个父级元素进行定位. 相对定位 ...

  2. 几个java小例子

    比较两个字符串的值: /*------------------------比较两个字符串的值----------------------*/ String st1="hello"; ...

  3. python 安装 reportlab 报错 “ImportError: No module named reportlab.lib”

    reportlab是什么? 是一个处理PDF和画图的python开源库. 初次安装: pip install reportlab 重新安装: pip install --upgrade --force ...

  4. 关于在vscode中以https方式请求!不是以file文件夹访问!vscode中 ajax请求

    在vscode 头疼的问题是 用浏览器查看网页!会是以文件夹的方式打开的!  我遇到这个问题 我还重新配置了Apache    ! 但是现在可以解决: 使用vscode  ============== ...

  5. Python档案袋(字符串与二进制的编码与解码)

    字符串 字符串支持像列表似得用下标进行取值操作,和进行切片 字符串格式化: #内容相当于字符串,也可以用双引号包裹 str=''' 111 2222 33333 ---------东小东------- ...

  6. mongoose的基本操作方法

    mongoose 1. const mongoose = require("mongoose");导入mongoose模块 2. //注意url地址最后面的地址是数据库的名称    ...

  7. 项目总结一:情感分类项目(emojify)

    一.Emojifier-V1 模型 1. 模型 (1)前向传播过程: (2)损失函数:计算the cross-entropy cost (3)反向传播过程:计算dW,db dz = a - Y_oh[ ...

  8. Android--解析XML之PULL

    前言 在上一篇博客已经介绍了Android解析XML的几种方式,分别有:SAX.DOM.PULL.详细的可以看看上一篇博客:http://www.cnblogs.com/plokmju/p/andro ...

  9. Nginx下关于缓存控制字段cache-control的配置说明 - 运维小结

    HTTP协议的Cache -Control指定请求和响应遵循的缓存机制.在请求消息或响应消息中设置 Cache-Control并不会影响另一个消息处理过程中的缓存处理过程.请求时的缓存指令包括: no ...

  10. 【原创】使用golang访问windows telnet服务器

    本篇博客记录本次使用golang语言tcp方式进行telnet服务器访问 环境: 1.win7系统telnet服务器,使用地址:192.168.8.189 2.python使用telnetlib库对t ...