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