Vue入门-如何创建一个Vue实例

创建一个一个Vue实例总共分为四步:

1.创建一个容器

2.引包:地址栏搜索v2.cn.vuejs.org这是vue2的官网地址,把2去掉就是vue3的官网地址,我们的包分为开发版本和生产版本,开发版本包含完整的警告和调试模式

生产版本删除了警告,37.70KB min+gzip

开发版本在线链接http://<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

3.创建实例:在<script>标签中new Vue()

4.创建配置=》渲染数据:el:用来指定容器,data:用来渲染数据

示例如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue1</title>
</head>
<body>
    
    <div id="app">
    <!-- 容器 -->
        {{name}}
    </div>
    <!-- 引包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        //创建vue实例
        const app = new Vue({
            el:'#app',//通过el配置选择器,即选择容器
            data:{      //通过data提供渲染数据
                name:'李明'
            }
        })
    </script>

</body>
</html>
相关推荐
然我2 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子7 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹10 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器17 分钟前
指定阿里镜像原理
前端
枷锁—sha22 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha23 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜39 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux