Vue2幾種常見開局方式詳解
在SF問題中看到了一個關(guān)于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' 根據(jù)id獲取
2 template:'<xx>.....<xx>' 直接使用
請問有沒有相關(guān)的文檔解釋呢？
看到這個問題，其實就是vue的開局方式寫法總結(jié)。
Vue2 加了reader選項后, 再加上幾種構(gòu)建方式, 開局方式真是各種五花八門, 這里列幾種常見的, 說說注意點
我們先建立一個 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 已經(jīng)不支持直接綁定在 body 和 html 元素上, 所以我們需要在 body 里寫個掛載元素
main.js 入口文件:
import App from './app.vue'
new Vue({
el: '#app',
render: creatElment => creatElment(App)
})
這里的采用 es6 的寫法, 轉(zhuǎn)出 es5 就是
render: funciton(creatElment) {
return creatElment(App)
}
creatElment 的第一個參數(shù)可以是String(HTML 標簽名稱) | Object(組件對象) | Function(函數(shù)), 這里傳的就是個組件對象
注意: 這種情況下, 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 基本一樣, 區(qū)別就在于render: creatElment => creatElment(App)和...App
render: creatElment => creatElment(App)是把 App 當成一個組件對象, 給render解析, 而...App是將 App 這個組件對象和{el: '#app'}這個對象直接合并, 變成Vue的參數(shù)
注意: 這種情況下, 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'
}
}
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于如何正確理解vue中key的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-11-11
vue本地打開build后生成的dist文件夾index.html問題
這篇文章主要介紹了vue本地打開build后生成的dist文件夾index.html問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-09-09
vue 實現(xiàn)強制類型轉(zhuǎn)換 數(shù)字類型轉(zhuǎn)為字符串
今天小編就為大家分享一篇vue 實現(xiàn)強制類型轉(zhuǎn)換 數(shù)字類型轉(zhuǎn)為字符串，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本文通過實例代碼給大家詳細分享了Vue父組件向子組件傳值的過程以及關(guān)鍵點講解，一起學習參考下吧。2018-02-02
本篇文章主要介紹了Vue-Router進階之滾動行為詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue實現(xiàn)動態(tài)添加或者刪除對象和對象數(shù)組的操作方法
這篇文章主要介紹了在Vue項目中實現(xiàn)動態(tài)添加或者刪除對象和對象數(shù)組的操作方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
vue2實現(xiàn)directive自定義指令的封裝與全局注冊流程
自定義指令是對普通DOM元素進行的底層操作,它是一種有效的的補充和擴展,不僅可以用于定義任何的dom操作,并且是可以復(fù)用的,下面這篇文章主要給大家介紹了關(guān)于vue2實現(xiàn)directive自定義指令的封裝與全局注冊流程的相關(guān)資料,需要的朋友可以參考下2023-02-02
vue+mousemove實現(xiàn)鼠標拖動功能(拖動過快失效問題解決方法)
這篇文章主要介紹了vue+mousemove實現(xiàn)鼠標拖動功能，文中給大家介紹了鼠標移動過快拖動就失效問題的解決方法,需要的朋友可以參考下2018-08-08
最近公司在做一個基于vue開發(fā)的項目，項目需要開發(fā)一個展示組織架構(gòu)的樹組件，在網(wǎng)上搜了半天，沒有找到合適的，下面小編給大家分享一個基于Vue制作組織架構(gòu)樹組件，需要的朋友參考下吧2017-12-12
這篇文章主要介紹了怎樣在vue項目下添加ESLint的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05