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

news2024/12/22 9:02:17

前端框架VUE入门

    • 概述
    • 基础语法介绍
    • 组件特性
      • 组件注册
      • Props 属性声明
      • 事件
      • 组件 v-model(双向绑定)
      • 插槽Slots内容与出口
    • 组件生命周期
    • 完整示例
      • 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.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.coloradmin.cn/o/2242005.html

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

相关文章

Jmeter基础篇（24）Jmeter目录下有哪些文件夹是可以删除，且不影响使用的呢？

Jmeter基础篇（24）Jmeter目录下有哪些文件夹是可以删除，且不影响使用的呢？

一、前言 Jmeter使我们日常做性能测试最常用的工具之一啦&#xff01;但是我们在和其他同学协同工作的时候&#xff0c;偶尔也会遇到一些问题&#xff0c;例如我想要给别人发送一个Jmeter工具包&#xff0c;但这个文件包往往会很大&#xff0c;比较浪费流量和空间&#xff0c;…
阅读更多...
Python_爬虫3_Requests库网络爬虫实战（5个实例）

Python_爬虫3_Requests库网络爬虫实战（5个实例）

目录 实例1&#xff1a;京东商品页面的爬取 实例2&#xff1a;亚马逊商品页面的爬取 实例3&#xff1a;百度360搜索关键词提交 实例4&#xff1a;网络图片的爬取和存储 实例5&#xff1a;IP地址归地的自动查询 实例1&#xff1a;京东商品页面的爬取 import requests url …
阅读更多...
StructuredStreaming （一）

StructuredStreaming （一）

一、sparkStreaming的不足 1.基于微批,延迟高不能做到真正的实时 2.DStream基于RDD,不直接支持SQL 3.流批处理的API应用层不统一,(流用的DStream-底层是RDD,批用的DF/DS/RDD) 4.不支持EventTime事件时间&#xff08;一般流处理都会有两个时间&#xff1a;事件发生的事件&am…
阅读更多...
计算机网络HTTP——针对实习面试

计算机网络HTTP——针对实习面试

目录 计算机网络HTTP什么是HTTP&#xff1f;HTTP和HTTPS有什么区别&#xff1f;分别说明HTTP/1.0、HTTP/2.0、HTTP/3.0请说明访问网页的全过程请说明HTTP常见的状态码Cookie和Session有什么区别&#xff1f;HTTP请求方式有哪些&#xff1f;请解释GET和POST的区别&#xff1f;HT…
阅读更多...
转轮数组（C语言实现）

转轮数组（C语言实现）

题目介绍 方法一我们可以先把数字1 2 3 4逆转一下&#xff0c;第二步我们可以逆转一下5 6 7&#xff0c; 最后整体逆置一下就会变成上面的数字。 void reverse(int* nums, int begin, int end) {while (begin < end){int tmp nums[begin];nums[begin] nums[end];nums[en…
阅读更多...
Ubuntu 的 ROS 操作系统 turtlebot3 gazebo仿真

Ubuntu 的 ROS 操作系统 turtlebot3 gazebo仿真

引言 TurtleBot3 Gazebo仿真环境是一个非常强大的工具&#xff0c;能够帮助开发者在虚拟环境中测试和验证机器人算法。 Gazebo是一个开源的3D机器人仿真平台&#xff0c;它能支持物理引擎&#xff0c;允许机器人在虚拟环境中模拟和测试。结合ROS&#xff0c;它能提供一个完整的…
阅读更多...
uniapp vuex的使用

uniapp vuex的使用

实现组件全局&#xff08;数据&#xff09;管理的一种机制&#xff0c;可以方便的实现组件之间共享数据&#xff0c;不同于上述三种传递值的方式。 可以把vuex当成一个store仓库&#xff0c;可以集中管理共享的数据&#xff0c;并且存储在vuex中的数据都是响应式的&#xff0c…
阅读更多...
uniapp适配暗黑模式配置plus.nativeUI.setUIStyle适配DarkMode配置

uniapp适配暗黑模式配置plus.nativeUI.setUIStyle适配DarkMode配置

uniapp适配暗黑模式配置 目录 uniapp适配暗黑模式配置setUIStyleDarkMode 适配app-plus manifest.json配置theme.json配置pages.json配置页面切换代码实现同步手机暗黑配置额外适配 参考官方文档&#xff1a;https://uniapp.dcloud.net.cn/tutorial/darkmode.html 主要用到api…
阅读更多...
element ui table进行相同数据合并单元格

element ui table进行相同数据合并单元格

示例如图 //要合并的项&#xff08;自定义&#xff09; const columnArr ["dq","sj","xj","zj","zjj","zjfzr","nhxm","nhsjh","nhsfzh","","",""…
阅读更多...
uniapp 实现 ble蓝牙同时连接多台蓝牙设备，支持app、苹果(ios)和安卓手机，以及ios连接蓝牙后的一些坑

uniapp 实现 ble蓝牙同时连接多台蓝牙设备，支持app、苹果(ios)和安卓手机，以及ios连接蓝牙后的一些坑

