【前端知识】Javascript前端框架Vue入门

前端框架VUE入门

    • 概述
    • 基础语法介绍
    • 组件特性
      • 组件注册
      • Props 属性声明
      • 事件
      • 组件 v-model(双向绑定)
      • 插槽Slots内容与出口
    • 组件生命周期
    • 样式文件使用
      • 1. 直接在`<style>`标签中写CSS
      • 2. 引入外部CSS文件
      • 3. 使用CSS预处理器
      • 4. 在`main.js`中全局引入CSS文件
      • 5. 使用CSS Modules
      • 6. 使用PostCSS
    • 完整示例
      • 1. 创建 Vue 项目（如果还没有）
      • 2. 定义和使用组件
      • 3. 在主应用中使用组件
      • 4. 运行应用
      • 完整项目结构
    • 参考文献

概述

Vue.js（发音为 /vjuː/，类似于 “view”）是一款用于构建用户界面的JavaScript框架。以下是Vue.js的一些核心特点和介绍：

  1. 渐进式框架：Vue被设计为可以自底向上逐层应用，使其成为一个渐进式框架。这意味着开发者可以逐步地采用Vue.js，而不必一开始就完全重写现有的项目。

  2. 视图层关注：Vue的核心库只关注视图层，易于上手，并且便于与第三方库或既有项目整合。

  3. MVVM架构：Vue.js是一个提供了MVVM（Model-View-ViewModel）风格双向数据绑定的JavaScript库，专注于View层。它的核心是ViewModel，负责连接View和Model，保证视图和数据的一致性。

  4. 轻量级框架：Vue.js能够自动追踪依赖的模板表达式和计算属性，提供MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。

  5. 双向数据绑定：Vue.js允许采用简洁的模板语法将数据声明式渲染整合进DOM，这是Vue.js的核心特性之一。

  6. 指令和组件化：Vue.js通过内置指令与页面进行交互，并且支持组件化开发，使得开发者可以构建可复用的组件。

  7. 响应性：Vue会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM。

  8. 生态系统：Vue不仅仅是一个框架，它还包括了一系列现代化的工具链和支持类库，如vue-router、vuex等，可以为复杂的单页应用提供完整的解决方案。

  9. 灵活性：Vue的简单小巧的核心和渐进式技术栈使其足以应对任何规模的应用。

  10. 性能：Vue.js拥有20kb的min+gzip运行大小和超快的虚拟DOM性能，提供了最省心的优化。

Vue.js适用于从简单到复杂的各种界面开发，并且由于其灵活性和渐进式的特性，它成为了生产环境中广泛使用的一个JavaScript框架之一。

基础语法介绍

Vue.js 是一个渐进式JavaScript框架，用于构建用户界面。以下是Vue.js的一些基础语法：

  1. 声明式渲染：

    <div id="app">{{ message }}
</div>

    在Vue实例中，message 是一个响应式的数据属性。

  2. 数据绑定：

    <div id="app"><p>{{ user.name }}</p>
</div>

    这里，user 是一个对象，name 是它的属性。

  3. 指令：

    • v-bind：用于动态地绑定一个或多个属性，或一个组件prop到表达式。
      <img v-bind:src="imageSrc">
    • v-model：在表单输入和应用状态之间创建双向数据绑定。
      <input v-model="message">
    • v-on：监听DOM事件并在事件触发时执行表达式。
      <button v-on:click="counter += 1">增加</button>
    • v-for：基于源数据多次渲染元素或模板块。
      <li v-for="item in items">{{ item.text }}</li>
    • v-if、v-else-if、v-else：条件渲染。
      <p v-if="user.isLoggedIn">欢迎回来！</p>
    • v-show：根据表达式的真假值切换元素的CSS display 属性。
      <p v-show="user.isLoggedIn">欢迎回来！</p>

  4. 计算属性：

    new Vue({el: '#app',data: {firstName: 'Foo',lastName: 'Bar'},computed: {fullName: function () {return this.firstName + ' ' + this.lastName;}}
});

    使用 fullName 时，它将自动更新。

  5. 方法：

    <button v-on:click="sayHello">Say hello</button>

    new Vue({el: '#app',methods: {sayHello: function () {alert('Hello, ' + this.fullName);}}
});

  6. 事件处理：

    <button v-on:click="say('Hello')">Say Hello</button>

    new Vue({el: '#app',methods: {say: function (message) {alert(message);}}
});

  7. 组件：

    Vue.component('my-component', {template: '<div>A custom component!</div>'
});

    在父组件中使用：

    <my-component></my-component>

  8. 生命周期钩子：

    new Vue({el: '#app',created: function () {console.log('Vue instance created');}
});

  9. 表单输入绑定：

    <input v-model="message" placeholder="edit me">

  10. 列表渲染：

    <ul id="list"><li v-for="item in items">{{ item.text }}</li>
