VUE学习day one
学习来源:【前端最新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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步