首先对 uniapp BLE蓝牙API进行封装 这里我封装了一个类&#xff1a;bluetoothService.js 代码&#xff1a; import { throttle } from lodash export default class Bluetooth {constructor() {this.device {};this.connected false;// 使用箭头函数绑定类实例的上下文&am…
阅读更多...
51单片机应用开发（进阶）---模块化编程

51单片机应用开发（进阶）---模块化编程

实现目标 1、掌握.h 文件的格式、extern 的用法&#xff1b; 2、握模块化编程方法步骤&#xff1b; 3、具体实现&#xff1a;&#xff08;1&#xff09;提供一个C文件&#xff0c;将其按照功能模块进行模块化。 一、为什么要进行模块化编程&#xff1f; 传统的编程方式&…
阅读更多...
arkUI：水果选择与管理：基于 ArkUI 的长按编辑功能实现

arkUI：水果选择与管理：基于 ArkUI 的长按编辑功能实现

水果选择与管理&#xff1a;基于 ArkUI 的长按编辑功能实现 1 主要内容说明2 相关内容2.1 相关内容2.1.1 源码1内容的相关说明2.1.1.1 数据结构与状态管理2.1.1.2 添加水果功能2.1.1.3 水果列表展示2.1.1.4 长按进入编辑模式2.1.1.5 复选框的多选功能2.1.1.6 删除水果功能2.1.1…
阅读更多...
小程序20-样式:自适应尺寸单位 rpx

小程序20-样式:自适应尺寸单位 rpx

手机设备的宽度逐渐多元化&#xff0c;也就需要开发者开发过程中&#xff0c;去适配不同屏幕宽度的手机&#xff0c;为了解决屏幕适配问题&#xff0c;微信小程序推出了 rpx 单位 rpx&#xff1a;小程序新增的自适应单位&#xff0c;可以根据不同设备的屏幕宽度进行自适应缩放 …
阅读更多...
unity3d————Resources异步加载

unity3d————Resources异步加载

知识点一&#xff1a;Resources异步加载是什么&#xff1f; 在Unity中&#xff0c;资源加载可以分为同步加载和异步加载两种方式。同步加载会在主线程中直接进行&#xff0c;如果加载的资源过大&#xff0c;可能会导致程序卡顿&#xff0c;因为从硬盘读取数据到内存并进行处理…
阅读更多...
C#/WinForm拖拽文件上传

C#/WinForm拖拽文件上传

一、首先创建一个上传文件的类&#xff0c;继承Control类&#xff0c;如下&#xff1a; public class UploadControl : Control{private Image _image;public UploadControl(){this.SetStyle(ControlStyles.UserPaint | //控件自行绘制&#xff0c;而不使用操作系统的绘制Cont…
阅读更多...
2024 同一个网段，反弹shell四种方法【linux版本】bash、python、nc、villian反弹shell图解步骤

2024 同一个网段，反弹shell四种方法【linux版本】bash、python、nc、villian反弹shell图解步骤

实验环境准备&#xff08;同一个网段下&#xff0c;我是桥接的虚拟机&#xff09; 一、bash反弹shell 二、python反弹shell 三、nc反弹shell 四、villain反弹shell 实验环境准备&#xff08;同一个网段下&#xff0c;我是桥接的虚拟机&#xff09; 一台kali的linux(攻击者)…
阅读更多...
FPGA使用Verilog实现CAN通信

FPGA使用Verilog实现CAN通信

FPGA实现CAN通信&#xff08;Verilog&#xff09; 1.作者使用的方法是通过FPGA芯片&#xff08;如Xilinx公司的型号为XC7K325TFFG676-2&#xff09;控制SJA1000T芯片&#xff08;CAN控制器芯片&#xff09;实现CAN通信&#xff0c;如下图所示&#xff1a; 2.熟悉连接方式之后&…
阅读更多...
已解决：spark代码中sqlContext.createDataframe空指针异常

已解决：spark代码中sqlContext.createDataframe空指针异常

这段代码是使用local模式运行spark代码。但是在获取了spark.sqlContext之后&#xff0c;用sqlContext将rdd算子转换为Dataframe的时候报错空指针异常 Exception in thread "main" org.apache.spark.sql.AnalysisException: java.lang.RuntimeException: java.lang.Nu…
阅读更多...
jenkins用户在执行scp的时候如何做免密登录

jenkins用户在执行scp的时候如何做免密登录

一、背景 在jenkins job中执行scp的shell命令&#xff0c;当然不希望每次输入密码&#xff0c;另外处于出于安全考虑&#xff0c;也不建议在scp命令中指定。 所以&#xff0c;我们需要对远程机器进行免密登录。 本文遇到的问题是&#xff0c;在jenkins机器上执行scp已做到了…
阅读更多...
HarmonyOS ArkUI(基于ArkTS) 开发布局 （中）

HarmonyOS ArkUI(基于ArkTS) 开发布局 （中）

HarmonyOS ArkUI(基于ArkTS) 开发布局 &#xff08;上&#xff09; 四 层叠布局 (Stack) 层叠布局&#xff08;StackLayout&#xff09;用于在屏幕上预留一块区域来显示组件中的元素&#xff0c;提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023