最后
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最后写上我自己一直喜欢的一句名言：
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它
现在我们已经成功创建了一个Vue程序，在html中，可以直接访问course属性。在Vue中是使用{{}}来访问变量。我们在Html中添加访问的代码
现在您已经创建了一个 Vue 应用程序，您可以访问该course属性。让我们更改index.html文件以显示“ Intro to Vue with Vue 3 ”。在#appdiv中写入如下代码：
复制
{{ course }}
测试应用程序
在浏览器中打开index.html文件，应该看到以下页面：
此时，尝试删除该app.mount('#app')行，然后尝试访问course. 你会有惊喜！
Vue 中使用v-for指令遍历数组。该v-for指令的形式为tag in tags. 举个例子总是更容易理解。看下面的代码：
const app = Vue.createApp({
data() {
return {
course: ‘使用Vue3学习Vue的基础知识’,
description: ‘这是一篇关于vue基础知识的文章’,
price: ‘免费阅读’,
tags: [‘Vue’, ‘Front-end’, ‘JavaScript’]
}
}
})
app.mount(‘#app’);
复制
{{ tag }}
上面的代码循环遍历“tags”数组并在页面上呈现每个标签。
tags代表来自 Vue 应用程序的数组，而tag是数组的一个单独元素。浏览器打开index.html文件，会看到下面的效果
key属性
当使用v-for遍历数组的时候，需要给每个DOM元素添加上唯一的key，通常key是元素的id。
通过提供 key 属性，可以让 Vue 在应用程序中更新时跟踪节点的身份。因此，Vue 可以重用和重新排序现有元素。除此之外，它还提高了应用程序的性能。（备注：这里主要是diff算法用的到）
回到前面的示例，您可以修改代码以包含该
index字段。“索引”字段表示元素在数组中的位置。{{ tag }}
但是，如果有一组对象，例如：
tags:
[
{ id: 1, name: ‘Vue’ },
{ id: 2, name: ‘Front-end’ },
{ id: 3, name: ‘JavaScript’ },
]
您可以提供对象的 id 作为键。循环如下所示：
{{ tag }}
:key ->
:key是 的简写v-bind:key，用于将项目的 id 绑定到“key”属性。也就是说，每个项目都有一个唯一的“键”，您在:key字段中指定。在这个例子中，每个标签都有它的 id 作为键。
当根据条件在页面上显示元素。也就是说，使用 if 语句来决定是否呈现元素。或者根据条件渲染它。
一个例子是 -如果评分超过 4 星，则显示所有编程课程。为此，您可以使用该
v-if指令，该指令仅在表达式返回真值时呈现块。但是，废话不多说，让我们看一个例子！const app = Vue.createApp({
data() {
return {
course: ‘使用Vue3学习Vue的基础知识’,
description: ‘这是一篇关于vue基础知识的文章’,
price: ‘免费阅读’,
available: true,
tags: [
{ id: 1, name: ‘Vue’ },
{ id: 2, name: ‘Front-end’ },
{ id: 3, name: ‘JavaScript’ },
]
}
}
})
app.mount(‘#app’);
请注意名为“可用”的新字段。“可用”字段设置为 true。但是，您可以不断在“true”和“false”之间更改它以查看条件渲染的工作原理。
复制
当前course可以获取
当前course不可以获取
上面的代码根据available显示_是否可以获取课程！如果
available是true. 否则会显示_当前course不可以获取！.v-i会根据表达式的返回值，true和false。来判断当前元素是否显示。
在 Vue 中，可以使用
v-on指令来监听 DOM 事件并在它们被触发时运行一段代码。该v-on指令也有一个速记值，即符号“@”。例如，可以按如下方式监听按钮上的点击事件：
<button @click=“doSomething()”>Do something
当有人单击按钮时，Vue 会触发您指定的方法 -
doSomething在这种情况下。当然也可以直接用代码替换方法。例如，可以增加一个变量 -@click="sum = sum + 100"。回到课程示例：
const app = Vue.createApp({
data() {
return {
course: ‘使用Vue3学习Vue的基础知识’,
description: ‘这是一篇关于vue基础知识的文章’,
price: ‘免费阅读’,
available: true,
tags: [
{ id: 1, name: ‘Vue’ },
{ id: 2, name: ‘Front-end’ },
{ id: 3, name: ‘JavaScript’ },
]
}
},
methods: {
purchase() {
console.log(‘Course 已经获取!’);
}
}
})
app.mount(‘#app’);
可以看到，现在
methods在 Vue 实例上有了一个字段。此字段允许您创建方法并在应用程序中使用它们。在这种情况下，有一个
purchase方法可以在每次调用时将文本输出到控制台。当然，这是一个基本的例子。但是，可以创建一个真正处理购买课程的函数！要“进行获取”，您必须在 HTML 代码中添加以下行：
<button @click=“purchase”>立即获取
按钮监听点击事件，当按钮被点击时，调用函数
purchase。下图说明了单击按钮时发生的情况：
const app = Vue.createApp({
data() {
return {
course: ‘使用Vue3学习Vue的基础知识’,
description: ‘这是一篇关于vue基础知识的文章’,
imgURL: ‘https://i.youkuaiyun.com/#/user-center/profile’,
imgDescription: ‘这是一篇关于vue基础知识的文章的封面图片’,
price: ‘免费阅读’,
available: true,
tags: [
{ id: 1, name: ‘Vue’ },
{ id: 2, name: ‘Front-end’ },
{ id: 3, name: ‘JavaScript’ },
]
}
},
methods: {
purchase() {
console.log(‘Course 已经获取!’);
}
}
})
增加了：
-
图片地址
-
图片说明
同时在代码中添加使用的代码：
这里我们使用了v-bind指令。将图片地址和图片说明分别给了src和alt。这里：是v-bind的简写。
v-bind指令允许开发人员将属性动态绑定到表达式。通俗地说，它使我们能够使用动态值而不是硬编码值。可以使用
v-bind如下方式重写：感可以更新 Vue 实例中的图像 URL 和描述，并且 HTML 也会自动更新！您可以同样添加“href”属性，并从 Vue 实例中获取 URL。作为练习，试一试吧！
如果您运行该应用程序，您可以看到正在显示的图像！图片链接是一样的。唯一的区别是我使用我的域来屏蔽那个长 URL。如果你去 catalins.tech/img，你会看到它是同一张图片！
Vue 的另一个有用的特性是计算属性。使用计算属性，可以操作数据并在 Vue 应用程序中复用结果。
使用与课程相同的示例，假设您想确保您的图像始终具有描述。您可以使用计算属性来执行此操作，如下所示：
复制
const app = Vue.createApp({
data() {
return {
course: ‘使用Vue3学习Vue的基础知识’,
description: ‘这是一篇关于vue基础知识的文章’,
imgURL: ‘https://i.youkuaiyun.com/#/user-center/profile’,
imgDescription: ‘这是一篇关于vue基础知识的文章的封面图片’,
price: ‘免费阅读’,
available: true,
tags: [
{ id: 1, name: ‘Vue’ },
{ id: 2, name: ‘Front-end’ },
{ id: 3, name: ‘JavaScript’ },
]
}
},
computed: {
hasImageDescription() {
return this.imgDescription.length > 0 ? this.imgDescription : 这是自动生成的图片描述’
}
}
})
这里我们在computed中定义了一个新的hasImageDescription方法。这个方法主要是检查是否有图图片描述。如果有则直接返回，否则返回新的值。
下面我们只需要在html中使用这个方法即可！
您不使用属性
imgDescription，而是使用计算属性hasImageDescription。请注意：通过改变计算属性中的现有数据很容易在应用程序中引入错误。您应该将这些计算属性用于表示层，而不是用于更改现有数据（也就是说最好不要修改data中变量）。
尽管vue支持在html中编写和运行JS表达式，但是我劝你最好不要这么做！最好的方式是将代码逻辑提取到一个单独的函数中去，并且在需要该代码的时候复用即可！
根据经验，当您想要改变现有数据时，最好使用方法。另一方面，最好为表示层使用计算属性。
Vue 应用程序被拆分为组件，这些组件是应用程序的各个部分。例如，您的应用程序中可能有以下组件：
-
标题
-
导航
-
内容卡
-
页脚
还有很多。此外，一个组件中可能嵌套了其他组件。我们可以将他们视为“父母”和“孩子”。换句话说，组件是应用程序的支柱。
要创建 Vue 组件，请进入项目的根文件夹并执行以下命令：
mkdir components
touch components/CourseCard.js
这两个命令创建一个
components文件夹和一个CourseCard组件。你也可以手动创建。下一步是创建组件，可以通过调用Vue 实例
component上的方法来完成app：app.component(‘coursedisplay’, {
})
第一个参数是组件名称，在本例中为
coursedisplay。第二个参数是一个带有配置细节的对象。现在，只需从
app.js文件中复制所有内容并将其添加到配置对象中。新组件应如下所示：app.component(‘coursedisplay’, {
data() {
return {
course: ‘使用Vue3学习Vue的基础知识’,
description: ‘这是一篇关于vue基础知识的文章’,
imgURL: ‘https://img-blog.csdnimg.cn/c197fb6f26c2423da1e5ed2eab8a6470.png’,
imgDescription: ‘这是一篇关于vue基础知识的文章的封面图片’,
price: ‘免费阅读’,
available: true,
tags: [
{ id: 1, name: ‘Vue’ },
{ id: 2, name: ‘Front-end’ },
{ id: 3, name: ‘JavaScript’ },
]
}
},
computed: {
hasImageDescription() {
return this.imgDescription.length > 0 ? this.imgDescription : 这是自动生成的图片描述
}
},
methods: {
purchase() {
console.log(‘Course 已经获取!’);
}
},
template:
/html/
`
{{ course }}
{{ description }}
{{ price }}
<button @click=“available = !available”>立即获取
-
{{ tag.name }}
可以获取
不可以获取
`
})
前端资料汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
