学习Vue2收藏这一篇就够了（如何创建Vue实例）

于 2024-07-27 17:38:42 发布
阅读量221 收藏 2
点赞数 2
文章标签： vue.js 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66011019/article/details/140738622
版权

什么是Vue？

Vue是什么：是一个用于构建用户界面的渐进式框架

什么是构建用户界面：基于数据动态渲染页面

什么是渐进式：循序渐进的学习

什么是框架：一整套完整的项目解决方案

创建Vue实例

核心步骤（4步）：

  1. 准备容器

  2. 引包（官网） — 开发版本/生产版本

  3. 创建Vue实例 new Vue()

  4. 指定配置项，渲染数据

  • el:指定挂载点

  • data提供数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js Example</title>
</head>
<body>
    <div class="box2"></div>
    <div class="box"></div>

    <div id="app">
        &
最低0.47元/天 解锁文章
元气满满的热码式
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue学习之从入门到神经(两万字收藏篇)
白大锅的博客，毕设WangLoveBai_999
07-20 37万+
Vue史诗级教程系列文章，欢迎订阅专栏
学习Vue2.x这一篇就够了
热门推荐
轻松的小希
12-09 3万+
目录第一章 Vue2.x快速入门1.1、Vue2.x官网1.2、Vue2.x介绍1.3、Vue2.x特点1.4、Vue2.x入门1.5、Vue2.x实例1.5.1、el1.5.2、data1.5.3、methods1.5.4、watch1.5.5、computed第二章 Vue2.x指令指南2.1、模板语法2.1.1、插值2.1.1.1、text2.1.1.2、html2.1.1.3、attribute2.1.1.4、expression2.1.2、指令2.1.2.1、参数2.1.2.2、动态参数2.1.2
学习 Vue组件化编程 这一篇就够了
Laptoy的博客
04-23 2369
Vue组件化编程详解
Vue 2到Vue3 整合（详细易懂）小白看这一篇就够了
2301_77638787的博客
07-31 2134
尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习，在此基础上加强知识的认知深度。虽然我尽量以通俗易通的形式，将内容体现出来，但水平毕竟有限，望大家海涵。
vue的基础知识大全，一篇文章就够了！
qq_65010070的博客
09-22 5677
Vue的基础知识，持续整理中。。。
前端主流框架vue学习笔记第一篇
12-10
在Vue实例中，我们可以创建一个数组来存储Todo Items，并实现`addItem()`方法向数组中添加新项。 ```javascript new Vue({ el: '#app', data: { title: '', desc: '', todos: [] }, methods: { addItem() {...
Vue2 使用 Echarts 创建图表实例代码
08-30
本篇文章主要介绍了 Vue2 使用 Echarts 创建图表实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。下面是对应的知识点总结： 一、Echarts 在 Vue 项目中的应用 * 使用 cnpm 安装 Echarts：`cnpm ...
学习Vue组件实例
08-27
学习 Vue 组件实例是学习 Vue 框架的基础，了解 Vue 实例对象的创建、配置和生命周期是开发 Vue 应用程序的关键。本篇文章将带您深入了解 Vue 实例对象的相关内容和重要知识点。 什么是 Vue 实例对象？ 根据官方...
vue2.X组件学习心得(新手必看篇)
08-30
对于非父子组件间的通信，Vue 提供了一种全局事件总线（Event Bus）的方法，通过创建一个新的 Vue 实例作为中介，组件间可以通过这个实例发送和接收事件。此外，Vuex 是一个状态管理库，适用于更复杂的应用，可以...
vue3 学习笔记17 -- 基于el-menu封装菜单
最新发布
weixin_46328739的博客
07-23 239
前提条件：组件创建完成。
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 333
Python Formulas库，JSON格式导出导入。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 290
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
【vueUse库Time模块各函数简介及使用方法--全篇】
xiejunlan的博客
07-23 733
vueUseTime函数基本使用示例实现使用方法注意假设的 `useTimeAgo` 函数使用方法。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 295
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Vue的模板编译：深入理解渲染函数与预编译模板
哎 你看的博客
07-22 1092
Vue.js 是一个用于构建用户界面的渐进式框架，它的核心特性之一是其响应式和声明式的模板语法。Vue 的模板不仅仅是简单的字符串插值，它们会被编译成渲染函数，这个过程涉及到将模板字符串转换成 JavaScript 代码。本文将深入探讨 Vue 的模板编译过程，并讨论如何使用预编译模板来提高应用性能。
vue封装防重复点击事件，并全局挂载使用
m0_47791238的博客
07-22 243
在utils文件夹中(可以和普通工具类存放一起，也可以按自己需求存放)创建js文件 preventReClick.js。1、创建防重复点击的js文件，在js文件中添加防重复点击的方法。
vue zip文件下载请求封装与使用
Anlittlecat的博客
07-23 326
Excel的话把type改成 { type: ‘application/vnd.ms-excel’ }这里把响应超时时间注释是文件下载接口返回需要较长时间。axios封装（重点是响应拦截）
7 Vue3
ever__ever的博客
07-22 1471
vue3支持vue2的大多数特性，实现对vue2的兼容
Vue3--
surx123456的博客
07-23 312
pubsub$busmitt接收数据的：提前绑定好事件（提前订阅消息）提供数据的：在合适的时候触发事件（发布消息）
写一篇vue学习笔记
01-18
以下是一篇关于Vue学习的简单笔记： 1. Hello World ```html <!DOCTYPE html> <html> <head> <title>Vue Hello World</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{ message }}</h1> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html> ``` 这是一个简单的Vue示例，通过Vue实例的data属性来绑定数据，然后在模板中使用双花括号语法来显示数据。 2. Vue Router的安装和使用 ```shell npm install vue-router ``` 安装Vue Router模块。 ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app') ``` 这是一个简单的Vue Router的使用示例，首先需要在Vue中引入Vue Router模块并使用它，然后定义路由规则，最后创建Vue实例时将路由对象传入。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

元气满满的热码式

感谢您的支持！我会继续努力发布

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值