Vue3 学习笔记，快速初始化 Vue 项目及 Data 函数用法学习

快速初始化Vue项目

在学习之前，我们先通过引入JS文件的方式快速初始化一个 Vue 项目，首先我们先打开 VsCode 编辑器，具体步骤如下：

  1. 新建一个文件夹。
  2. 新建index.html、style.css 和 index.js 文件。
  3. 新建个lib目录，把下载好的 vue.global.js 文件放在这个目录下（下载地址：https://unpkg.com/vue@3.2.45/dist/vue.global.js）。

完成后的目录结构如下：

--- index.html
--- index.js
--- lib ---vue.global.js
--- style.css

然后回到 index.html 做一些代码编写工作：

  • 通过一个 ！（感叹号）快速初始化一个 h5 页面代码
  • 然后再 head 标签和 title 标签之间，引入 lib/vue.global.js 文件。
  • 在 js 文件的下方引入 style.css 文件
  • 在 body 中定义一个 id = app 的 div 容器
  • 在body标签结束之前引入 index.js 文件
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vue项目初始化</title><script src="/lib/vue.global.js"></script><link rel="stylesheet" href="style.css" /></head><body><div id="app"></div><script src="index.js"></script></body>
</html>

接下来回到 index.js 文件初始化 vue 实例，挂载到 id 等于 app 的实例中,代码如下：

const app = Vue.createApp();
app.mount("#app");

到这里一个简单的 Vue3 项目就创建完了，接下来我们进入 data() 函数的学习。

如何理解 data() 数据状态函数

在 Vue.js 中，data 函数用于定义组件实例的状态。组件实例中定义的数据可以在模板中使用，也可以在组件的 JavaScript 逻辑中使用。

下面是一个例子，该组件有一个名为 message 的 data 属性：

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: '你好，前端达人!'}}
}
</script>

在上面的例子中，data 函数返回了一个对象，该对象中有一个名为 message 的属性。在模板中，可以使用 {{ message }} 来显示这个属性的值。

注意，data 属性必须是函数,这是固定用法。如果 data 属性是一个普通对象，那么所有组件实例将共享同一个数据对象，在多个组件实例中使用同一个 data 对象将会导致问题。

另外，组件实例中定义的数据属性是响应式的，这意味着如果数据属性的值改变，那么对应的模板中的内容也将自动更新（响应式机制，稍后会介绍）。

通过data函数返回的对象，组件内部都能使用 this 访问到，如:

<template><button @click="changeData">Change Data</button>
</template>
<script>
export default {data() {return {message: 'Hello, Vue!'}},methods:{changeData(){this.message = "new data";}}
}
</script>

在 Vue.js 中，data 函数用于定义组件实例的状态，返回的对象中的属性可以是任意类型的值，包括：

  • 基本类型: 例如数字、字符串、布尔值等。
  • 数组: 例如 array。
  • 对象:例如 Object。
  • 甚至是函数。

例如：

data() {return {message: 'Hello, Vue!',count: 0,todos: [],user: {name: 'John Doe',age: 30},print: function(){console.log("data function")}}},

在上面的例子中, 定义了message,count,todos,user,print五个数据，分别是字符串，数字，数组，对象，函数。

Vue3 中你可以用 setup() 函数定义数据状态

在 Vue 3 中，可以使用 setup() 函数来定义组件的逻辑和状态。在 setup() 函数中，可以使用 reactive() 函数来创建一个响应式对象，它可以用来存储组件的状态。下面是一个示例：

<!DOCTYPE html>
<html><head><title>Vue 3 数据状态示例</title></head><body><div id="app">{{ message }}</div><script src="https://cdn.jsdelivr.net/npm/vue@3"></script><script>const app = Vue.createApp({setup() {const state = Vue.reactive({message: 'Hello Vue 3'});return {...state}}});app.mount('#app')</script></body>
</html>

HTML属性绑定 Data 中的值

当你想要绑定一个链接的 href 属性到 Vue 实例中的数据时，你可以这样做：

<a v-bind:href="url">Link</a>

