What file does vue end with?

藏色散人
Release: 2022-11-19 16:54:06
Original
4294 people have browsed it

The end of vue is a file format customized by vue.js, called a single-file component; a ".vue" file is a separate component, and the html and related content of the component are encapsulated in the file. css and js realize the encapsulation of a component.

What file does vue end with?

The operating environment of this tutorial: windows7 system, vue3, Dell G3 computer.

What file ends with vue?

What file does vue end with?

What file does vue end with?

Single file component:

1. Files ending with .vue are a file format customized by vue.js and are called single-file components

2. A .vue file is a separate component within the file. It encapsulates the html, css and js related to the component, realizing the encapsulation of a component.

3. The .vue file consists of three parts

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

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

<style>
/*css,组件的样式*/
</style>
Copy after login

Define a component yourself:

What file does vue end with?

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>
Copy after login

What file does vue end with?

App.vue

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <!-- <comp-a></comp-a> -->
  <!-- <CompA></CompA> -->
  <CompA/>
</template>
 
<script>
// import HelloWorld from &#39;./components/HelloWorld.vue&#39;
import CompA from &#39;./components/CompA&#39;  //可以省略后缀名
 
export default {
  name: &#39;App&#39;,
  components: {
    // HelloWorld
// &#39;comp-a&#39;: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>
Copy after login

Browser input: http://localhost:8080/

What file does vue end with?

Recommended learning: "vue.js video tutorial"

The above is the detailed content of What file does vue end with?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
vue
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template