首页 > 其他分享 >软件开发 --- vue之初体验

软件开发 --- vue之初体验

时间:2024-11-30 21:55:10浏览次数:8  
标签:初体验 vue 视图 --- Vue 组件 message 模板 页面

实例

就是DOM处理器。一个 Vue 实例通过 el 绑定一个根 DOM 元素,用于管理html视图。

通常情况下,Vue 推荐使用 单一根实例,并通过 组件化 来管理不同的功能模块。多个 Vue 实例的做法虽然可以实现,但会让代码变得难以维护和扩展,尤其在复杂的应用中。通常,使用 Vue RouterVuex 来管理应用状态和视图切换,是更加推荐的方式。

 

模板

模板使得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 RouterVuex 等功能来帮助构建流畅的前端应用。
  • 对于 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

相关文章

  • Shell编程 - 函数篇
    自建函数库-颜色字符串颜色字符串输出颜色,有时候关键地方需要醒目,颜色是最好的方式:字体颜色字体背景颜色显示方式30:黑40:黑0:终端默认设置31:红41:深红1:高亮显示32:绿42:绿4:下划线33:黄43:黄色5:闪烁34:蓝色44:蓝色7:反白显示35:紫色45:紫色8:隐藏......
  • HCP-05 VRRP原理与配置
    目录VRRP技术概述单网关面临的问题VRRP概述VRRP的基本概念VRRP报文格式VRRP定时器VRRP技术原理VRRP状态机VRRP协议状态VRRP主备选举VRRP主备切换VRRP主备回切VRRP典型应用VRRP负载分担VRRP监视上行端口VRRP与BFD联动VRRP与MSTP结合应用VRRP基本配置VRRP常用配置命令VRRP基础配置实......
  • CSP-J 2024总结
    这次比赛没有发挥出我的正常水平,第二题粗心爆零了,以下是我对这次比赛的总结:这次比赛的第一题比较简单,用map来查询有没有遇到过就行了,甚至不用考虑数据给你输入的是什么,只要没遇到过就让ans-1就行了;第二题当时测的样例过了,最后一分都没得,比赛后用我当时交的代码又测试了几遍,发......
  • Shell编程 - 引号篇
    双引号、单引号、不加引号与反引号在变量赋值时,如果值有空格,Shell会把空格后面的字符串解释为命令:#VAR=123-bash:2:commandnotfound#VAR="123"#echo$VAR123#VAR='123'#echo$VAR123看不出什么区别,再举个说明:#N=3#VAR="12$N"#echo$VAR12......
  • 【Q1~Q6题解】第七届传智杯全国IT技能大赛-程序设计赛道第一场院校赛(初赛)思路+解题代
    本文为作者的题解解析。Q1~Q6,思路仅供参考文章目录Q1:汤姆和杰瑞解题代码解题思路Q2:游游的重组偶数解题代码解题思路Q3:小红的四子棋解题代码解题思路Q4:小欧的平面连线解题代码解题思路Q5:小红的数组操作解题代码解题思路Q6:游......
  • vault-local-dev
    vault-local-devhttps://github.com/fanqingsong/vault-local-devVaultforLocalDevelopmentThisisadockercomposesetupfordevelopmentworkusingVaultandConsul.   OIDChttps://www.microsoft.com/en-us/security/business/security-101/what-is-......
  • 7-152 百钱百鸡
    百鸡问题是北魏数学家张丘建在其著作《张丘建算经》中提出的一个世界著名的不定方程问题:“今有鸡翁一,值钱五;鸡母一,值钱三;鸡雏三,值钱一。凡百钱买鸡百只,问鸡翁母雏各几何。”百钱百鸡问题的白话版:100元钱买100只鸡,公鸡5元1只,母鸡3元1只,小鸡1元3只。问公鸡、母鸡、小鸡各多少只(......
  • 千问 Qwen2.5-7B-Instruct 模型微调后“变身”Claude:是前世记忆还是数据版权?
    在微调阿里巴巴的开源大模型Qwen2.5-7B-Instruct时,我意外发现了一个令人震惊的现象:原本明确标识自己为“千问”的模型,在经过短时间微调后,居然声称自己是Anthropic的模型Claude。一个阿里推出的模型在微调后却自称为Anthropic的产品,确实让人感到意外和疑惑。千问与Claude......
  • 【教学类-75-01】20241125动物冰箱贴(十二生肖动物+自制图案)
    背景需求:上学期买了一些A4磁铁贴片(5片12元),放着也没有用。A4大小,一面黑色(磁铁)、一面白色(黏贴纸)这次我想参照“镜子”的贴纸方法,【教学类-70-02】20241121中2班幼儿制作“圆镜和方镜”(适配5CM圆镜)通义万相花边图案-CSDN博客文章浏览阅读1.3k次,点赞49次,收藏29次。【教学类......
  • HCIP-04 交换高级技术
    目录VLAN聚合VLAN聚合产生的技术背景VLAN聚合概述VLAN聚合的原理VLAN聚合的应用Super-VLAN划分相同Sub-VLAN内部通信不同Sub-VLAN之间通信举例Sub-VLAN与其他设备的二层通信VLAN聚合关键配置命令VLAN聚合配置举例MUXVLANMUXVLAN产生背景MUXVLAN的基本概念MUXVLAN的应用MUXVLA......