Vue项目引入文件

Vue项目引入文件Tese01.vue

<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> -->
<!-- 老弟:第一步创建Vue文件 -->
<Tese01></Tese01>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
//第二步: 引入组件
import Tese01 from './components/Tese01.vue'
export default {
name: 'app',
components: {
// HelloWorld
//第三步:注册组件
Tese01
}
}
</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>
<template>
<div>
<h1>老马{{a}}</h1>
<button @click = "add">加一老弟</button>
</div>
</template>
<script>
export default {
data() {
return {
a:10
}
},
methods:{
add() {
this.a++
}
}
}
</script>
<style>
</style>
posted @   爱豆技术部  阅读(598)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· winform 绘制太阳,地球,月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
TOP
点击右上角即可分享
微信分享提示