</ul>

这些是Vue.js中一些基础的语法和概念，Vue.js的功能远不止这些，还有更多高级特性等待探索。

组件特性

组件注册

  • 全局注册
import { createApp } from 'vue'
const app = createApp({})
app.component(// 注册的名字'MyComponent',// 组件的实现{/* ... */}
)

如果使用单文件组件，你可以注册被导入的 .vue 文件

import MyComponent from './App.vue'app.component('MyComponent', MyComponent)

Props 属性声明

一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute

  • defineProps方式
<script setup>
const props = defineProps(['foo'])console.log(props.foo)
</script>
  • 使用props属性的方式
export default {props: ['foo'],setup(props) {// setup() 接收 props 作为第一个参数console.log(props.foo)}
}

事件

在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：

<!-- MyComponent -->
<button @click="$emit('someEvent')">Click Me</button>

父组件可以通过 v-on (缩写为 @) 来监听事件：

<MyComponent @some-event="callback" />

同样，组件的事件监听器也支持 .once 修饰符：

<MyComponent @some-event.once="callback" />

像组件与 prop 一样，事件的名字也提供了自动的格式转换。注意这里我们触发了一个以 camelCase 形式命名的事件，但在父组件中可以使用 kebab-case 形式来监听。与 prop 大小写格式一样，在模板中我们也推荐使用 kebab-case 形式来编写监听器。

组件 v-model(双向绑定)

<!-- Child.vue -->
<script setup>
const model = defineModel()function update() {model.value++
}
</script><template><div>Parent bound v-model is: {{ model }}</div><button @click="update">Increment</button>
</template>

父组件可以用 v-model 绑定一个值：

<!-- Parent.vue -->
<Child v-model="countModel" />

插槽Slots内容与出口

举例来说，这里有一个 组件，可以像这样使用：

<FancyButton>Click me! <!-- 插槽内容 -->
</FancyButton>

而 的模板是这样的：

<button class="fancy-btn"><slot></slot> <!-- 插槽出口 -->
</button>

元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。
slots

组件生命周期

Vue组件的生命周期指的是组件从创建到销毁的整个过程，Vue为这个生命周期提供了一系列的钩子函数，允许我们在不同阶段执行代码。以下是Vue组件的主要生命周期钩子：
lifecycle

  1. beforeCreate：

    • 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    • 在这个阶段，组件实例的 data 和 methods 还未被设置，因此不能访问 data 和 methods。

  2. created：

    • 实例已经创建完成，数据观测 (data observer)、属性和方法的运算，watch/event 事件回调。
    • 然而，挂载阶段还没开始，$el 属性目前不可见，$el 会在 beforeMount 钩子中被创建。

  3. beforeMount：

    • 在挂载开始之前被调用：相关的 render 函数首次被调用。
    • 此时 $el 已经被创建，你可以访问到 $el，但 $el 还没有被插入文档。

  4. mounted：

    • 挂载结束：$el 已经被新创建的 vm.$el 替换了，data 已经被设置，所有的子组件也都挂载完成了。
    • 可以执行DOM操作，如访问子组件实例或执行DOM操作。

  5. beforeUpdate：

    • 在数据变化之后，DOM重新渲染之前调用，此时可以在这个钩子中进一步地更改状态，这不会触发额外的重渲染。

  6. updated：

    • 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
    • 可以执行依赖于DOM的操作。

  7. beforeDestroy：

    • 实例销毁之前调用。在这一步，实例仍然完全可用。
    • 可以执行清理工作，例如解绑事件。

  8. destroyed：

    • Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
    • 该钩子的调用标志着实例生命周期的结束。

  9. errorCaptured (全局混入或组件内)：

    • 当捕获一个来自子孙组件的错误时被调用。这成为了“全局”生命周期钩子的一部分，也可用于组件内。
    • 它提供了两个参数：错误对象和错误来源的组件实例。

  10. activated 和 deactivated：

    • 这两个钩子函数仅在 keep-alive 组件中生效。
    • activated 在缓存组件被激活时调用。
    • deactivated 在缓存组件被停用时调用。

这些生命周期钩子函数提供了在组件的不同阶段执行代码的能力，使得开发者可以更好地控制组件的行为和状态。

样式文件使用

在Vue项目中引入CSS可以通过多种方式，以下是几种常用的方法：

1. 直接在<style>标签中写CSS

在Vue组件的<style>标签中直接编写CSS，这样CSS只会作用于当前组件：

<template><div class="my-component"><!-- 组件内容 --></div>
</template><script>
export default {// 组件逻辑
};
</script><style scoped>
.my-component {/* 样式只会应用到当前组件 */
}
</style>

使用scoped属性可以确保样式只作用于当前组件，避免影响到其他组件。

2. 引入外部CSS文件

在Vue组件中引入外部的CSS文件：

<template><div class="my-component"><!-- 组件内容 --></div>
</template><script>
export default {// 组件逻辑
};
</script><style>
@import './path/to/your-styles.css';
</style>

3. 使用CSS预处理器

Vue CLI支持Sass、Less等CSS预处理器，可以在项目中引入预处理器并使用：

<template><div class="my-component"><!-- 组件内容 --></div>
</template><script>
export default {// 组件逻辑
};
</script><style lang="scss" scoped>
.my-component {// 使用Sass语法$color: #333;background-color: $color;
}
</style>

4. 在main.js中全局引入CSS文件

如果你想在全局范围内使用某个CSS文件，可以在项目的入口文件main.js中引入：

import Vue from 'vue';
import App from './App.vue';
import './assets/global.css'; // 全局引入CSS文件new Vue({render: h => h(App),
}).$mount('#app');

