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 組件名稱 from '.vue文件的路徑'
使用render函數(shù)
var vm=new Vue({
?? ?render:function(createElements){
?? ??? ?return createElements(組件名稱)
?? ?}
})render的簡(jiǎn)寫：
render:c=>c(組件名稱)
頁(yè)面就會(huì)把該Vue實(shí)例用.vue文件寫的組件覆蓋
更加方便vue的組件化開發(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)文章
Vue3.0 響應(yīng)式系統(tǒng)源碼逐行分析講解
這篇文章主要介紹了Vue3.0 響應(yīng)式系統(tǒng)源碼逐行分析講解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue子組件props從父組件接收數(shù)據(jù)并存入data
這篇文章主要介紹了Vue子組件props從父組件接收數(shù)據(jù)并存入data的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue3編程流暢技巧使用setup語(yǔ)法糖拒絕寫return
這篇文章主要為大家介紹了Vue3編程流暢技巧使用setup語(yǔ)法糖拒絕寫return的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
詳解mpvue小程序中怎么引入iconfont字體圖標(biāo)
這篇文章主要介紹了詳解mpvue小程序中怎么引入iconfont字體圖標(biāo)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
下面小編就為大家分享一篇vue2.0安裝style/css loader的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)踐總結(jié)
本文主要介紹了Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)踐總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue video和vue-video-player實(shí)現(xiàn)視頻鋪滿教程
這篇文章主要介紹了vue video和vue-video-player實(shí)現(xiàn)視頻鋪滿教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了vue項(xiàng)目中使用vuedraggable,本文給大家介紹了錯(cuò)誤問(wèn)題分析及解決方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了如何在Vue項(xiàng)目中使用vuex問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解iview的checkbox多選框全選時(shí)校驗(yàn)問(wèn)題
這篇文章主要介紹了詳解iview的checkbox多選框全選時(shí)校驗(yàn)問(wèn)題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06