Vue中的.vue文件的使用方式
更新时间：2022年03月29日 08:39:59 作者：程序员徐小白
这篇文章主要介绍了Vue中的.vue文件的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
需要安装vue-loader
npm i vue-loader vue-template-complier -D
然后在配置文件中新增匹配规则
{test:/\.vue$/,use:'vue-loader'}定义.vue文件
<template> <!--这里定义html模板--> </template>
<script>
//这里定义js
//在这里导入文件
import Vue from 'vue'
export default {
//在这里定义组件的数据和方法
data(){
return {
chart:null
}
},
methods:{
}
}
</script><!--这里定义样式 可以使用scoped属性，使得这里的样式只有这个文件中的组件可以使用 --> <style> </style>
引用.vue文件
在.js文件中应用
import 组件名称 from '.vue文件的路径'
使用render函数
var vm=new Vue({
render:function(createElements){
return createElements(组件名称)
}
})render的简写：
render:c=>c(组件名称)
页面就会把该Vue实例用.vue文件写的组件覆盖
更加方便vue的组件化开发
什么是.vue文件，它的作用是什么
.vue文件就是一个（或局部）组件，又或者说是一个对象在导出时。
在Vue.createApp({ app }) app是一个.vue文件，里面包括 三个部分template 和 js css。
然后再对比下面图片，是不是很像，下面一个注册一个组件需要 template js，所以说，.vue文件就是一个组件，或者一个对象。
这里引用一个 vue官方的全局组件实例来说明
// 创建一个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>`
})以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了拿来即用的vue旋转木马组件demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了Vue CLI 3搭建vue+vuex最全分析(推荐)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
vue elementUI table表格数据 滚动懒加载的实现方法
这篇文章主要介绍了vue elementUI table表格数据滚动懒加载的实现方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）
这篇文章主要介绍了vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用） ,需要的朋友可以参考下2018-11-11
在计算字符数时,一般情况下,英文字符、数字和大部分符号都可以被视为占一个字符长度,因为它们是单个字节,然而,对于某些特殊字符,如表情符号和部分非英文字符,会被认为占据了多个字符长度,本文给介绍了vue处理emoji表情占位符的操作方法,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了封装一个Vue文件上传组件案例详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
这篇文章主要介绍了vue自定义加载指令的相关知识，主要包括创建加载组件，创建指令的方法，结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2022-06-06
本文主要介绍了vue中table表头单元格合并(附单行、多级表头代码)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了vue项目不能使用localhost访问的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue 项目分环境打包的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论