5. 使用CSS Modules

CSS Modules是一种CSS本地化技术，可以在Vue中使用：

<template><div :class="$style.myComponent"><!-- 组件内容 --></div>
</template><script>
export default {// 组件逻辑
};
</script><style module>
.myComponent {/* 样式 */
}
</style>

在模板中使用:class="$style.myComponent"来应用样式，CSS Modules会自动处理类名，使其唯一，避免全局污染。

6. 使用PostCSS

PostCSS是一个用JavaScript工具和插件转换CSS代码的工具，可以在Vue CLI项目中配置PostCSS来实现自动前缀添加、变量处理等功能。

以上是在Vue项目中引入CSS的几种方法，你可以根据项目需求和个人喜好选择合适的方式。

完整示例

以下是一个简单的 Vue.js 组件定义和使用的完整代码示例。我们将创建一个名为 HelloWorld 的组件，并在一个 Vue 应用中使用它。

1. 创建 Vue 项目（如果还没有）

首先，如果你还没有 Vue 项目，你可以使用 Vue CLI 创建一个新的 Vue 项目。在命令行中运行以下命令：

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

2. 定义和使用组件

在 src/components 目录下创建一个新的文件 HelloWorld.vue，并添加以下代码：

<!-- src/components/HelloWorld.vue -->
<template><div class="hello"><h1>{{ msg }}</h1><p>Welcome to your Vue.js app with a custom component!</p></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script><style scoped>
h1 {color: #42b983;
}
</style>

这个组件包含一个简单的模板，它显示一个标题和一个段落。它还有一个名为 msg 的 prop，你可以将外部数据传递给这个 prop。

3. 在主应用中使用组件

打开 src/App.vue 文件，并修改它以便使用 HelloWorld 组件：

<!-- src/App.vue -->
<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Hello Vue.js!" /></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

在这个文件中，我们导入了 HelloWorld 组件，并在模板中使用了它。我们传递了一个 msg prop，其值为 "Hello Vue.js!"。

4. 运行应用

确保你的开发服务器正在运行（在 my-vue-app 目录下运行 npm run serve）。然后，打开浏览器并访问 http://localhost:8080，你应该能看到应用已经正确渲染了 HelloWorld 组件的内容。

完整项目结构

你的项目结构应该类似于这样：

my-vue-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

现在你已经成功定义了一个 Vue 组件并在你的 Vue 应用中使用了它！

参考文献

vue官网地址

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

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

相关文章

【代码pycharm】动手学深度学习v2-04 数据操作 + 数据预处理

【代码pycharm】动手学深度学习v2-04 数据操作 + 数据预处理

数据操作 数据预处理 1.数据操作运行结果 2.数据预处理实现运行结果 第四课链接 1.数据操作 import torch # 张量的创建 x1 torch.arange(12) print(1.有12个元素的张量&#xff1a;\n,x1) print(2.张量的形状&#xff1a;\n,x1.shape) print(3.张量中元素的总数&#xff1…
阅读更多...
《Python浪漫的烟花表白特效》

《Python浪漫的烟花表白特效》

