Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Vue berakhir dengan fail apa?

Vue berakhir dengan fail apa?

藏色散人
藏色散人asal
2022-11-19 16:54:064408semak imbas

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.

Vue berakhir dengan fail apa?

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

Fail apakah yang berakhir dengan vue?

Vue berakhir dengan fail apa?

Vue berakhir dengan fail apa?

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:

Vue berakhir dengan fail apa?

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>

Vue berakhir dengan fail apa?

App.vue

<template>
  <!-- <img src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
  <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/

Vue berakhir dengan fail apa?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn