Vue - 4( 8000 字 Vue 入门级教程)

一: Vue 初阶

1.1 关于不同版本的 Vue

Vue.js 有不同版本,如 vue.jsvue.runtime.xxx.js,这些版本主要针对不同的使用场景和需求进行了优化,区别主要体现在以下几个方面:

  1. 完整版 vs 运行时版

    • vue.js(完整版):这是包含编译器的完整构建版本。它包括 Vue 的 template 模板编译器,可以将 Vue 模板直接编译成渲染函数。因此,它适用于独立运行的 Vue.js 项目或通过 <script> 引入的方式直接使用。
    • vue.runtime.xxx.js(运行时版):这是不包含模板编译器的版本,体积更小。它假设你使用了其他构建步骤来预编译模板,或者通过 Vue 的单文件组件 (SFC) 来开发。这种版本需要配合使用 webpack 或其他构建工具进行构建。
  2. 适用场景

    • 完整版适用于传统的 Vue.js 项目,特别是对于通过 <script> 标签直接引入 Vue 的项目。它包含了模板编译器,因此可以接受字符串模板,而不需要预编译。
    • 运行时版更适合基于构建系统(如 Vue CLI、webpack 等)的项目,其中模板是预编译的,因此不需要 Vue 自带的编译器,可以减小项目体积并提高运行效率。
  3. 为什么要分这么多版本

    • 灵活性和体积优化:Vue.js 为了提供更多的灵活性和优化体积,将模板编译器与运行时分离。对于大型项目或需要性能优化的项目,可以选择运行时版本,并预先编译模板,以减小包大小和提高加载速度。
    • 开发体验:对于单文件组件(SFC)的开发,使用运行时版本可以更好地配合现代构建工具(如 webpack)进行开发和部署,更符合当前前端开发的最佳实践。

在这里插入图片描述

1.2 asserts 文件夹

在前端项目中,asserts 文件夹通常用来存放静态资源文件,些资源文件包括但不限于:

  1. 图像文件:如 .jpg, .png, .gif 等格式的图片文件,用于网站的图像展示、背景等。
  2. 样式表文件:如 .css, .scss, .less 等格式的样式表文件,用于定义网站的样式和布局。
  3. 字体文件:如 .ttf, .woff, .woff2 等格式的字体文件,用于网站的文字排版。
  4. JavaScript 文件:如 .js 格式的 JavaScript 脚本文件,用于网站的交互逻辑和功能实现。
  5. 视频文件:如 .mp4, .avi, .mov 等格式的视频文件,用于网站的视频展示或背景视频。
  6. 音频文件:如 .mp3, .ogg, .wav 等格式的音频文件,用于网站的音频播放或背景音乐。
  7. 其他静态文件:如 .html, .xml, .json 等格式的文件,用于网站的其他静态内容。

这些静态资源文件通常在开发中需要被引用和加载到网页中,因此将它们放在 asserts 文件夹中,便于管理和组织。

1.3 components 文件夹

在前端开发中,components 文件夹通常用来存放 Vue.js 应用中的组件文件,将所有组件集中存放在一个文件夹下,可以使得项目结构更加清晰,开发者可以快速找到需要的组件文件。

除了常见的 App.vue 组件外,components 文件夹中可能还会包含其他各种功能性和业务相关的组件,例如:

  • Header.vue:顶部导航栏组件。
  • Footer.vue:底部版权信息组件。
  • Sidebar.vue:侧边栏组件。
  • Button.vue:自定义按钮组件。
  • Modal.vue:弹窗组件。
  • 等等。

每个组件都有其特定的功能和作用,通过组合这些组件,可以构建出复杂的用户界面。而 App.vue 则是 Vue.js 应用的根组件,负责整个应用的布局和路由管理,通常会包含其他子组件来组成完整的页面结构。

1.4 render 函数

render 函数有模板解析器,可以用来渲染虚拟 DOM 的函数。通过 render 函数,我们可以直接利用 JavaScript 来描述组件的 UI 布局和结构,而不是依赖于模板语法。

