站長(zhǎng)資訊網(wǎng)
vue結(jié)尾的是vue.js自定義的一種文件格式，稱為單文件組件；一個(gè)“.vue”文件就是一個(gè)單獨(dú)的組件，在文件內(nèi)封裝了該組件相關(guān)的html、css和js，實(shí)現(xiàn)了對(duì)一個(gè)組件的封裝。
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
本教程操作環(huán)境：windows7系統(tǒng)、vue3、Dell G3電腦。
vue結(jié)尾的是什么文件?
單文件組件 ：
1、以.vue結(jié)尾的文件，是vue.js自定義的一種文件格式，稱為單文件組件
2、一個(gè).vue文件就是一個(gè)單獨(dú)的組件，在文件內(nèi)封裝了該組件相關(guān)的html、css和js，實(shí)現(xiàn)了對(duì)一個(gè)組件的封裝。
3、.vue文件由三部分組成
<tenplate> <!--html，組件的頁面結(jié)構(gòu)--> </template> <script> //js，組件的功能配置 </script> <style> /*css,組件的樣式*/ </style>
登錄后復(fù)制
自己定義一個(gè)組件：
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>
登錄后復(fù)制
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 './components/HelloWorld.vue' import CompA from './components/CompA' //可以省略后綴名 export default { name: 'App', components: { // HelloWorld // 'comp-a':CompA // CompA:CompA //駝峰式寫法 CompA //帕斯卡式，首字母大寫，ES6的簡(jiǎn)寫 } } </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>
登錄后復(fù)制
瀏覽器輸入：http://localhost:8080/
推薦學(xué)習(xí)：《vue.js視頻教程》
