Vue2几种常见开局方式详解


Posted in Javascript onSeptember 09, 2017

在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'
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
使用JS动态显示文本
Sep 09 #Javascript
深入理解ES7的async/await的用法
Sep 09 #Javascript
jQuery事件对象的属性和方法详解
Sep 09 #jQuery
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 #Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 #Javascript
js实现音乐播放控制条
Sep 09 #Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 #Javascript
You might like
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
vuex入门最详细整理
2020/03/04 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
Python交换变量
2008/09/06 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python同时遍历两个list用法说明
2020/05/02 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
一套Delphi的笔试题二
2013/05/11 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
销售员试用期自我评价
2014/09/15 职场文书
开平碉楼导游词
2015/02/06 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书