实例
就是DOM处理器。一个 Vue 实例通过 el
绑定一个根 DOM 元素,用于管理html视图。
通常情况下,Vue 推荐使用 单一根实例,并通过 组件化 来管理不同的功能模块。多个 Vue 实例的做法虽然可以实现,但会让代码变得难以维护和扩展,尤其在复杂的应用中。通常,使用 Vue Router 和 Vuex 来管理应用状态和视图切换,是更加推荐的方式。
模板
模板使得html具有后端语言的某些特性。vue模板和jsp模板或者模板引擎是一个概念。就是动态化的html。比如jsp模板可以在html中编写java对象,html只显示执行后的结果。
<div id="app"> <p>{{ message }}</p> <!-- 数据绑定,显示 message --> </div>
message 就是一个html中的变量,html中没有变量的概念,但是模板支持了后端语言特性。
message 值来自于js代码
数据
Vue 会监听数据的变化,并根据数据自动更新视图
data() { return { message: 'Hello Vue!' }; }
message
是组件中的一个数据,当它改变时,Vue 会自动更新视图中的 {{ message }}
。
指令
指令是特殊的 HTML 属性,以v-
开头,用于在模板中给元素附加特殊的行为。例如,v-if
用于条件渲染,v-for
用于循环渲染。
<!-- v-if 指令:只有条件为 true 时,才渲染这个元素 --> <p v-if="isVisible">Hello Vue!</p>
这也是后端的语法特性
方法
方法是 Vue 实例中的函数,通常用于响应用户的事件或执行一些操作。方法通常不具备计算属性的缓存特性,每次调用都会执行。
methods: { greet() { alert('Hello, ' + this.name); } }
greet
是一个方法,当触发某个事件时,它会执行,并弹出提示框。
生命周期钩子
Vue 实例在创建过程中会经历一系列的生命周期阶段,例如创建、挂载、更新、销毁等。生命周期钩子是指在这些不同阶段自动调用的函数。
比如:
created
:vue创建完成但为挂载到DOM上时会执行mounted
:组件挂载DOM完成后,DOM 已渲染。时会执行destroyed
:组件销毁时调用。
created() { console.log('Vue 实例已创建'); }
插槽
简单来说,插槽就是一种在组件中预留的位置,父组件可以把自己的内容插入到这些预留的位置中。
通俗解释:
想象你在做一个模板(比如一个卡片组件),这个卡片组件有一个固定的外框,但卡片的内容是灵活的,可以由父组件来决定。插槽就像是卡片上的“空白区域”,父组件可以在这个区域放置自己想要的内容。
组件
vue最重要的特性之一。组件是 Vue 中可重用的、封装的独立单元。每个组件有自己的模板、数据和方法,组件可以嵌套在其他组件中,构建更复杂的界面。、
// 定义一个组件 Vue.component('my-component', { template: '<p>这是一个组件</p>' }); // 使用组件 <my-component></my-component>
双向数据绑定
<input v-model="message"> <p>你输入的内容是:{{ message }}</p>
这里,v-model
实现了 input
的双向绑定,输入框的值会更新 message
,而 message
的值变化时,输入框也会同步更新。
事件处理
事件处理用于响应用户的操作(如点击按钮、输入文本等)。Vue 通过 v-on
指令绑定事件,或者使用简写 @
。
<button @click="handleClick">点击我</button>
SPA
Vue.js 非常适合构建单页应用(SPA)。在 SPA 中,整个应用通常只加载一个 HTML 页面,后续的页面内容和视图都通过 AJAX 请求动态加载,页面不会完全刷新,用户体验更加流畅。
在单页应用中,Vue 的特点包括:
- Vue Router:Vue Router 是 Vue.js 的官方路由管理器,允许你在单页应用中实现页面导航。当你在应用中点击链接时,Vue Router 会加载不同的视图。
- Vuex:用于管理全局状态,在不同页面之间共享数据。
- 组件化:所有的视图和逻辑都通过组件进行管理,使得 SPA 更加模块化、可维护
MPA
Vue.js 也可以用于构建传统的多页应用(MPA)。在 MPA 中,每个页面都会重新加载整个 HTML 页面,页面之间的切换需要进行完整的刷新。Vue 在这种情况下可以作为每个页面的增强工具,在页面中逐个加载 Vue 实例来控制每个页面的局部视图和交互。
- Vue 并不强制要求是 SPA。它是一个渐进式的框架,可以根据需求选择在单页应用或多页应用中使用。
- 对于 SPA,Vue 提供了 Vue Router 和 Vuex 等功能来帮助构建流畅的前端应用。
- 对于 MPA,Vue 可以作为增强工具,用于在某些页面中提升交互性和动态功能,而不会影响整个应用的结构。
因此,Vue 既能用来构建现代化的 SPA,也能用来增强传统的 MPA。选择哪种方式取决于你的项目需求和架构。
计算属性
属性值的自动计算器,当依赖的数据发生变化时,计算属性会自动更新属性值。比如
将时间戳转换为可读日期格式。
computed: { formattedDate() { const date = new Date(this.timestamp); return date.toLocaleDateString(); } }
根据用户输入的价格和折扣计算折后价格。
computed: { discountedPrice() { return this.price * (1 - this.discount); // 基于 price 和 discount 计算折后价格 } }
根据某些数据动态修改元素的类名或样式。
computed: { buttonClass() { return { 'btn-active': this.isActive, 'btn-disabled': !this.isActive }; } }
计算布局和尺寸
computed: { columnCount() { return this.windowWidth > 800 ? 4 : 2; // 根据窗口宽度决定列数 } }
复杂的逻辑处理
computed: { isEligibleForDiscount() { return this.age > 18 && this.membershipLevel === 'gold'; } }
处理嵌套对象或数组
computed: { fullName() { return `${this.user.firstName} ${this.user.lastName}`; } }
标签:初体验,vue,视图,---,Vue,组件,message,模板,页面 From: https://www.cnblogs.com/GKLBB/p/18578881