Vue3_简介和快速体验

BD_Marathon2025-12-21 16:44

简介

Vue发音类似view，是一款用于构建用户界面的JavaScript框架

两个核心功能

声明式渲染：Vue基于标准HTML拓展了一套模板语法，使得我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系
响应性：Vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM

快速体验

如下是非工程化方式进行体验

导入vue的依赖

核心的vue3的js文件

引入vue.js

clike 复制代码

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

也可以浏览器直接访问，然后复制里面内容

自己创建文件，然后将内容粘贴进来

编辑index.html

clike 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的页面</title>
    <!-- 导入vue的依赖   核心的vue3的js文件 -->
    <script src="js/vue.js">
    </script>
</head>
<body>
    <div id="app">
        <!-- <h1 v-text="message"> hello vue</h1> -->
        <h1 v-bind:style="colorStyle">{{message}}</h1>

        <button @click="fun1()">change</button>
    </div>
    <script>
        const app = Vue.createApp({
            setup(){
                // 定义数据 以变量 / 对象形式
                let message  = "hello1" 
                let colorStyle = {"background-color":"green"}       
                function fun1(){
                    alert("hello111")
                }
                // 在return中返回的变量/方法，才能够和HTML元素关联
                return {
                    message,
                    colorStyle,
                    fun1
                }   
            }
        })  
//将app对象挂载在指定的元素上，被挂载的元素内部就可以通过vue框架实现数据的渲染了
        app.mount("#app")
    </script>
</body>
</html>