<template>
<HelloWorld></HelloWorld>
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
<h1>{{ a }}</h1>
<h1>{{ b }}</h1>
<button @click="sayHello('Jack',20,$event)">按一下</button>
</template>
<script>
// 导入一个渲染函数
import {h} from 'vue';
import HelloWorld from './components/HelloWorld.vue';
export default {
name : "App",
components : {HelloWorld},
// setup是vue3中新增的一个配置项
// setup是一个函数
setup(){
// setup方法没有this对象
console.log(this);
// data,methods,computed,watch需要配置到这里
// 包括生命周期钩子函数在内都配置到这里
// 尽管他们还是可以配置到vc对象里面,但是那属于vue2的语法规则
// 最好不要语法规则混用
// 数据直接定义
let name1 = "Rose";
let age1 = 20;
// function sayHello(){
// alert(`姓名${name1}年龄:${age1}`);
// }
function sayHello(name,age,event){
alert(name + age);
alert(event.target.innerText);
}
// 如果想在模板语法或是插值中使用这两个属性就需要将这两个属性封装到一个对象中
// 定义的属性方法都可以在模板中使用
return {
name : "Jack",
age : 20,
a : name1,
b : age1,
sayHello : sayHello
}
// 可以返回一个渲染函数
// return function(){
// return h('h1',"欢迎学习VUE3");
// }
// 简写形式
// return () => h('h1',"欢迎学习VUE3");
}
}
</script>
<style>
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<!-- 和webpack创建的工程区别,index.html放在了pubic的外面 -->
<!-- Vite以index.html作为入口,不再使用main.js作为入口了 -->
<!-- 对于vite构建工具来说,配置文件时vite.config.js -->
<!-- 这个vite.config.js类似于webpack打包的vue.config.js -->
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