一、背景介绍 烟花象征着浪漫与激情&#xff0c;将它与表白结合在一起&#xff0c;会创造出别具一格的惊喜效果。使用Python的turtle模块&#xff0c;我们可以轻松绘制出动态的烟花特效&#xff0c;再配合文字表白&#xff0c;打造一段专属的浪漫体验。 接下来&#xff0c;让…
阅读更多...
CSS中Flex布局应用实践总结

CSS中Flex布局应用实践总结

① 两端对齐 比如 要求ul下的li每行四个&#xff0c;中间间隔但是需要两段对齐&#xff0c;如下图所示&#xff1a; 这是除了基本的flex布局外&#xff0c;还需要用到:nth-of-type伪类来控制每行第一个与第四个的padding。 .hl_list{width: 100%;display: flex;align-items…
阅读更多...
STM32与CS创世SD NAND（贴片SD卡）结合完成FATFS文件系统移植与测试是一个涉及硬件与软件综合应用的复杂过程

STM32与CS创世SD NAND（贴片SD卡）结合完成FATFS文件系统移植与测试是一个涉及硬件与软件综合应用的复杂过程

一、前言 在STM32项目开发中&#xff0c;经常会用到存储芯片存储数据。 比如&#xff1a;关机时保存机器运行过程中的状态数据&#xff0c;上电再从存储芯片里读取数据恢复&#xff1b;在存储芯片里也会存放很多资源文件。比如&#xff0c;开机音乐&#xff0c;界面上的菜单图…
阅读更多...
Matlab实现海鸥优化算法优化随机森林算法模型 （SOA-RF）（附源码）

Matlab实现海鸥优化算法优化随机森林算法模型 （SOA-RF）（附源码）

目录 1.内容介绍 2.部分代码 3.实验结果 4.内容获取 1内容介绍 海鸥优化算法&#xff08;Seagull Optimization Algorithm, SOA&#xff09;是一种基于海鸥群体行为的新型元启发式优化算法。SOA通过模拟海鸥在寻找食物时的飞行模式和集体行动来探索解空间&#xff0c;寻找最优…
阅读更多...
C# Postman或者PostApi调试前端webapi接口发送带有request/body/head信息

C# Postman或者PostApi调试前端webapi接口发送带有request/body/head信息

知识&#xff1a; 前端接口&#xff0c;表单形式提交。 req.ContentType "application/x-www-form-urlencoded"; x-www-form-urlencoded 是一种常见的 MIME 类型&#xff0c;用于将键值对编码为 HTTP 请求体中的 URL 编码格式。在 Web API 中&#xff0c;x-www-for…
阅读更多...
npm上传自己封装的插件（vue+vite）

npm上传自己封装的插件（vue+vite）

一、npm账号及发包删包等命令 若没有账号&#xff0c;可在npm官网&#xff1a;https://www.npmjs.com/login 进行注册。 在当前项目根目录下打开终端命令窗口&#xff0c;常见命令如下&#xff1a; 1、登录命令&#xff1a;npm login&#xff08;不用每次都重新登录&#xff0…
阅读更多...
案例精选 | 某知名教育集团基于安全运营平台的全域威胁溯源实践

案例精选 | 某知名教育集团基于安全运营平台的全域威胁溯源实践

某知名教育集团成立于1999年&#xff0c;总部位于北京海淀中关村。集团专注于K-12基础教育&#xff0c;构建了从幼儿园到高中的全面教育体系&#xff0c;涵盖学校管理、教学科研、师资培训、信息化服务等多个方面。集团在全国范围内设有15所小学、12所初中、9所高中、6个国际部…
阅读更多...
鸿蒙多线程开发——线程间数据通信对象01

鸿蒙多线程开发——线程间数据通信对象01

1、线程间通信 线程间通信指的是并发多线程间存在的数据交换行为。由于ArkTS语言兼容TS/JS&#xff0c;其运行时的实现与其它所有的JS引擎一样&#xff0c;都是基于Actor内存隔离的并发模型提供并发能力。 对于不同的数据对象&#xff0c;在ArkTS线程间通信的行为是有差异的&…
阅读更多...
徒手从零搭建一套ELK日志平台

徒手从零搭建一套ELK日志平台

徒手从零搭建一套ELK日志平台 日志分析的概述日志分析的作用主要收集工具集中式日志系统主要特点采集日志分类ELK概述初级版ELK终极版ELK高级版ELKELK收集日志的两种形式 搭建ELK平台Logstash工作原理Logstash核心概念环境准备安装部署docker添加镜像加速器安装部署Elasticsear…
阅读更多...
React基础知识一

React基础知识一