下面是关于render 函数的详细解析:

参数:
render 函数接受一个参数,通常命名为 h,这个参数实际上是 createElement 函数的别名,用于创建 VNode(虚拟节点)。

注意点:

  • 返回值render 函数必须返回一个 VNode,用于描述组件的 UI 结构。
  • 单一根节点render 函数中返回的 VNode 必须是一个单一的根节点,即只能返回一个 VNode。
  • 箭头函数:通常 render 函数使用箭头函数来定义,以确保函数内部的 this 指向正确。

createElement 的用法:

createElement 函数用于创建 VNode(虚拟节点),描述组件的 UI 结构。它接受三个参数:

  1. 参数1(必填):标签名、组件选项或者一个返回组件选项的函数。
  2. 参数2(可选):一个包含组件属性和数据的对象,也可以是 null
  3. 参数3(可选):子节点,可以是一个数组或者一个字符串。

createElement 的用法通常如下:

h(tag, data, children)

其中:

  • tag:可以是 HTML 标签名,也可以是组件选项。
  • data:是一个对象,包含了组件的属性和数据。
  • children:是一个数组,包含了组件的子节点。

例如,一个简单的 createElement 的用法如下:

h('div', { class: 'container' }, [h('h1', 'Hello, Vue!'),h('p', 'This is a paragraph.')
])

这段代码会创建一个 <div> 元素,其类名为 container,包含一个 <h1> 元素和一个 <p> 元素作为子节点。

render 函数简写过程:

//完整版
render(createdElment){return createdElment('h1','你好啊')}//第一步render:(createdElment)=>{return createdElment('h1','你好啊')}//第二步render:createdElment=> createdElment('h1','你好啊')//第三步render:h=> h('h1','你好啊')

1.5 ref 属性

ref 是 Vue.js 中用来在模板中获取对 DOM 元素或组件实例的引用的属性。它的作用十分重要,能够让我们在 Vue 组件中直接操作 DOM,或者获取到子组件的实例,从而实现一些特定的逻辑或操作。

下面我来详细解释 ref 的作用:

作用:

  1. 获取 DOM 元素引用:通过在模板中使用 ref,可以获取到对应 DOM 元素的引用,从而在 Vue 组件中直接操作该 DOM 元素。

  2. 获取组件实例引用:除了获取 DOM 元素的引用,ref 还可以获取到子组件的实例引用,使得我们可以直接调用子组件的方法或访问其属性。

  3. 动态引用ref 属性可以动态地绑定到数据属性上,使得我们可以根据条件或状态动态地获取对应的 DOM 元素或组件实例。

代码示例:

获取 DOM 元素引用:

