学习来源:【前端最新Vue2+Vue3基础入门到实战项目全套教程,自学前端vue就选黑马程序员,一套全通关!】https://www.bilibili.com/video/BV1HV4y1a7n4?vd_source=6dac49feb8d7fd76b147c8cf8c0c2b5a
Vue是什么?
- Vue是一个用于构建用户界面(基于数据动态渲染出用户看到的页面)的渐进式框架。
- 渐进式:学一部分用一部分
- 提升开发效率。
创建Vue实例
- 初始化渲染步骤:
(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>