Vue berakhir dengan fail apa?

Penghujung vue ialah format fail yang disesuaikan oleh vue.js, dipanggil satu komponen fail ".vue" ialah komponen yang berasingan, dan html serta kandungan komponen yang berkaitan dirangkumkan dalam css dan js merealisasikan enkapsulasi komponen.

Persekitaran pengendalian tutorial ini: sistem windows7, vue3, komputer Dell G3.

Fail apakah yang berakhir dengan vue?

Komponen fail tunggal:

1. Fail yang berakhir dengan .vue ialah format fail yang disesuaikan oleh vue.js, dipanggil komponen fail tunggal

2. Fail .vue ialah komponen yang berasingan, dalam fail Ia merangkumi html, css dan js yang berkaitan dengan komponen, merealisasikan pengkapsulan komponen.

3. Fail .vue terdiri daripada tiga bahagian

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

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

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

Tentukan sendiri komponen:

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>

Input penyemak imbas: http://localhost:8080/

Pembelajaran yang disyorkan: "tutorial video vue.js"

Atas ialah kandungan terperinci Vue berakhir dengan fail apa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!