VUE学习day one

学习来源:【前端最新Vue2+Vue3基础入门到实战项目全套教程,自学前端vue就选黑马程序员,一套全通关!】https://www.bilibili.com/video/BV1HV4y1a7n4?vd_source=6dac49feb8d7fd76b147c8cf8c0c2b5a

Vue是什么?

  1. Vue是一个用于构建用户界面(基于数据动态渲染出用户看到的页面)的渐进式框架。
  2. 渐进式:学一部分用一部分
  3. 提升开发效率。

创建Vue实例

  1. 初始化渲染步骤:
    (1)准备容器
    (2)引包(官网)-开发版本/生产版本
    (3)创建Vue实例 new Vue()--
    (4)制定配置项--渲染数据
    (4-1)el制定挂载点
    (4-2)data提供数据

2.实操

<body>
    <div class="box"></div>
    <div class="box2"></div>

<div id="app">
    <!--编写一些用于渲染的代码逻辑-->
    <h1>{{ msg }}</h1>
    <p1>{{count}}</p1>
</div>

<!--引入:开发版本包-包含完整的注释和警告-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    //引用Vue.js核心包,在全局环境下,就会有Vue构造函数
    const app=new Vue(
        {
            el:'#app',
            //el配置选择器,制定Vue管理的是哪个盒子
            data:{
                //data提供数据
                msg:'Hello World!',
                count:222
            }
        }
    )
    </script>

</body>
posted @   符号话  阅读(10)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示