vue는 어떤 파일로 끝나나요?

vue는 단일 파일 구성 요소라고 하는 vue.js에서 사용자 정의한 파일 형식으로 끝납니다. ".vue" 파일은 별도의 구성 요소이며 해당 구성 요소와 관련된 html, css 및 js가 파일에 캡슐화되어 있습니다. 구성 요소가 구현됩니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3, Dell G3 컴퓨터.

vue로 끝나는 파일은 무엇인가요?

단일 파일 구성 요소:

1. vue로 끝나는 파일은 단일 파일 구성 요소라고 하는 vue.js에서 사용자 정의한 파일 형식입니다. .vue 파일은 별도의 컴포넌트입니다. 해당 컴포넌트와 관련된 html, css, js가 파일에 캡슐화되어 컴포넌트의 캡슐화를 구현합니다.

3. .vue 파일은 세 부분으로 구성됩니다.

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

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

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

직접 구성 요소 정의:

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>

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>

브라우저 입력: http:// localhost :8080/

추천 학습: "

vue.js 비디오 튜토리얼

"

위 내용은 vue는 어떤 파일로 끝나나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!