vue3传统引入js初始化

最新推荐文章于 2024-06-24 19:10:01 发布

大猫会长

最新推荐文章于 2024-06-24 19:10:01 发布

阅读量326

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/aexwx/article/details/133527029

版权

本文展示了如何使用Vue3创建一个简单的HTML页面，包含组件化结构、声明式数据绑定和方法处理。通过`ref`和`reactive`实现数据管理，`mounted`钩子和自定义事件处理函数提供交互功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>演示例子</title>
</head>
<body>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <h1>{{ message }}</h1>
  <h2>{{ haha }}</h2>
<h3>{{info}}</h3>
  <div @click="aa">点我点我</div>
  <button @click="handleClick">点击handleClick</button>
  <button @click="handleReact">点击handleReact</button>
</div>

<script>
  const { createApp, ref,reactive,onMount } = Vue

  createApp({
    setup() {
      var message = ref('Hello vue!')
      var info= reactive({age:18,sex:'男'})
      const handleClick = () => {
        message.value = '世界'
      }
       const handleReact = () => {
        info.age = 99
      }
      return {
        message, info,handleClick,handleReact
      }
    },
    data(){
      return {
        haha:789
      }
    },
    mounted(){
      console.log('======123',123);
    },
    methods:{
      aa(){
       this.haha=999
      }
    }

  }).mount('#app')
</script>
</body>
</html>