VUE基础-北京尧图网络

一、Vue.js 基础概念1.1 Vue.js 简介Vue.js 是一款用于构建用户界面的渐进式 JavaScript 框架。它采用直观的模板语法降低了学习成本并通过响应式数据绑定实现了数据与视图的自动同步更新。Vue.js 的组件化开发模式使代码结构更加清晰、可维护性强非常适合构建大型应用。1.2 Vue.js 的特点易学易用Vue.js 的 API 设计简洁明了即使是初学者也能快速上手。响应式数据绑定通过双向绑定v-model数据与视图能够自动同步更新减少了手动操作 DOM 的繁琐。组件化开发将 UI 界面拆分成多个独立的组件提高了代码的复用性和可维护性。生态丰富Vue.js 拥有完善的生态系统包括 Vue Router、Vuex 等官方维护的配套工具方便构建单页应用SPA。!DOCTYPE html html langen head meta charsetUTF-8 titleVue.js 基础示例/title script srchttps://cdn.jsdelivr.net/npm/vue3/script /head body div idapp h1{{ message }}/h1 button clickchangeMessage点击修改消息/button /div script const app Vue.createApp({ data() { return { message: Hello, Vue.js! }; }, methods: { changeMessage() { this.message 消息已修改; } } }); app.mount(#app); /script /body /html在上述代码中我们通过data函数定义了组件的数据message并通过methods定义了点击按钮时触发的方法changeMessage。在模板中使用{{ message }}实现了数据的插值显示使用click指令绑定了点击事件。二、Vue.js 常用指令v-model指令用于实现表单输入和应用状态之间的双向数据绑定。当输入框的值发生变化时绑定的数据也会自动更新反之亦然。div idapp input v-modelmessage placeholder编辑消息 p输入的消息是{{ message }}/p /div script const app Vue.createApp({ data() { return { message: Hello, Vue! }; } }); app.mount(#app); /script2.2 条件渲染v-if和v-showv-if指令用于条件渲染只有在条件为true时元素才会被渲染到 DOM 中。而v-show指令则是通过 CSS 的display属性来控制元素的显示和隐藏元素始终存在于 DOM 中。div idapp button clicktoggle切换显示/button p v-ifisVisible现在你看到我了/p p v-showisVisible我也能切换显示/p /div script const app Vue.createApp({ data() { return { isVisible: true }; }, methods: { toggle() { this.isVisible !this.isVisible; } } }); app.mount(#app); /script2.3 列表渲染v-forv-for指令用于遍历数组或对象并渲染列表。在使用v-for时建议为每个列表项指定一个唯一的key属性以提高渲染性能。div idapp ul li v-for(item, index) in items :keyindex {{ item }} /li /ul /div script const app Vue.createApp({ data() { return { items: [苹果, 香蕉, 橙子, 葡萄] }; } }); app.mount(#app); /script2.4 事件处理v-onv-on指令用于监听 DOM 事件并在事件触发时执行相应的 JavaScript 代码。在 Vue.js 中事件处理函数可以定义在组件的methods中。div idapp button v-on:clicksayHello点击我/button p你点击了 {{ count }} 次/p /div script const app Vue.createApp({ data() { return { count: 0 }; }, methods: { sayHello() { this.count; alert(你好Vue.js); } } }); app.mount(#app); /script2.5 表单绑定v-modelv-model指令用于实现表单输入和应用状态之间的双向绑定。当输入框的值发生变化时绑定的数据也会自动更新反之亦然。div idapp input v-modelmessage placeholder输入消息 p你输入的消息是{{ message }}/p /div script const app Vue.createApp({ data() { return { message: }; } }); app.mount(#app); /script三、Vue.js 组件化开发3.1 组件的概念组件是 Vue.js 最强大的功能之一它允许我们将 UI 拆分成独立、可复用的部分。通过组件化开发我们可以将复杂的界面分解为多个简单的组件提高代码的可维护性和复用性。3.2 创建组件3.2.1 全局注册全局注册的组件可以在整个 Vue 应用中使用。我们可以通过 app.component 方法进行全局注册。div idapp my-component/my-component /div script const MyComponent { template: p这是一个全局注册的组件/p }; const app Vue.createApp({}); app.component(my-component, MyComponent); app.mount(#app); /script3.2.2 局部注册局部注册的组件只能在当前组件中使用。我们可以通过components选项来局部注册组件。div idapp child-component/child-component /div script const ChildComponent { template: p这是一个局部注册的组件/p }; const app Vue.createApp({ components: { child-component: ChildComponent } }); app.mount(#app); /script3.3 组件间通信3.3.1 父子组件通信父子组件之间的通信可以通过props和emit实现。父组件可以通过props向子组件传递数据子组件可以通过emit向父组件发送事件。父组件div idapp child-component :messageparentMessage update-messageupdateMessage/child-component /div script const ChildComponent { props: [message], template: div p子组件收到的消息{{ message }}/p input v-modelchildMessage inputsendMessage /div , data() { return { childMessage: }; }, methods: { sendMessage() { this.$emit(update-message, this.childMessage); } } }; const app Vue.createApp({ data() { return { parentMessage: 你好子组件 }; }, components: { child-component: ChildComponent }, methods: { updateMessage(newMessage) { this.parentMessage newMessage; } } }); app.mount(#app); /script四、Vue.js 计算属性与侦听器4.1 计算属性计算属性是基于其依赖项进行计算的属性。计算属性会根据依赖项的变化自动更新非常适合用于需要根据数据进行复杂计算的场景。div idapp p原消息{{ message }}/p p计算后的消息{{ computedMessage }}/p button clickchangeMessage修改消息/button /div script const app Vue.createApp({ data() { return { message: Hello, Vue.js! }; }, computed: { computedMessage() { return this.message.toUpperCase(); } }, methods: { changeMessage() { this.message 消息已修改; } } }); app.mount(#app); /script4.2 侦听器侦听器用于监听数据的变化并在数据变化时执行特定的逻辑。侦听器可以通过watch选项来定义。div idapp p输入的消息{{ message }}/p input v-modelmessage placeholder输入消息 /div script const app Vue.createApp({ data() { return { message: }; }, watch: { message(newVal, oldVal) { console.log(消息从 ${oldVal} 变为 ${newVal}); } } }); app.mount(#app); /script五、Vue.js 路由与状态管理5.1 Vue RouterVue Router 是 Vue.js 的官方路由库用于构建单页应用SPA。通过 Vue Router我们可以实现页面的动态跳转和路由管理。div idapp router-link to/home首页/router-link router-link to/about关于/router-link router-view/router-view /div script import { createApp } from vue; import { createRouter, createWebHistory } from vue-router; const Home { template: p这是首页/p }; const About { template: p这是关于页/p }; const routes [ { path: /home, component: Home }, { path: /about, component: About } ]; const router createRouter({ history: createWebHistory(), routes }); const app createApp({}); app.use(router); app.mount(#app); /script5.2 VuexVuex 是 Vue.js 的官方状态管理库用于集中管理应用的状态。通过 Vuex我们可以实现组件之间的状态共享和状态管理。div idapp div{{ count }}/div button clickincrement增加/button button clickdecrement减少/button /div script import { createApp } from vue; import { createStore } from vuex; const store createStore({ state: { count: 0 }, mutations: { increment(state) { state.count; }, decrement(state) { state.count--; } } }); const app createApp({}); app.use(store); app.mount(#app); /script

VUE基础

相关推荐

从零搭建AI市场调研系统：NLP与机器学习实战指南

拆一台 UV-K5：BK4819 对讲机射频收发器的 PCB 逆向记录，从信号链到实测数据

t3code 深度解析：Electron 套壳 CLI 的 AI 编程工具架构与实战

更多资讯

蔚来后端一面+二面：16道高频真题（附答案PDF模板）

功能线程化：把一帧拆成流水线——任务图、依赖与工作窃取的引擎实现原理

Unity GUID 的身份模型：资源引用三元组、冲突成因与工程治理

数据竞争：共享状态的正确处理方式——内存序、happens-before 与所有权模型

【Linux网络】会话管理session与Cookie

【AI产品经理实战】Day 40｜Cookie、HTTPS 到 API：调通第一次大模型对话

今日更新

基于YOLOv11的石油泄漏智能检测系统开发实践

AI行业变局：合规、Mod化与上下文管理的实战启示

计算机视觉与AI原生应用融合的技术实践

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？