<template>
<h1>一个人的信息</h1>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<h2>性别:{{sex}}</h2>
<h2>a的值:{{a}}</h2>
<button @click="sayHello">说话(vue3所配置的--sayHello)</button>
<br>
<br>
<button @click="sayWelcom">说话(vue2所配置的--sayWelcom)</button>
<br>
<br>
<button @click="test1">测试一下在vue2的配置中去读取Vue3的数据、方法</button>
<br>
<br>
<button @click="test2">测试一下在vue3的配置中去读取Vue2的数据、方法</button>
</template>
vue2中值与方法的使用
<script>
export default{
name:'App',
data(){
return {
sex:'男',
}
},
methods:{
sayWelcom() {
alert('欢迎')
},
test1() {
console.log(this.sex);
console.log(this.name);
console.log(this.age);
console.log(this.sayHello);
this.sayHello()
}
}
}
</script>
vue3
<script>
export default{
name:'App',
setup(){
let name = '张三'
let age = 18
let a = 200
function sayHello(){
alert('我叫'+name+',我'+age+'岁了,你好啊')
}
function test2() {
console.log(name);
console.log(age);
console.log(this.sex);
console.log(this.sayWelcom);
}
return {
name,
age,
a,
sayHello,
test2
}
}
}
</script>