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>
相关推荐
訾博ZiBo8 分钟前
【Vibe Coding】001-前端界面常用布局
前端
软件技术NINI8 分钟前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
IT_陈寒11 分钟前
《Redis性能翻倍的7个冷门技巧,90%开发者都不知道!》
前端·人工智能·后端
歪歪10021 分钟前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手22 分钟前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
ZYMFZ30 分钟前
python面向对象
前端·数据库·python
长空任鸟飞_阿康35 分钟前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能
lapiii35839 分钟前
快速学完React计划(第一天)
前端·react.js·前端框架
苏打水com40 分钟前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html