写的东西太多了&#xff0c;照成csdn文档编辑器都开始卡顿了&#xff0c;所以分篇写。 1.安装React 需要安装下面三个包。 react:react核心包 react-dom:渲染需要用到的核心包 babel:将jsx语法转换成React代码的工具。&#xff08;没使用jsx可以不装&#xff09;1.1 在html中…
阅读更多...
【FPGA开发】ZYNQ中PS与PL交互操作总结、原理浅析、仿真操作

【FPGA开发】ZYNQ中PS与PL交互操作总结、原理浅析、仿真操作

文章目录 PL与PS交互综述交互端口性能&特点&#xff08;选择方案的凭据&#xff09;GPIO-AXI_GPDMA-DMACHP-AXI_HPACP-AXI_ACP 数据交互实验GP通过BRAMPS为主机&#xff0c;读写BRAMPL作为主机&#xff0c;读写BRAM DMA方式交互 PL与PS交互综述 网络上关于PS PL交互的教程…
阅读更多...
【论文笔记】Large Brain Model (LaBraM, ICLR 2024)

【论文笔记】Large Brain Model (LaBraM, ICLR 2024)

Code: https://github.com/935963004/LaBraM Data: 无 目录 AbstractIntroductionMethodNeural tokenizer training&#xff1a;Pre-training LaBraM&#xff1a; ResultsExperimental setup&#xff1a;Pre-training result&#xff1a;Comparison with SOTA&#xff1a;Pre-t…
阅读更多...
推荐几个 VSCode 流程图工具

推荐几个 VSCode 流程图工具

Visual Studio Code&#xff08;简称VSCode&#xff09;是一个由微软开发的免费、开源的代码编辑器。 VSCode 发布于 2015 年&#xff0c;而且很快就成为开发者社区中广受欢迎的开发工具。 VSCode 可用于 Windows、macOS 和 Linux 等操作系统。 VSCode 拥有一个庞大的扩展市…
阅读更多...
2024信创数据库TOP30之达梦DM8

2024信创数据库TOP30之达梦DM8

近年来&#xff0c;中国信创产业快速崛起&#xff0c;其中数据库作为基础软件的重要组成部分&#xff0c;发挥了至关重要的作用。近日&#xff0c;由DBC联合CIW/CIS共同发布的“2024信创数据库TOP30”榜单正式揭晓&#xff0c;汇聚了国内顶尖的数据库企业及产品&#xff0c;成为…
阅读更多...
将网站地址改成https地址需要哪些材料

将网站地址改成https地址需要哪些材料

HTTPS&#xff08;安全超文本传输协议&#xff09;是HTTP协议的扩展。它大大降低了个人数据&#xff08;用户名、密码、银行卡号等&#xff09;被拦截的风险&#xff0c;还有助于防止加载网站时的内容替换&#xff0c;包括广告替换。 在发送数据之前&#xff0c;信息会使用SSL…
阅读更多...
RPC安全可靠的异常重试

RPC安全可靠的异常重试

当调用方调用服务提供方&#xff0c;由于网络抖动导致的请求失败&#xff0c;这个请求调用方希望执行成功。 调用方应该如何操作&#xff1f;catch异常再发起一次调用&#xff1f;显然不够优雅。这时可以考虑使用RPC框架的重试机制。 RPC框架的重试机制 RPC重试机制&#xff1…
阅读更多...
【c++丨STL】priority_queue（优先级队列）的使用与模拟实现

【c++丨STL】priority_queue（优先级队列）的使用与模拟实现

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C、STL 目录 前言 一、priority_queue简介 二、priority_queue的使用 构造函数(constructor) empty size top push和pop swap 仿函数的使用 三、prio…
阅读更多...
【数据结构】【线性表】【练习】删除链表倒数第n个结点

【数据结构】【线性表】【练习】删除链表倒数第n个结点

目录 申明 题目 分析题目信息 解题思路 代码解析 技巧解析&#xff1a;创建虚拟头结点 时间复杂度分析 思考&#xff1a;能否只用一趟扫描实现&#xff1f; 双指针 双指针解题思路 代码解析 申明 该题源自力扣题库19&#xff0c;文章内容&#xff08;代码&#xff0c…
阅读更多...
Ubuntu20.04升级glibc升级及降级的心路历程

Ubuntu20.04升级glibc升级及降级的心路历程

想使用pip安装Isaac Sim&#xff0c;无奈此方法只支持 GLIBC>2.34 。使用的是Ubuntu20.04&#xff0c;使用 ldd --version 查看GLIBC版本&#xff0c;如果版本低于 2.34 则需要升级GLIBC&#xff0c;基于此开始了长达一天的尝试。 请注意&#xff0c;升级GLIBC是一个危险操作…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023