Vue中的.vue文件的使用方式
更新時(shí)間：2022年03月29日 08:39:59 作者：程序員徐小白
這篇文章主要介紹了Vue中的.vue文件的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
需要安裝vue-loader
npm i vue-loader vue-template-complier -D
然后在配置文件中新增匹配規(guī)則
{test:/\.vue$/,use:'vue-loader'}定義.vue文件
<template> <!--這里定義html模板--> </template>
<script>
//這里定義js
//在這里導(dǎo)入文件
import Vue from 'vue'
export default {
?? ?//在這里定義組件的數(shù)據(jù)和方法
?? ? data(){
? ? ? ? return {
? ? ? ? ? ? chart:null
? ? ? ? }
? ? },
? ? methods:{?? ??? ?
?? ?}
}
</script><!--這里定義樣式 ?? ?可以使用scoped屬性，使得這里的樣式只有這個(gè)文件中的組件可以使用 --> <style> </style>
引用.vue文件
在.js文件中應(yīng)用
import 組件名稱(chēng) from '.vue文件的路徑'
使用render函數(shù)
var vm=new Vue({
?? ?render:function(createElements){
?? ??? ?return createElements(組件名稱(chēng))
?? ?}
})render的簡(jiǎn)寫(xiě)：
render:c=>c(組件名稱(chēng))
頁(yè)面就會(huì)把該Vue實(shí)例用.vue文件寫(xiě)的組件覆蓋
更加方便vue的組件化開(kāi)發(fā)
什么是.vue文件，它的作用是什么
.vue文件就是一個(gè)（或局部）組件，又或者說(shuō)是一個(gè)對(duì)象在導(dǎo)出時(shí)。
在Vue.createApp({ app }) app是一個(gè).vue文件，里面包括 三個(gè)部分template 和 js css。
然后再對(duì)比下面圖片，是不是很像，下面一個(gè)注冊(cè)一個(gè)組件需要 template js，所以說(shuō)，.vue文件就是一個(gè)組件，或者一個(gè)對(duì)象。
這里引用一個(gè) vue官方的全局組件實(shí)例來(lái)說(shuō)明
// 創(chuàng)建一個(gè)Vue 應(yīng)用
const app = Vue.createApp({})
// 定義一個(gè)名為 button-counter 的新全局組件
app.component('button-counter', {
? data() {
? ? return {
? ? ? count: 0
? ? }
? },
? template: `
? ? <button @click="count++">
? ? ? You clicked me {{ count }} times.
? ? </button>`
})以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
拿來(lái)即用的vue旋轉(zhuǎn)木馬組件demo
這篇文章主要為大家介紹了拿來(lái)即用的vue旋轉(zhuǎn)木馬組件demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了Vue CLI 3搭建vue+vuex最全分析(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue elementUI table表格數(shù)據(jù) 滾動(dòng)懶加載的實(shí)現(xiàn)方法
這篇文章主要介紹了vue elementUI table表格數(shù)據(jù)滾動(dòng)懶加載的實(shí)現(xiàn)方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue+canvas實(shí)現(xiàn)炫酷時(shí)鐘效果的倒計(jì)時(shí)插件（已發(fā)布到npm的vue2插件，開(kāi)箱即用）
這篇文章主要介紹了vue+canvas實(shí)現(xiàn)炫酷時(shí)鐘效果的倒計(jì)時(shí)插件（已發(fā)布到npm的vue2插件，開(kāi)箱即用） ,需要的朋友可以參考下2018-11-11
在計(jì)算字符數(shù)時(shí),一般情況下,英文字符、數(shù)字和大部分符號(hào)都可以被視為占一個(gè)字符長(zhǎng)度,因?yàn)樗鼈兪菃蝹€(gè)字節(jié),然而,對(duì)于某些特殊字符,如表情符號(hào)和部分非英文字符,會(huì)被認(rèn)為占據(jù)了多個(gè)字符長(zhǎng)度,本文給介紹了vue處理emoji表情占位符的操作方法,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了封裝一個(gè)Vue文件上傳組件案例詳情，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了vue自定義加載指令的相關(guān)知識(shí)，主要包括創(chuàng)建加載組件，創(chuàng)建指令的方法，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue中table表頭單元格合并(附單行、多級(jí)表頭代碼)
本文主要介紹了vue中table表頭單元格合并(附單行、多級(jí)表頭代碼)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue項(xiàng)目不能使用localhost訪(fǎng)問(wèn)的解決
這篇文章主要介紹了vue項(xiàng)目不能使用localhost訪(fǎng)問(wèn)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue 項(xiàng)目分環(huán)境打包的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08