VUE框架实现符合Vue3语法格式的页面与各个配置项解析------VUE框架-CFANZ编程社区

VUE框架实现符合Vue3语法格式的页面与各个配置项解析------VUE框架

<template>
    <HelloWorld></HelloWorld>
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
    <h1>{{ a }}</h1>
    <h1>{{ b }}</h1>
    <button @click="sayHello">按一下</button>
</template>
 
<script>
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}`);
        }
        // 如果想在模板语法或是插值中使用这两个属性就需要将这两个属性封装到一个对象中
        // 定义的属性方法都可以在模板中使用
        return {
            name : "Jack",
            age : 20,
            a : name1,
            b : age1,
            sayHello : sayHello
        }
    }
}
</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>

0 条评论