这里的 v-bind:href 指令绑定了 Vue 实例中的 url 数据到链接的 href 属性上。当 url 数据更新时，链接的 href 也会更新。

同样也可以使用缩写:

<a :href="url">Link</a>

需要注意的是，当你绑定一个数据到 href 时，确保你绑定的是完整的URL，不然可能会被浏览器理解成相对路径。

基于 data 数据状态进行列表展示

在 Vue 中展示列表数据可以使用 v-for 指令。v-for 指令用于遍历数组中的数据并将其渲染到页面上。

假设你有一个名为 items 的数组，其中包含了要展示在页面上的数据，那么你可以在模板中使用 v-for 指令来遍历 items 数组并将每一项数据渲染到页面上。

例如:

<template><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul>
</template><script>
export default {data() {return {items: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' },],};},
};
</script>

当你使用 v-for 指令来遍历数组中的数据时，你需要在指令中指定两个值：

  • 第一个值是当前遍历到的数组元素，在上面的例子中是 item。
  • 第二个值是数组本身，在上面的例子中是 items。

在指令中你可以使用这两个值来定义要渲染在页面上的元素。在上面的例子中，我们使用了一个 li 标签来渲染每一项数据，并在里面使用了一个插值表达式来展示每一项的 name。

在遍历数组时,为了避免vue重复渲染,你需要给每一个元素赋予一个唯一标识符。可以使用 v-bind 指令和 key 特性来为每一项绑定一个唯一的标识符，比如上面的例子中用了每一项的 id 来标识。

整体来说，使用 v-for 指令可以让你很容易地在 Vue 中遍历数组并将数据渲染到页面上。

在真实项目中还会经常使用 computed 和 methods 来获取数据进行展示, 也可以使用vuex进行状态管理。（在稍后的文章里会详细介绍）

基于条件展示 Data 数据

在 Vue 中一共有 4 种方式可以基于条件展示 Data 中的数据。

使用 v-if 指令

v-if 指令用于根据条件判断是否渲染元素。当条件为 true 时，元素会被渲染，否则元素不会被渲染。

<template><div><p v-if="showData">{{ data }}</p></div>
</template><script>
export default {data() {return {data: 'This is my data',showData: true,};},
};
</script>

使用 v-show 指令

v-show 指令与 v-if 指令类似，也用于根据条件判断是否渲染元素。唯一的区别是，v-show 指令会始终渲染元素，只是在条件为 false 时将元素隐藏。

<template><div><p v-show="showData">{{ data }}</p></div>
</template><script>
export default {data() {return {data: 'This is my data',showData: true,};},
};
</script>

使用三元运算符

三元运算符可以在模板中直接使用条件判断并返回对应的值，从而达到条件展示数据的目的。

<template><div><p>{{showData ? data : "loading"}}</p></div>
</template><script>
export default {data() {return {data: 'This is my data',showData: true,};},
};
</script>

使用计算属性 computed

可以在 computed 里面进行条件判断，并返回对应的数据。

<template><div><p>{{computedData}}</p></div>
</template>
<script>export default {data() {return {data: 'This is my data',showData: true,};},computed: {computedData() {return this.showData ? this.data : "loading"}}};
</script>

这四种方法都可以在 Vue 中基于条件展示数据。

你可以根据自己的需求来选择使用哪一种方法。

v-if指令和v-show的区别在于，v-if会在第一次加载的时候，真正的去除不需要的元素，而v-show只是用CSS来控制元素的显示和隐藏。所以v-if会在第一次加载时对性能有影响，而v-show在第一次加载时不会对性能产生影响。

计算属性 computed 可以在数据发生改变时自动更新，性能会比在模板中使用三元运算符和方法好。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/181663.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

LeetCode2514.统计同位异构字符串数目

LeetCode2514.统计同位异构字符串数目

题目简单&#xff0c;关键是灵茶山艾府的代码写起来太优美&#xff0c;不得不记录一下 const int Mod 1e97; using ll long long; ll qmi(ll a,ll b,ll mod){ll res 1;while(b){if(b&1)res res*a%mod;aa*a%mod;b>>1;}return res; }class Solution { public:int c…
阅读更多...
软考真的很难吗？选什么科目容易过？

软考真的很难吗？选什么科目容易过？

在备考前&#xff0c;小伙伴们都十分担心试题太难导致自己辛苦备考大半年最后却通不过。软考试题真的很难吗&#xff1f;选什么科目比较容易过呢&#xff1f; 软考试题会很难吗&#xff1f; 软考试题确实是有一定的难度&#xff0c;特别是中级和高级部分科目&#xff0c;因为…
阅读更多...
C语言——J /字符函数和字符串函数

C语言——J /字符函数和字符串函数

前言&#xff1a;在编程的过程中&#xff0c;我们经常要处理字符和字符串&#xff0c;为了⽅便操作字符和字符串&#xff0c;C语⾔标准库中提供了⼀系列库函数&#xff0c;接下来我们就学习⼀下这些函数。 一、字符分类函数 C语⾔中有⼀系列的函数是专⻔做字符分类的&#xff…
阅读更多...
2024北京健康展，第11届中国国际大健康产业博览会4月举办

2024北京健康展，第11届中国国际大健康产业博览会4月举办

China-DJK北京健博会/打造2024年度全国首场大健康产业发展盛会&#xff1b; 2024第11届中国&#xff08;北京&#xff09;国际大健康产业博览会&#xff08;China-DJK北京健博会&#xff09; The 11th China (Beijing) International Health Industry Expo in 2024 时间&…
阅读更多...
XMind思维导图：掌握思维之翼，激发无限创造力

XMind思维导图：掌握思维之翼，激发无限创造力

在当今快速发展的信息时代&#xff0c;高效地表达和梳理思维显得尤为重要。在这个背景下&#xff0c;XMind作为一款思维导图软件&#xff0c;以其独特的优势脱颖而出。它不仅在Mac和Windows平台上均可使用&#xff0c;还以其人性化的设计和强大的功能&#xff0c;成为了思维导图…
阅读更多...
2023亚马逊云科技re:Invent，在开发者板块探究如何利用技术重塑业务

2023亚马逊云科技re:Invent，在开发者板块探究如何利用技术重塑业务

美国当地时间11月27日&#xff0c;一年一度的亚马逊云科技re:Invent大会在美国拉斯维加斯盛大开幕。这场全球云计算领域的前沿盛会&#xff0c;已连续12年成为引领行业的风向标。那么本次2023亚马逊云科技re:Invent大会又有哪些可玩、可看的新项目&#xff0c;下面就一起来瞧一…
阅读更多...
【AIGC】关于Prompt你必须知道的特性

【AIGC】关于Prompt你必须知道的特性

代码和数据:https://github.com/tonyzhaozh/few-shot-learning 一、实践验证的大模型的特性 1. 大模型的偏差 示例&#xff1a;&#xff08;文本的情感分析&#xff1a;一句话->P(积极&#xff09;或者N&#xff08;消极) Input: I hate this movie. Sentiment: Negativ…
阅读更多...
查看mysql 或SQL server 的连接数，mysql超时、最大连接数配置

查看mysql 或SQL server 的连接数，mysql超时、最大连接数配置

1、mysql 的连接数 1.1、最大可连接数 show variables like max_connections; 1.2、运行中连接数 show status like Threads_connected; 1.3、配置最大连接数&#xff0c; mysql版本不同可配置的最大连接数不同&#xff0c;mysql8.0的版本默认151个连接数&#xff0c;…
阅读更多...
java ssh 二手车交易管理系统eclipse开发mysql数据库MVC模式java编程网页设计

java ssh 二手车交易管理系统eclipse开发mysql数据库MVC模式java编程网页设计

一、源码特点 JSP ssh 二手车交易管理系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用 B/S模式开发。开发环境为TOMCAT…
阅读更多...
“2024年国考公共科目”趣谈

“2024年国考公共科目”趣谈

黄金的熔点仅为1064.43C&#xff0c;不锈钢、耐高温钢所需的冶炼温度也仅需2000℃以上&#xff0c;因此与正在进行中的“2024年国考公共科目笔试”的“报名人数首破300万&#xff0c;平均约77人竞争一岗位”相比&#xff0c;炼金炼钢温度全都败落下风。 网络图片 其中宁夏的一…
阅读更多...
hugegraph-server安装部署（docker）

hugegraph-server安装部署（docker）

1、安装docker不说了&#xff0c;可以直接看我文章一键安装docker https://blog.csdn.net/qq_41060647/article/details/131568289?spm1001.2014.3001.5502 2、一个docker-compose文件解决。 如果不使用mysql&#xff0c;可以将docker-compose.yml文件中的mysql配置修改为其他…
阅读更多...
CDC with Async FIFO

CDC with Async FIFO

https://zipcpu.com/blog/2018/07/06/afifo.html
阅读更多...
浏览器插api开发文档

浏览器插api开发文档

chrome谷歌浏览器开发文档
阅读更多...
数据结构与算法之美学习笔记：28 | 堆和堆排序：为什么说堆排序没有快速排序快？

数据结构与算法之美学习笔记：28 | 堆和堆排序：为什么说堆排序没有快速排序快？

目录 前言如何理解“堆”&#xff1f;如何实现一个堆&#xff1f;1. 往堆中插入一个元素2. 删除堆顶元素 如何基于堆实现排序&#xff1f;1. 建堆2. 排序 解答开篇内容小结 前言 本节课程思维导图&#xff1a; 我们今天讲另外一种特殊的树&#xff0c;“堆”&#xff08;Heap&…
阅读更多...
figma 基础使用——准备阶段

figma 基础使用——准备阶段

1. 注册账号 2. figma有客户端也有网页端&#xff0c;使用注意同步字体 之后点击下载window installeer 字体 3. 安装 Figma汉化包 通过figma.cool 网站&#xff0c;下载离线的汉化包 之后通过谷歌的扩展程序添加
阅读更多...
从零构建属于自己的GPT系列2：预训练中文模型加载、中文语言模型训练、逐行代码解读

从零构建属于自己的GPT系列2：预训练中文模型加载、中文语言模型训练、逐行代码解读

&#x1f6a9;&#x1f6a9;&#x1f6a9;Hugging Face 实战系列 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在PyCharm中进行 本篇文章配套的代码资源已经上传 从零构建属于自己的GPT系列1&#xff1a;文本数据预处理 从零构建属于自己的GPT系列2&#xff1a;语…
阅读更多...
45.113.200.1搜索引擎蜘蛛抓取不到网站内容页面可能的原因

45.113.200.1搜索引擎蜘蛛抓取不到网站内容页面可能的原因

以下是搜索引擎蜘蛛抓取不到网站内容页面的一些主要原因总结&#xff1a; 网站的 robots.txt 文件中禁止了搜索引擎蜘蛛访问网站某些页面或目录&#xff0c;导致搜索引擎无法抓取到相关页面的内容。 网站的页面存在重定向或者跳转&#xff0c;搜索引擎蜘蛛无法直接抓取到需要的…
阅读更多...
一些前辈优秀项目和学习笔记

一些前辈优秀项目和学习笔记

***框架&#xff08;XXL-JOB是一个分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线&#xff0c;开箱即用&#xff09;https://gitee.com/xuxueli0323/xxl-job.git ***XXL-JOB分布式任务调度平台功…
阅读更多...
接口的跨域问题（CORS）

接口的跨域问题（CORS）

CORS(主流的解决方案&#xff0c;推荐使用) 1.什么是CORS CORS (Cross-Origin Resource Sharing&#xff0c;跨域资源共享)由一系列 HTTP 响应头组成&#xff0c;这些 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源 浏览器的同源安全策略默认会阻止网页“跨域…
阅读更多...
python开发之个微自动转发朋友圈

python开发之个微自动转发朋友圈

简要描述&#xff1a; 转发朋友圈&#xff0c;直接xml数据。(对谁不可见) 请求URL&#xff1a; http://域名地址/forwardSns 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参…
阅读更多...
最新文章

Copyright @ 2022~2023