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 相关文章推荐
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
使用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
无线电的诞生过程
2021/03/01 无线电
Window下PHP三种运行方式图文详解
2013/06/11 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
CSMA/CD介质访问控制协议
2015/11/17 面试题
环保公益广告语
2014/03/13 职场文书
英语教育专业自荐信
2014/05/29 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
老干部工作汇报材料
2014/10/28 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
如何利用pygame实现打飞机小游戏
2021/05/30 Python
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js