vue结尾的是什么文件

教程操作环境:windows7系统、vue3、Dell G3电脑。

vue结尾的是什么文件?

94810999020bf0c98ba21139f90a38d.jpg

d03c06d8d1e23106e0d1c12c50a5edf.jpg

单文件组件 :

1、以.Vue结尾的文件,是vue.js自定义的一种文件格式,称为单文件组件

2、一个.vue文件就是一个单独的组件,在文件内封装了该组件相关的htmlCSSjs,实现了对一个组件的封装。

3、.vue文件由三部分组成

<tenplate>
<!--html,组件的页面结构-->
</template>

<script>
//js,组件的功能配置
</script>

<style>

</style>

自己定义一个组件:

06ac5ae734f12641694f63492eb137a.jpg

CompA.vue

<template>
<div>
<h2>自定义组件</h2>
<p>{{ name }}</p>
<button @click="change">修改name</button>
</div>
</template>
 
<script>
export default{
data(){
return{
name:"huit"
}
},
methods:{
change(){
this.name="juju"
}
}
}
</script>
 
<style>
h2{
color:red;
}
</style>

4f20fd72ee72e914f49d8ac9459ea26.jpg

App.vue

<template>
  <!-- <img alt="Vue loGo" src="https://www.lsjlt.com/skin/default/image/lazy.gif" class="lazy" data-original=""./assets/logo.png"">
  <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <!-- <comp-a></comp-a> -->
  <!-- <CompA></CompA> -->
  <CompA/>
</template>
 
<script>
// import HelloWorld from './components/HelloWorld.vue'
import CompA from './components/CompA'  //可以省略后缀名
 
export default {
  name: 'App',
  components: {
    // HelloWorld
// 'comp-a':CompA
// CompA:CompA //驼峰式写法
CompA  //帕斯卡式,首字母大写,es6的简写
  }
  
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -WEBkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

浏览器输入:Http://localhost:8080/

88ed9f408aefd755657b0e3ec511506.jpg

以上就是vue结尾的是什么文件的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: vue结尾的是什么文件

本文链接: https://www.lsjlt.com/news/173516.html (转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢

  • vue中computed指的是什么

    这篇文章主要介绍“vue中computed指的是什么”,在日常操作中,相信很多人在vue中computed指的是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中computed指的是什么”的疑惑有所
    阅读数:602 computed vue
  • vue创建项目时sass指的是什么

    这篇文章主要介绍“vue创建项目时sass指的是什么”,在日常操作中,相信很多人在vue创建项目时sass指的是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue创建项目时sass指的是什么”的疑惑有所
    阅读数:756 sass vue
  • vue中babel指的是什么意思

    这篇文章将为大家详细讲解有关vue中babel指的是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在vue中,Babel是一个JavaScript编译器,主要用于将采
    阅读数:437 vue babel
  • vue中spa指的是什么意思

    这篇文章给大家分享的是有关vue中spa指的是什么意思的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在vue中,spa全称“single-page application”,中文意思
    阅读数:226 vue spa
  • vue组件化开发指的是什么意思

    小编给大家分享一下vue组件化开发指的是什么意思,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!在vue中,组件化开发指的是将复杂的业务拆分为多个组件,每个组件依赖的CSS、JS、模板、图片等资
    阅读数:862 vue
  • vue是什么软件

    vue是一款视频剪辑软件,能够设置拍摄时候的色调滤镜,拍摄的时长,这些拍摄的视频,可以直接用到我们要制作的剪辑小视屏当中,而目前vue还代表了一块火热的JavaScript框架,它是一套构建用户界面的渐进式的,采用自底向上增量开发的设计,易
    阅读数:298 vue
  • vue-automation是什么

    本篇内容主要讲解“vue-automation是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue-automation是什么”吧!这是什么vue-automation 是一款开箱即用的
    阅读数:441 vue
  • Vue.observable是什么

    这篇文章主要讲解了“Vue.observable是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue.observable是什么”吧!让一个对象可响应。Vue 内部会用它来处理 dat
    阅读数:151
  • vue生命周期是什么

    本篇内容介绍了“vue生命周期是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在vue中,生命周期是指vu
    阅读数:140 vue
  • vue与react是什么框架

    本篇内容介绍了“vue与react是什么框架”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!vue与react属
    阅读数:711 react vue
  • 解析VUE中nextTick是什么

    nextTick是Vue提供的一个全局API,由于Vue的异步更新策略导致我们对数据的修改不会立刻体现,在DOM变化上,此时如果想要立即获取更新后的DOM状态,就需要使用这个方法,这篇文章主要介绍了解析VUE中nextTick,需要的朋友可以参考下
  • vue中nextTick的作用是什么

    这篇文章给大家介绍vue中nextTick的作用是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。为什么要用nextTick请看如下一段代码new Vue({ el: #app, data: {list:
    阅读数:132 vue nexttick
  • Vue中Watcher的作用是什么

    Vue中Watcher的作用是什么,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。就是这个函数:// Line-7531Vue$3.prototype.$mount = f
    阅读数:808 vue watcher
  • Vue中transition的作用是什么

    Vue中transition的作用是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。了解构建过程既然要看源码,就先让Vue在开发环境跑起来,首先从GitHub clone
    阅读数:418 vue transition
  • Vue.use的作用是什么

    本篇内容介绍了“Vue.use的作用是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在使用 ElementUI 组件的时候,通常我们会这
    阅读数:850 vue
  • vue中发送请求的方法是什么

    这篇文章主要讲解了“vue中发送请求的方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中发送请求的方法是什么”吧!在vue中,需要使用vue-re
    阅读数:863 vue
  • vue-router的路由守卫是什么

    这篇文章主要介绍“vue-router的路由守卫是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue-router的路由守卫是什么”文章能帮助大家解决问题。vue
    阅读数:109 vue router
  • vue和jquery用的语言是什么

    这篇文章主要介绍“vue和jquery用的语言是什么”,在日常操作中,相信很多人在vue和jquery用的语言是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue和jquery用的语言是什么”的疑惑有所
    阅读数:643 vue jquery
  • bootstrap和vue的区别是什么

    bootstrap和vue的区别:1、bootstrap和vue不是一个层级的东西;2、bootstrap是基于HTML、CSS、JavaScript开发的前端开发框架,而vue是一套用于构建用户界面的渐进式JavaScript框架;3、b
    阅读数:469 bootstrap vue
  • vue中loader的作用是什么

    vue中loader可以用来解析和转换.vue文件,提取出每个语言块,有必要的情况下会分别把他们交给对应的loader去处理,它还能够在.vue文件中添加额外的自定义块来实现项目的特殊需求。
    阅读数:425 vue