Vue2 几种常见开局方式
2018-06-24 00:40:09来源：未知 阅读 ()
在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'
}
}
}
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- 使用JS在浏览器中判断当前网络连接状态的几种方法 2020-03-12
- js调用刷新界面的几种方式 2020-03-05
- jquery遍历筛选数组的几种方法和遍历解析json对象 2020-02-29
- jquery 操作iframe的几种方法总结 2020-02-22
- JavaScript访问CSS属性的几种方式介绍 2020-01-07
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
