Vue中的.vue文件的使用方式

目录
  • 定义.vue文件
  • 引用.vue文件
  • 使用render函数
  • 什么是.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>`
})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue2.0开发入门笔记之.vue文件的生成和使用

    vue2.0开发入门笔记之.vue文件的生成和使用

    这几天新项目用vue2.0开发,由于之前没用过vue,拿到项目框架看到都是.vue文件, 不知道怎么用,以下是关于.vue文件的发现: 1.一个.vue文件是一个封装的组件,在.vue文件里可以写 html, css, js 其中template 中写html 代码,其实就是定义模板. 2.各个.vue之间样式不是独立的,同一选择器在不同的.vue里只要满足选中的条件就可以起作用.比如我在箭头1指的文件里定义了样式 .box{ width:200px; },如果在箭头2指的文件里也有 .box,

  • 关于单文件组件.vue的使用

    vuejs 自定义了一种.vue文件,可以把html, css, js 写到一个文件中,从而实现了对一个组件的封装, 一个.vue 文件就是一个单独的组件.由于.vue文件是自定义的,浏览器不认识,所以需要对该文件进行解析. 在webpack构建中,需要安装vue-loader 对.vue文件进行解析.在 sumlime 编辑器中,我们 书写.vue 文件,可以安装vue syntax highlight 插件,增加对文件的支持. 环境搭建完毕,利用vue-router实现了页面跳转,那么现在要

  • vue文件树组件使用详解

    本文实例为大家分享了vue文件树组件的实现方法,供大家参考,具体内容如下 本文主要是分析vue官方仓库里的文件树组件[vue github] demo可以查看 https://codepen.io/shayminsky21/pen/xXwxgm 首先是html模板: <li> <div //文件夹加粗表示 :class="{bold: isFolder}" //处理单击事件 打开闭合文件列表 @click="toggle" //处理双击事件 双击子

  • 初识 Vue.js 中的 *.Vue文件

    初识 Vue.js 中的 *.Vue文件

    什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧和丰富的经验,通过对其进行相互连接.修改和扩大,构成所要求的系统.)Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 什么是*.vue文件 首先,我们用 vue-cli

  • 在vue中写jsx的几种方式

    目录 版本 render函数 jsx/tsx 使用jsx的几种方式 使用js对象注册component 使用.vue文件 vue2.7在.vue文件中结合compositionApi和jsx 版本 本文版本配置 vue: 2.7.2 vue-cli: ~4.5.18: 本文代码github仓库地址 render函数 render函数和vue中的template是互斥的,template最终是要编译成virtual Dom的,而render函数可以更直接构建virtual Dom: virtual

  • Vue中引入样式文件的方法

    一.在vue中使用scss 首先进行安装如下依赖: cnpm i sass-loader node-sass -D 二.vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis&

  • 详解Vue中组件传值的多重实现方式

    vue中组件传值方式整理 1.我们最熟悉的父子组件传值 父->子 props 子->父 $emit 这些我们最常用的就不说了,如果有不理解的,俺这儿有篇不错的文章,链接奉上~ https://www.cnblogs.com/LoveAndPeace/p/7273648.html 2.兄弟组件或无关系组件之间的传值 我们最常用的方式采用一个第三方变量 俗称eventbus 通过其中一个$emit发另一个$on接收的方式 实现组件传值 main.js中挂载一下 在其中一个页面$emit 另一个页面

  • 详解Vue中使用Echarts的两种方式

    1. 直接引入echarts 先npm安装echarts npm install echarts --save 开发: main.js import myCharts from './comm/js/myCharts.js' Vue.use(myCharts) myCharts.js /** * 各种画echarts图表的方法都封装在这里 */ import echarts from 'echarts' (function() { var chart = {}; chart.install =

  • Vue中keep-alive的两种应用方式

    Vue中keep-alive的使用我总结的有两种方式应用: 首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件.当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时又重新初始化.现在有需求切换回来不销毁组件,保持原来的状态,此时用keep-alive就可以实现了 我创建了两个组件,可以相互切换 组件1: 组件2: 第一种方式 在组件1的路由中添加 meta: { keepAlive: true }, 也就是当前路由需要缓存 此时路由设置完毕,keep-aliv

  • 详解如何实现在Vue中导入Excel文件

    详解如何实现在Vue中导入Excel文件

    目录 一.安装依赖 二.template中 三.script中js代码 以将此Excel导出为json数据为例 一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.template中 <span>导入表格</span> <input id="upload" type="file" @chan

  • Vue中通过Vue.extend动态创建实例的方法

    在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = "show"来控制它的显示隐藏.如下所示: <div> <button @click = "show = !show">弹出</button> <span v-if = "show">这是一条通过按钮控制显示隐藏的信息</span>

  • Android Studio中生成aar文件及本地方式使用aar文件的方法

    Android Studio中生成aar文件及本地方式使用aar文件的方法

    主要讲解Android Studio中生成aar文件以及本地方式使用aar文件的方法,具体内容详情如下所示: 在Android Studio中对一个自己库进行生成操作时将会同时生成*.jar与*.aar文件. 分别存储位置: *.jar:库/build/intermediates/bundles/debug(release)/classes.jar *.aar:库/build/outputs/aar/libraryname.aar 两者区别: *.jar:只包含了class文件与清单文件,不包含

  • Vue中的.vue文件的使用方式

    目录 定义.vue文件 引用.vue文件 使用render函数 什么是.vue文件,它的作用是什么 需要安装vue-loader npm i vue-loader vue-template-complier -D 然后在配置文件中新增匹配规则 {test:/\.vue$/,use:'vue-loader'} 定义.vue文件 <template> <!--这里定义html模板--> </template> <script> //这里定义js //在这里导入文

  • vue中使用mockjs配置和使用方式

    vue中使用mockjs配置和使用方式

    目录 mockjs配置和使用方式 需求 步骤 mock使用及mock无侵入的解决 什么是mock? 为什么要用到mock? 如何使用mock? mock无侵入式配置 mockjs配置和使用方式 需求 在前后端分离的开发中,需要前后端同时开发,但是在后端完成前,暂时是没有数据返回给前端使用的,如果先写静态后面再改,就有重复工作的内耗存在. 所以我们需要一种简单快速的模拟数据的模块,本文选的是mockjs. 步骤 1.安装mockjs npm install mockjs 2.在项目的src文件夹下

随机推荐