VUE框架Vue3下使用setup返回渲染函数实现页面渲染和setup配置解析------VUE框架

旧约Alatus

已于 2023-12-25 14:18:41 修改

阅读量1.4k

点赞数 15

分类专栏： # VUE框架前端文章标签： javascript ecmascript 前端 vue.js vue 前端框架 js

于 2023-12-22 11:05:33 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/135148456

版权

前端同时被 2 个专栏收录

328 篇文章 2 订阅

订阅专栏

VUE框架

249 篇文章 0 订阅

订阅专栏

<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>
<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>
    
    
    
    
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
<!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>









<div id="app"></div>

<script type="module" src="/src/main.js"></script>

</body>

</html>