<template><div><button ref="myButton" @click="handleClick">Click me</button></div>
</template><script>
export default {methods: {handleClick() {// 使用 $refs 来获取 DOM 元素引用,并直接操作该 DOM 元素this.$refs.myButton.innerText = 'Button Clicked';}}
}
</script>

在这个示例中,ref="myButton" 将按钮元素的引用保存在了 myButton 中,然后在 handleClick 方法中,通过 this.$refs.myButton 获取到按钮元素的引用,并修改了按钮的文本内容。

获取子组件实例引用:

<template><div><!-- 使用 ref 获取子组件实例 --><child-component ref="myChild"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},mounted() {// 使用 $refs 获取子组件实例,并调用子组件的方法this.$refs.myChild.sayHello();}
}
</script>

在这个示例中,通过 ref="myChild" 获取了子组件 ChildComponent 的实例引用,然后在 mounted 钩子函数中,通过 this.$refs.myChild 获取到了子组件的实例,并调用了子组件的 sayHello 方法。

动态引用:

<template><div><div v-if="showRef"><input ref="inputField" type="text" placeholder="Enter something" /></div><button @click="toggleRef">Toggle Ref</button></div>
</template><script>
export default {data() {return {showRef: true};},methods: {toggleRef() {// 动态修改 showRef 的值,控制是否显示 refthis.showRef = !this.showRef;// 在输入框显示时,获取输入框的引用并聚焦if (this.showRef) {this.$refs.inputField.focus();}}}
}
</script>

在这个示例中,通过 v-if 控制了一个输入框的显示与隐藏,当点击按钮时,通过 toggleRef 方法动态地切换输入框的显示状态。当输入框显示时,使用 this.$refs.inputField.focus() 获取输入框的引用并使其获得焦点。

1.6 props 配置

在 Vue.js 中,props 是用于父组件向子组件传递数据的一种机制。通过在子组件上声明 props,可以将父组件中的数据传递给子组件,在子组件内部可以像访问本地数据一样使用这些 props。这种数据流的方式使得组件之间的通信更加灵活和维护。

下面我来详细解释 props 的用途以及如何在 Vue.js 中使用:

用途:

  1. 传递数据:最常见的用途是在父组件中将数据传递给子组件,子组件可以通过 props 接收这些数据并在内部使用。
  2. 向子组件传递事件:除了数据之外,父组件还可以通过props` 向子组件传递方法,以便子组件可以调用这些方法来实现特定的行为或逻辑。

代码示例:

1. 父组件向子组件传递数据:

<!-- ParentComponent.vue(父组件) -->
<template><div><!-- 在子组件上使用 props将 message 数据传递给子组件 --><ChildComponent :message="messageFromParent"  </div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {messageFromParent: 'Hello from parent component'};}
}
</script>
<!-- ChildComponent.vue(子组件) -->
<template><div><!-- 在子组件中使用 props 接收来自父组件的数据 --><p>{{ message }}</p></div>
</template><script>
export default {props: {// 声明 props,接收来自父组件的 message 数据message: String}
}
</script>

在这个示例中,父组件 ParentComponent 中的 messageFromParent 数据通过 message props 传递给了子组件 ChildComponent,子组件内部使用 props 来接收父组件传递的数据,并渲染到页面上。

父组件向子组件传递方法:

<!-- ParentComponent.vue(父组件) -->
<template><div><!-- 在子组件上使用 props,将父组件的方法传递给子组件 --><ChildComponent :handleClick="handleClickFromParent" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleClickFromParent() {console.log('Button clicked in parent component');}}
}
</script>
<!-- ChildComponent.vue(子组件) -->
<template><div><!-- 在子组件中使用 props 接收来自父组件的方法 --><button @click="handleClick">Click me</button></div>
</template><script>
export default {props: {// 声明 props,接收来自父组件的方法handleClick: Function},methods: {handleClick() {// 在子组件中调用父组件传递的方法this.handleClick();}}
}
</script>

在这个示例中,父组件 ParentComponent 中的 handleClickFromParent 方法通过 handleClick props 传递给了子组件 ChildComponent,子组件内部使用 props 来接收父组件传递的方法,并在按钮点击时调用该方法。

1.6.1 子组件向父组件传递数据

在 Vue.js 中,通过 props 和父组件预先定义的方法,可以使子组件向父组件传递数据。这个过程涉及了子组件调用父组件传递的函数,并将数据作为参数传递回父组件的过程。

实现子组件向父组件传递数据的步骤:

  1. 在父组件中定义方法并将其传递给子组件:首先,在父组件中定义一个方法,并将这个方法通过 props 传递给子组件。

  2. 子组件调用父组件传递的方法:在子组件中调用从父组件接收到的方法,并传递数据作为参数。

代码示例:

父组件定义方法并传递给子组件:

<!-- ParentComponent.vue(父组件) -->
<template><div><!-- 将父组件的方法传递给子组件 --><ChildComponent :sendDataToParent="sendDataToParent" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {// 定义父组件的方法sendDataToParent(data) {console.log('Data received in parent:', data);// 这里可以对数据进行处理或进一步操作}}
}
</script>

子组件调用父组件传递的方法并传递数据:

<!-- ChildComponent.vue(子组件) -->
<template><div><button @click="sendDataToParent">Send Data to Parent</button></div>
</template><script>
export default {props: {// 声明接收父组件传递的方法sendDataToParent: Function},methods: {sendDataToParent() {const data = 'Data from child component';// 调用父组件传递过来的方法,并传递数据this.sendDataToParent(data);}}
}
</script>

在这个示例中,父组件 ParentComponent 定义了一个名为 sendDataToParent 的方法,并将这个方法通过 props 传递给子组件 ChildComponent。在子组件中,当按钮被点击时,sendDataToParent 方法会被调用,并向父组件传递数据 'Data from child component'

这样,子组件就可以通过调用父组件预先定义的方法,向父组件传递数据。父组件可以在接收到数据后执行相应的逻辑或处理操作,实现了子组件向父组件的数据传递。

1.7 mixin 混入

在 Vue.js 中,mixin 是一种重用组件选项的一种方式。它允许我们定义一些可复用的组件选项,并在多个组件中共享这些选项。

mixin 可以包含组件选项,如数据、计算属性、方法、生命周期钩子等,通过混入 mixin,这些选项会被合并到组件的选项中,从而实现了代码的复用和组件的扩展。

下面我来详细解释 mixin 的用途以及如何在 Vue.js 中使用:

用途:

  1. 代码复用mixin 允许我们将一些通用的逻辑或功能抽离出来,定义在 mixin 中,然后在多个组件中重用这些逻辑或功能,避免代码重复,提高代码的可维护性和可读性。

  2. 逻辑组织:通过 mixin,我们可以将组件选项按照功能进行拆分和组织,使得代码结构更加清晰和易于管理。

  3. 动态修改组件选项:在一些特定场景下,我们可以动态地为组件添加或修改选项,这使得 mixin 具有一定的灵活性,可以根据需要动态地调整组件的行为。

代码示例:

创建一个 mixin:

// exampleMixin.js
export const exampleMixin = {data() {return {count: 0};},methods: {increment() {this.count++;},decrement() {this.count--;}}
};

在这个示例中,我们创建了一个名为 exampleMixin 的 mixin,其中包含了一个名为 count 的数据属性和两个方法 incrementdecrement

在组件中使用 mixin:

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script>
import { exampleMixin } from './exampleMixin.js';export default {mixins: [exampleMixin], // 使用 mixin
};
</script>

在这个示例中,我们在一个 Vue 组件中使用了 exampleMixin,通过在组件选项中的 mixins 数组中添加 exampleMixin,该 mixin 中的数据和方法会被合并到组件的选项中,从而实现了代码的复用。

动态修改组件选项:

// exampleMixin.js
export const exampleMixin = {data() {return {message: 'Hello from mixin'};},created() {console.log('Mixin created');}
};// 在组件中动态添加 mixin
Vue.mixin(exampleMixin);

在这个示例中,我们在 exampleMixin 中定义了一个 message 数据属性和一个 created 生命周期钩子。然后通过 Vue.mixin 方法将 exampleMixin 动态地添加到全局的 Vue 实例中,这样在任何组件中都可以使用 exampleMixin 中的选项了。

1.8 scoped 样式

在 Vue.js 中,scoped 是一个用于样式作用域控制的特殊属性,它可以限定样式只在当前组件中生效,而不会影响到其他组件。这种机制可以避免全局样式污染和样式冲突,使得组件化开发更加可靠和可维护。

下面我来详细解释 scoped 的用途以及如何在 Vue.js 中使用:

用途:

  1. 避免样式污染:通过 scoped 属性,可以确保当前组件中的样式只作用于当前组件,不会影响到全局的样式,避免了样式污染问题。

  2. 组件化开发scoped 样式使得组件更加独立和可移植,组件可以被放置在任何上下文中而不会产生样式冲突,从而实现了更高程度的组件化开发。

  3. 提高样式可维护性:将样式与组件紧密绑定在一起,可以使得样式与组件的关系更加清晰,提高了样式的可维护性和可读性。

代码示例:

使用 scoped 属性定义样式:

<template><div class="example"><p>This is a scoped example component.</p></div>
</template><script>
export default {name: 'ExampleComponent'
}
</script><style scoped>
.example {background-color: #f0f0f0;padding: 20px;
}p {color: blue;
}
</style>

在这个示例中,我们定义了一个名为 ExampleComponent 的 Vue 组件,并使用 scoped 属性定义了组件的样式。样式中的 .example 类和 p 元素的样式只会作用于当前组件,不会影响到其他组件。

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

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

相关文章

大厂设计师倾心推荐的在线作图免费网站

在当今数字时代&#xff0c;绘画已经成为各行各业的必备技能。无论你是设计师、学生、创作者还是业余爱好者&#xff0c;免费的在线绘图软件都是发挥创造力和表达想法的理想选择。本文将介绍七款强大免费的在线绘图软件&#xff0c;让你轻松实现自己的创作梦想。你可以在不安装…

中间件漏洞攻防学习总结

前言 面试常问的一些中间件&#xff0c;学习总结一下。以下环境分别使用vulhub和vulfocus复现。 Apache apache 文件上传 (CVE-2017-15715) 描述: Apache(音译为阿帕奇)是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上&#xff0c;由于其跨…

UE5、CesiumForUnreal实现建筑白模生长动画效果

文章目录 1.实现目标2.实现过程2.1 实现原理2.2 具体代码2.3 应用测试3.参考资料1.实现目标 在上篇文章加载本地建筑轮廓GeoJson数据生成建筑白模的基础上,本文通过材质“顶点偏移”实现建筑白模生长效果,GIF动图如下所示: 2.实现过程 常用的实现建筑生长效果的方式有两种,…

Unity 获取RenderTexture像素颜色值

拿来吧你~ &#x1f9aa;功能介绍&#x1f32d;Demo &#x1f9aa;功能介绍 &#x1f4a1;不通过Texture2D 而是通过ComputerShader 提取到RenderTexture的像素值&#xff0c;效率有提升哦&#xff01; &#x1f4a1;通过扩展方法调用&#xff0c;方便快捷&#xff1a;xxxRT.G…

Pytorch Windows EOFError: Ran out of input when num_workers>0

关于深度学习的一些学习框架,我使用过pytorch,caffe,caffe2,openchatkit,oneflow等,最近我将长达几十万字的报错手册重新进行了整理,制作出一个新的专栏,主要记录这几种常见的开发框架在安装和使用过程中常见的报错,以及我是如何解决掉的,以此来帮助更多的深度学习开…

大语言模型如何工作?

此为观看视频How Large Language Model works的笔记。 GPT&#xff08;Generative Pre-trained Transformer&#xff09;是一个大语言模型&#xff08;LLM&#xff09;&#xff0c;可以生成类似人类的文本。本文阐述&#xff1a; 什么是LLMLLM如何工作LLM的应用场景 什么是…

触控芯片TS223B功能介绍, 适用于小家电、电子玩具、智能物联网等各种触控产品方案。

•应用领域• 适用于小家电、电子玩具、智能物联网等各种触控产品方案。 •功能介绍• 单键电容式触控芯片TS223B具有功耗低、触控灵敏度高、抗干扰能力强等众多优势&#xff0c;输出方式包括直接输出、电平翻转输出&#xff0c;并且输出的初始状态可以配置&#xff0c;能灵活满…

FPGA笔试面试题目记录

1 logic utilization 题目&#xff1a;Rank the following operations from lowest utilization to highest. Assume that all variables are 32-bit integers,that the operations are implemented using LUTs ony and that the synthesiser will produce an optimal digital…

基于YOLOv8的摄像头下铁路工人安全作业检测系统

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文摘要&#xff1a;基于YOLOv8的铁路工人安全作业检测系统&#xff0c;属于小目标检测范畴&#xff0c;并阐述了整个数据制作和训练可视化过程&#xff0c; 博主简介 AI小怪兽&#xff0c;YOLO骨灰级玩家&#xff0c;1&#xff0…

3D模型在线轻量化工具

在计算机图形学领域&#xff0c;3D模型简化工具是一种强大的工具&#xff0c;用于减少模型的面数&#xff0c;以提高模型在渲染和处理过程中的性能。本文将全面介绍为何需要简化模型、简化的方法、常见的简化算法以及一款三维模型优化产品 的使用方法&#xff0c;帮助读者更好地…

IP爆发出蓬勃生命力,泡泡玛特2023营收过亿IP达到10个

“原来我们是基于潮流在事情&#xff0c;后来是基于流行&#xff0c;然后我们现在想去做一个更大的圈&#xff0c;我们想基于快乐。”在2023年9月的一场采访中&#xff0c;泡泡玛特CEO王宁如是说。半年后&#xff0c;泡泡玛特交出了一份还不错的成绩单。近期&#xff0c;泡泡玛…

[StartingPoint][Tier1]Crocodile

Task 1 What Nmap scanning switch employs the use of default scripts during a scan? (哪些 Nmap 扫描开关在扫描期间使用默认脚本&#xff1f;) -sC Task 2 What service version is found to be running on port 21? 发现端口 21 上运行的服务版本是什么&#xff1f…

DEVOPS详解

一、简介 DevOps一词是由英文 Development&#xff08;开发&#xff09;和 Operations&#xff08;运维&#xff09;组合而成&#xff0c;但它所代表的理念和实践要比单独或组合的两个词广阔的多。DevOps 涵盖了开发、测试、安全、协作方式、数据分析、运维等许多方面。传统的开…

w1r3s 靶机学习

w1r3s 靶机学习 0x01 IP C for command kali ip 10.10.10.128victim ip 10.10.10.1290x02 开扫 C sudo nmap -sn 10.10.10.0/24-sn 多一步入侵和轻量级侦察 发送四项请求 -sL 列表扫描&#xff0c;多用于探测可用ip&#xff0c;广播扫描 –send-ip 时间戳请求&#xff0…

分贝和功率相关的概念

对于刚接触分贝 (dB) 的人来说&#xff0c;分贝 (dB) 的概念很困难且令人困惑&#xff0c;因为射频中经常涉及增益、功率、电压&#xff0c;再加上dB、dBm、dBW、瓦特、毫瓦等名词&#xff0c;且通常需要在线性值和分贝值之间来回转换&#xff0c;所以需要耐心地梳理他们之间的…

常见性能测试工具对比

在性能测试工作中&#xff0c;我们常常会遇到好几个工具&#xff0c;但是每一个工具都有自己的优势&#xff0c;一时间不知道怎么选择。 今天我们就将性能测试常用的工具进行对比&#xff0c;这样大家在选择工具的时候心里就有底啦&#xff01; 阿里云PTS 性能测试PTS&#xff…

【群智能算法改进】一种改进的鹦鹉优化算法 改进鹦鹉优化器 IPO算法【Matlab代码#73】

文章目录 【获取资源请见文章第5节&#xff1a;资源获取】1. 原始鹦鹉优化算法PO2. 改进后的IPO算法2.1 自适应切换因子2.2 混合柯西和高斯变异 3. 部分代码展示4. 仿真结果展示5. 资源获取 【获取资源请见文章第5节&#xff1a;资源获取】 1. 原始鹦鹉优化算法PO 鹦鹉优化算法…

C#操作MySQL从入门到精通(6)——对查询数据进行排序

前言 在和MySql数据库交互的过程中,查询数据是使用最频繁的操作,并且我们经常需要对查询到的数据进行排序后输出,比如我想查询1列数据的最小值,那么我可以将查询到的数据进行升序(从小到大)排列,然后取第一个数据就是最小值。本文详细介绍了对查询数据进行排序的各种操…

数学建模-最优包衣厚度终点判别法-二(K-Means聚类)

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是viperrrrrrr~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#xff…

OpenLCA案例分析:环境影响与碳排放生命周期评估应用、GREET下载与安装、生物质能源的碳排放

目录 第一章 生命周期评价的理论基础 第二章 OpenLCA的安装使用及生命周期评估模型构建 第三章 GREET的介绍 第四章 生物质能源的碳排放 更多应用 生命周期分析是一种分析工具&#xff0c;它可帮助人们进行有关如何改变产品或如何设计替代产品方面的环境决策&#xff0c;即…