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 相关文章推荐
js活用事件触发对象动作
Aug 10 Javascript
javascript的函数作用域
Nov 12 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
JS async 函数的含义和用法实例总结
Apr 08 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
PHP4之真OO
2006/10/09 PHP
php object转数组示例
2014/01/15 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
python模块restful使用方法实例
2013/12/10 Python
python ddt实现数据驱动
2018/03/14 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
Python socket 套接字实现通信详解
2019/08/27 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
python读取mysql数据绘制条形图
2020/03/25 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
教师推荐信范文
2013/11/24 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
校园之声广播稿
2015/08/18 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers