VUE学习笔记（一）

最新推荐文章于 2026-01-05 12:22:51 发布
原创 最新推荐文章于 2026-01-05 12:22:51 发布 · 114 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript

本文详细介绍了Vue.js应用程序的基本结构，包括components组件（如Home和About）、routers路由以及store数据状态管理。在Vue中，路由切换不会导致整个页面刷新，而是仅替换router-view内的内容。当需要多个组件间的数据通信时，可以利用store，通过监听store的更新来同步各个组件的状态。App.vue作为入口组件，用于挂载和渲染应用。

1.components组件

1）Home 

2）About

2.routers路由

 3.store 数据状态管理

不管点击什么路由（Home或者About），切换的都只是App.vue下面的router-view，点击之后改变的内容不是整个页面的刷新，而是把router-view标签里的内容替换

 多个组件之间如和通过数据进行交流，即一个子组件的数据更新如何通知另一个组件的数据更新=>通过store，所有组件监听store更新内容，通知到每一个组件，达到各个组件的数据更新同步。

4.App.vue 入口组件

new Vue组件的时候挂载app这个id的节点，通过import App导入，把app节点渲染出来作为根节点进行挂载

Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue3学习笔记
qq_43276836的博客
07-02 1230
自定义事件发射this.$emit("todo-added",参数);v-on监听事件触发函数读取事件参数。
vue学习笔记一
weixin_59263248的博客
04-08 939
1 导包使用 在HTML的<script></script>标签导入js包。在vue.js的官网上可下载。尽量使用下载包到本地，使用cdn版本容易程序运行不出来，卡顿。 2 实例化vue对象 另写一个script标签 var vm = new Vue({ // 选项 }) 3 vue对象与HTML的标签绑定 <div id="app"> //html标签内容 </div> <script> var vm = new Vue
Vue学习笔记（一）
kaikai_sk的博客
08-26 1520
vue的学习笔记
Vue.js 学习笔记
m0_72686196的博客
03-01 2594
在前端开发领域，Vue.js 以其轻量级、易上手和高性能的特点，赢得了众多开发者的青睐。作为一名前端小白，我也踏上了学习 Vue.js 的旅程。本文将分享我的学习笔记，涵盖 Vue.js 的基础概念、常用指令、组件化开发、计算属性与侦听器、路由和状态管理等知识点，并附上代码示例，希望能帮助到同样在学习 Vue.js 的你。Vue.js 是一款用于构建用户界面的渐进式 JavaScript 框架。它采用直观的模板语法，降低了学习成本，并通过响应式数据绑定，实现了数据与视图的自动同步更新。
Vue 3 学习笔记
qq_46735055的博客
05-23 3794
禹神最新Vue3教程学习笔记
Vue学习笔记(一)
Blue_Pepsi_Cola的博客
01-06 901
官网Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue学习笔记
weixin_51621120的博客
09-06 2615
Vue 是一款用于构建用户界面的 JavaScript 框架。基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，高效地开发用户界面。
尚硅谷vue3学习笔记
2302_77862232的博客
01-07 3133
setup`是`Vue3`中一个新的配置项，值是一个函数，它是 `Composition API` ，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在`setup`中。特点如下：- `setup`函数返回的对象中的内容，可直接在模板中使用。- `setup`中访问`this`是`undefined`。- `setup`函数会在`beforeCreate`之前调用，它是“领先”所有钩子执行的。姓名：{{ name }}
vue 学习笔记
weixin_43971312的博客
05-22 2495
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
精选资源
vue学习笔记 学习笔记
05-07
这篇学习笔记主要涵盖了Vue的核心概念，包括组件通信、非父子组件间通信以及路由管理和状态管理。 ### 父子组件通信 #### 1) Props和`$emit` **Props** 是Vue中父组件向子组件传递数据的主要方式。在父组件中定义...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
vue学习笔记，B站黑马程序员的javaweb
11-05
Vue学习笔记 Vue是一个基于JavaScript的渐进式框架，用于构建用户界面。下面是关于Vue的学习笔记。 一、Vue基本知识 在Vue中，以点vue结尾的文件称为组件文件，包含三部分：template、script、style。template是...
精选资源
vue3学习笔记，亲测有效，持续更新
06-14
这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的关键概念和功能。 首先，Vue3 的安装是通过命令行工具 CMD 来完成的。在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite ...
Vue 2 项目中 template 使用可选链 ?. 导致的诡异编译报错及 webpack loader 配置坑
最新发布
GhostPaints的博客
01-05 630
最近在维护一个基于 Vue 2 的老项目（RuoYi-Vue 框架衍生）时，遇到一个特别诡异的编译问题：同一个项目，使用 pnpm run dev（连接测试环境）一切正常，但切换到 pnpm run dev:local（连接本地后端）时，启动就直接报错，错误信息指向 template 中的可选链运算符?这让我百思不得其其解——Vue 2.7 明明官方支持 template 中的?.，为什么本地环境就炸了？。
Vue 3 组件通信全方案详解：Props/Emit、provide/inject、事件总线替代与组合式函数封装
小二丶的博客
01-05 795
本文系统梳理Vue3中7种组件通信方式，重点剖析props/emits、provide/inject、v-model等核心方案，并通过实战案例演示应用场景。文章包含完整TypeScript代码实现、性能对比数据及5个常见反模式避坑指南。主要内容包括：父子组件通信（props/emits）、跨层级通信（provide/inject）、双向绑定（v-model）、逻辑复用（Composables）以及全局状态管理（Pinia）。
vue对接海康摄像头-H5player
林恒的博客
12-31 427
H5视频监控系统开发摘要 本文介绍了基于Vue的H5视频监控系统核心功能实现：1）通过public目录引入JS资源；2）响应式视口布局，使用媒体查询适配不同屏幕；3) 树形监控点列表展示，通过海康API获取区域/摄像头数据并构建树结构；4) 视频流获取逻辑，支持主/子码流切换；5) 球机云台控制功能实现，包括方向指令发送。关键代码包含窗口resize监听、API请求封装及双次点击触发视频加载等交互设计，附件提供播放器性能说明文档。
Linux环境下前后端分离项目（Spring Boot + Vue）手动部署全流程指南
Ahatc的博客
01-01 1002
本文详细记录了在 Linux 环境下手动部署前后端分离项目（Spring Boot + Vue）的完整流程。以若依框架为例，从 JDK、Redis、Nginx 等基础环境准备讲起，深入解析了后端 Maven 打包与 nohup 后台启动策略，以及前端 Vue 生产环境构建与静态资源目录规划。重点攻克了 Nginx 配置难点，包括反向代理接口转发、解决跨域问题以及修复 Vue History 模式刷新 404 的具体配置代码。适合开发者快速掌握服务器应用上线技巧，规避常见部署陷阱，实现项目的高效交付。
写一篇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
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值