JavaScript-Vue入门

本文主要测分享Vue的一些基础

Vue简介

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。它的主要目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

下是一些 Vue 的主要特点和概念:

1. 响应式数据绑定
Vue 使用基于 HTML 的模板语法,允许你声明式地将已渲染的 DOM 绑定至底层 Vue 实例的数据。当数据改变时,视图会自动更新。这种数据驱动的方式使得状态管理变得直观而简单。

2. 组件化
Vue 允许你将界面拆分为可重用的组件,每个组件都有自己的逻辑和样式。这使得代码更易于组织和维护,同时提高了代码的复用性。你可以使用 Vue 的单文件组件特性,将模板、逻辑和样式封装在一个 .vue 文件中。

3. 指令
Vue 提供了一套丰富的指令,用于在模板中绑定数据、事件、样式等。例如,v-bind 用于绑定属性,v-on 用于绑定事件处理器,v-if 和 v-show 用于条件渲染等。

4. 生命周期钩子
Vue 实例在其生命周期中有一系列的钩子函数,允许你在不同的阶段执行特定的逻辑。例如,你可以在组件创建时初始化数据,或在组件销毁时清理资源。

5. 路由和状态管理
虽然 Vue 本身并不直接包含路由和状态管理功能,但它与 Vue Router(官方路由库)和 Vuex(官方状态管理库)无缝集成。Vue Router 使得构建单页面应用变得简单,而 Vuex 则提供了一个集中式的存储库,用于管理应用的状态。

创建第一个Vue程序

打开Webstorm,创建一个新项目选择Vue

6565a2b48a0c593cbc8d0edbe2591436.png

然后创建之后根据终端输出提示,执行命令

cd yourproject这个命令用于切换到当前目录下的 datagenerate 文件夹

npm install 安装项目中 package.json 文件里列出的所有依赖。

npm run dev这个命令用于执行 package.json 文件中 scripts 部分定义的 dev 脚本。通常情况下,dev 脚本用于启动项目的开发服务器,这样你就可以在本地浏览器中查看和测试你的应用了。

运行后,打开网页就是如此界面

892eddd70a74b1c6cabe64fb162b0682.png

当然可以直接通过命令创建

要创建一个新的 Vue 项目,首先需要安装 Vue CLI(命令行界面)。确保你已经安装了 Node.js 和 npm,然后在命令行中运行以下命令:

npm install -g @vue/cli

安装完成后,可以使用以下命令创建一个新的 Vue 项目:

vue create my-project

按照提示选择所需的配置选项,如 Babel、TypeScript、CSS 预处理器等。创建完成后,进入项目目录并启动开发服务器:

cd my-project npm run serve

现在,你可以在浏览器中访问 http://localhost:8080 查看你的 Vue 应用程序。

Vue 项目结构

一个典型的 Vue 项目结构如下:

my-project/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── store/
│   ├── views/
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md
  • node_modules/: 存储项目的依赖包。

  • public/: 存放公共文件,如 index.html 和 favicon.ico

  • src/: 存放项目的源代码。

    • assets/: 存放静态资源,如图片、字体等。

    • components/: 存放可复用的 Vue 组件。

    • router/: 存放路由配置文件。

    • store/: 存放 Vuex 状态管理文件。

    • views/: 存放页面级组件。

    • App.vue: 根组件。

    • main.js: 应用程序的入口文件。

  • .gitignore: 指定需要 Git 忽略的文件和目录。

  • babel.config.js: Babel 配置文件。

  • package.json: 项目的元数据和依赖项配置文件。

  • README.md: 项目的说明文档。

Vue基础

Vue实例:Vue应用的根本是一个Vue实例。通过创建一个Vue实例来启动应用。

// 创建一个Vue实例
const app = new Vue({el: '#app', // 挂载点,指定Vue实例管理的DOM元素data: {message: 'Hello, Vue!' // 定义数据}
});

Vue 模板语法

Vue 使用基于 HTML 的模板语法,允许你声明式地将数据渲染到 DOM 中。Vue 模板语法包括插值、指令和特殊特性。

插值

可以使用双大括号({{}})在模板中插入数据:

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'Hello, Vue!'}}
}
</script>

指令

指令是带有 v- 前缀的特殊属性,用于在表达式的值改变时,将某些行为应用到 DOM 上。常用的指令包括:

  • v-if:根据表达式的真假值来有条件地渲染元素。

  • v-for:基于数组或对象渲染一个列表。

  • v-bind:动态绑定一个或多个属性,或一个组件 prop 到表达式。

  • v-on:绑定事件监听器。

  • v-model:在表单控件或者组件上创建双向绑定。

示例:

<template><div><ul><li v-for="item in items" :key="item.id">{{ item.text }}</li></ul><child-component ref="child"></child-component><component :is="currentComponent"></component></div>
</template><script>
import ChildComponent from './ChildComponent.vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'export default {components: {ChildComponent,ComponentA,ComponentB},data() {return {items: [{ id: 1, text: '项目 1' },{ id: 2, text: '项目 2' },{ id: 3, text: '项目 3' }],currentComponent: 'ComponentA'}},methods: {accessChild() {console.log(this.$refs.child)}}
}
</script>
特殊特性

Vue 提供了一些特殊的模板特性,如 keyrefis 等,用于实现特定的功能。

  • key:用于标识 v-for 循环中的每个节点,以便 Vue 能够跟踪节点的身份,从而重用和重新排序现有元素。

  • ref:用于在父组件中直接访问子组件或 DOM 元素。

  • is:用于动态组件或者避免 HTML 解析限制。

示例:

<template><div><h1>{{ $route.name }}</h1><button @click="goBack">返回</button></div>
</template><script>
export default {methods: {goBack() {this.$router.go(-1)}}
}
</script>

路由配置

Vue Router 是 Vue.js 的官方路由管理器,用于构建单页应用。它允许我们将 URL 映射到组件,实现页面的导航和切换。

安装 Vue Router

要在 Vue 项目中使用 Vue Router,首先需要安装它:

npm install vue-router

配置路由

在 src/router/index.js 文件中配置路由:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

在上面的代码中,我们导入了 VueRouter 并使用 Vue.use() 方法将其注册为 Vue 插件。然后定义了一个 routes 数组,其中每个对象表示一个路由,包含 pathname 和 component 属性。最后,创建了一个 VueRouter 实例,并将 routes 传递给它。

使用路由

在 src/App.vue 文件中使用 <router-view> 组件来渲染匹配的路由组件:

<template><div id="app"><nav><router-link to="/">首页</router-link> |<router-link to="/about">关于</router-link></nav><router-view></router-view></div>
</template>

使用 <router-link> 组件创建导航链接,当点击链接时,Vue Router 会自动更新 URL 并渲染对应的组件。

在组件中,可以使用 this.$router 访问路由器实例,使用 this.$route 访问当前路由对象。

示例:

<template><div><h1>{{ $route.name }}</h1><button @click="goBack">返回</button></div>
</template><script>
export default {methods: {goBack() {this.$router.go(-1)}}
}
</script>

响应式原理

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把"接触"过的数据 property 记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。

const data = { count: 0 };const vm = new Vue({data
});console.log(vm.count); // 0vm.count = 1;
console.log(data.count); // 1

组件通信

Props:Props 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个 property。

// 子组件
Vue.component('child', {props: ['message'],template: '<span>{{ message }}</span>'
});// 父组件
new Vue({el: '#app',template: '<child message="Hello from parent!"></child>'
});

自定义事件:父组件可以通过 v-on 监听子组件触发的自定义事件,子组件可以通过 $emit 触发自定义事件。

// 子组件
Vue.component('child', {template: '<button v-on:click="$emit(\'my-event\')">触发事件</button>'
});// 父组件
new Vue({el: '#app',template: '<child v-on:my-event="handleEvent"></child>',methods: {handleEvent() {console.log('事件触发');}}
});

插槽(Slot):插槽允许你像这样合成组件:

<navigation-link url="/profile">个人资料
</navigation-link>

然后你在 <navigation-link> 的模板中可能会写为:

<a v-bind:href="url" class="nav-link"><slot></slot>
</a>

Vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

/ 定义状态
const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}}
});// 在组件中使用状态
new Vue({el: '#app',computed: {count() {return store.state.count;}},methods: {increment() {store.commit('increment');}}
});

生命周期钩子

Vue 实例在创建时都要经过一系列的初始化过程,例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户在不同阶段添加自己的代码的机会。

常用的生命周期钩子包括:

  • created:在实例创建完成后被立即调用。

  • mounted:实例被挂载后调用。

  • updated:当实例更新完毕之后调用。

  • destroyed:实例销毁后调用。

new Vue({data: {message: 'Hello, Vue!'},created() {console.log('实例已创建');},mounted() {console.log('实例已挂载');},updated() {console.log('实例已更新');},destroyed() {console.log('实例已销毁');}
});

表单处理

v-model 指令可以在表单 <input><textarea> 及 <select> 元素上创建双向数据绑定。

<div id="app"><input v-model="message" placeholder="输入消息"><p>输入的消息:{{ message }}</p>
</div>
new Vue({el: '#app',data: {message: ''}
});

表单验证可以通过自定义指令或插件来实现,例如 VeeValidate。

<div id="app"><form><input v-model="email" v-validate="'required|email'" name="email" type="email"><span v-show="errors.has('email')">{{ errors.first('email') }}</span></form>
</div>
import VeeValidate from 'vee-validate';Vue.use(VeeValidate);new Vue({el: '#app',data: {email: ''}
});

API交互

  • 可以使用 Axios 或 Fetch 等库发起 HTTP 请求与后端 API 进行交互。

  • 使用 Axios 发起请求:

    import axios from 'axios';new Vue({methods: {async fetchData() {try {const response = await axios.get('/api/data');console.log(response.data);} catch (error) {console.error(error);}}}
    });
  • 使用 Fetch 发起请求:

    new Vue({methods: {async fetchData() {try {const response = await fetch('/api/data');const data = await response.json();console.log(data);} catch (error) {console.error(error);}}}
    });

插件与工具

  • Vue Devtools:Vue Devtools 是一个浏览器扩展,用于调试 Vue.js 应用程序。它允许你检查组件层次结构、查看组件的数据和状态等。

  • Vue CLI:Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。它提供了一个功能丰富的命令行工具,可以帮助你快速创建和管理 Vue 项目。

    # 安装 Vue CLI
    npm install -g @vue/cli# 创建一个新项目
    vue create my-project# 启动开发服务器
    cd my-project
    npm run serve

性能优化

  • 使用计算属性:计算属性可以缓存计算结果,避免在模板中进行复杂的逻辑运算。

    new Vue({data: {firstName: 'John',lastName: 'Doe'},computed: {fullName() {return this.firstName + ' ' + this.lastName;}}
    });
  • 使用 v-if 和 v-show:v-if 会根据条件销毁或重建元素,而 v-show 只是切换元素的 display 属性。对于频繁切换的元素,使用 v-show 可以提高性能。

    <div v-if="condition">...</div>
    <div v-show="condition">...</div>
  • 使用异步组件:异步组件可以在需要时才加载组件,减少初始加载时间。

    Vue.component('async-component', () => import('./AsyncComponent.vue'));
  • 使用 keep-alive:keep-alive 可以缓存组件实例,避免重复渲染。

    <keep-alive><component :is="currentComponent"></component>
    </keep-alive>

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

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

相关文章

Visual Studio安装MFC开发组件

MFC由于比较古老了&#xff0c;Visual Studio默认没有这个开发组件。最近由于一些原因&#xff0c;需要使用这个库&#xff0c;这就需要另外安装。 参考了网上的一些资料&#xff0c;根据实际使用&#xff0c;其实很多步骤不是必须的。 https://zhuanlan.zhihu.com/p/68117276…

Neo-reGeorg(webshell代理)-php

https://github.com/L-codes/Neo-reGeorg python加载需要的库 pip install requests 生成webshell代理文件 python .\neoreg.py generate -k 123456 其中&#xff0c;123456为密码&#xff0c;可以修改 生成后的文件路径&#xff1a; > neoreg_servers/tunnel.ashx …

Java后台开发的前置说明

1.知识点逻辑 一个部分 都是先挑重点知识点讲解 然后根据这些重点知识点去完成一个项目的开发 然后在到返回来解决这个部分其他细枝末节的知识点 2.软件开发的分工 我们大致可以将软件开发分成四块&#xff1a; 1.前端开发(比如开发电脑中的京东 htmlcssjavascript) 2.移动开…

什么是主数据管理?合理管理主数据,奠定企业数据战略基石

主数据&#xff08;Master Data&#xff09;是指在企业多个业务系统中重复使用、共享的、具有高价值的核心业务实体数据&#xff0c;如客户、产品、供应商、员工等&#xff0c;它们是企业运营和决策的基础&#xff0c;需要保持高度的准确性、一致性和完整性&#xff0c;以确保业…

Scala 05 —— 函数式编程底层逻辑

Scala 05 —— 函数式编程底层逻辑 该文章来自2023/1/14的清华大学交叉信息学院助理教授——袁洋演讲。 文章目录 Scala 05 —— 函数式编程底层逻辑函数式编程假如...副作用是必须的&#xff1f;函数的定义函数是数据的函数&#xff0c;不是数字的函数如何把业务逻辑做成纯函…

贪吃蛇详解

Win32 API介绍&#xff1a; 在写贪吃蛇这款游戏时需要用到一些有关Win32 API的知识&#xff0c; 接下来我会将设计到的知识点列举并讲解&#xff1a; 首先我们先了解一下Win32 API是什么&#xff0c;Windows这个多作业系统除了协调应⽤程序的执⾏、分配内存、管理资源之外&am…

普乐蛙VR航天航空体验馆VR双人旋转座椅元宇宙VR飞船

多长假来袭&#xff01;&#xff01;想为门店寻找更多新鲜有趣的吸粉体验&#xff1f;想丰富景区体验&#xff1f;别着急&#xff0c;小编为你准备了一款爆款设备——时光穿梭机&#xff0c;720无死角旋转&#xff01;&#xff01;吸睛、刺激体验&#xff0c;将亲子、闺蜜、情侣…

Java对象不再使用时,为什么要赋值为 null

相信大家在面试Java开发的时候,会遇到比较多的问题是Java的内存管理,这里面涉及到Java垃圾回收机制,以及JVM调优等等,那么今天跟大家讨论一个问题:Java对象不再使用时,为什么要赋值为 null ? 1、Java内存管理 在Java中,对象是在堆内存中分配的。 这部分内存用于存储…

科技论文网站:中国科技论文在线

文章目录 1. Intro2. Main3. Cons Evaluation彩蛋&#xff1a;科学素质 这是作者最后一次发 这种类型的宣传 科普文章 1. Intro 中国科技论文在线是经教育部批准&#xff0c;由教育部科技发展中心主办&#xff0c; 利用现代信息技术手段&#xff0c;打破传统出版物的概念&…

Scrapy爬虫框架入门(豆瓣电影Top 250)

文章目录 Scrapy 官网Scrapy 文档GithubScrapy 简介项目结构爬虫实现XPath 教程创建 Scrapy 项目配置用户代理网页 dom 元素 IP 代理池IP代理池作用配置IP代理池申请IP代理池 Scrapy 官网 https://scrapy.org/ Scrapy 文档 https://docs.scrapy.org/en/latest/ Github htt…

在windows上安装MySQL数据库全过程

1.首先在MySQL的官网找到其安装包 在下图中点击MySQL Community(gpl) 找到MySQL Community Server 选择版本进行安装包的下载 2.安装包&#xff08;Windows (x86, 64-bit), MSI Installer&#xff09;安装步骤 继续点击下一步 继续进行下一步&#xff0c;直到出现此界面&#…

Vue3+vite优化基础架构(1)--- 使用unplugin-vue-components

Vue3vite优化基础架构&#xff08;1&#xff09;--- 使用unplugin-vue-components 说明安装unplugin-vue-componentsvite.config.js中使用unplugin-vue-components/vite 说明 这里记录下自己在Vue3vite的项目使用unplugin-vue-components/vite来自定义组件自动全局引入svg雪碧…

【八股】Spring Boot

SpringBoot是如何实现自动装配的&#xff1f; 首先&#xff0c;SpringBoot的核心注解SpringBootApplication里面包含了三个注解&#xff0c;SpringBootConfigurationEnableAutoConfigurationComponentScan&#xff0c;其中EnableAutoConfiguration是实现自动装配的注解&#x…

用自然语言连接系统的认知,用Function Calling 连接大模型和业务

前言 本篇文章&#xff0c;我们重点介绍Function Calling的机制和应用&#xff0c;在其原理上&#xff0c;也讲解了为什么会有plugin、GPTs出现等等。 核心要点&#xff1a; 1.大模型应用的一切&#xff0c;是自然语言连接系统的认知 2.在Function Calling的应用中&#xff0…

重要文件怕丢失怎么办?汇帮数据备份软件帮你解决文件丢失的烦恼 帮你实现文件实时备份的好方法

随着数字时代的来临&#xff0c;电脑文件已成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;无论是个人用户还是企业用户&#xff0c;都可能面临数据丢失的风险&#xff0c;如硬盘故障、病毒攻击、误删除等。为了确保数据安全&#xff0c;实现电脑文件的实时备份变…

等保合规:保护企业网络安全的必要性与优势

前言 无论是多部网络安全法律法规的出台&#xff0c;还是最近的“滴滴被安全审查”事件&#xff0c;我们听得最多的一个词&#xff0c;就是“等保。” 只要你接触安全类工作&#xff0c;听得最多的一个词&#xff0c;一定是“等保。” 那么&#xff0c;到底什么是“等保”呢…

Redis网络相关的结构体 和 reactor模式

目录 1. epoll的封装 结构体aeApiStae 创建epoll fd的封装 epoll_ctl的封装 epoll_wait的封装 2. 结构体aeFileEvent、aeFiredEvent、aeTimeEvent 结构体aeFileEvent 结构体aeFiredEvent 结构体aeTimeEvent 3. struct aeEventLoop aeEventLoop相关的函数 1. 创建eve…

Rust HTTP 客户端:易于使用、功能强大 | 开源日报 No.228

seanmonstar/reqwest Stars: 8.9k License: Apache-2.0 reqwest 是一个易于使用且功能强大的 Rust HTTP 客户端。 异步和阻塞客户端支持普通数据、JSON、urlencoded 和 multipart 数据格式可定制的重定向策略支持 HTTP 代理和系统原生 TLS 或 rustls 的 HTTPSCookie 存储功能…

JVM学习笔记(五)内存模型

目录 1、原子性 1.1 问题分析 1.2 解决方法 2、可见性 2.1 退不出的循环 2.2 解决办法 3、有序性 3.1 诡异的结果 3.2 解决办法 3.3 有序性理解 3.4 happens-before 4、CAS与原子类 4.1 CAS 4.2 乐观锁与悲观锁 4.3 原子操作类 5、synchronized 优化 5.1 轻量…

17(第十六章,数据管理组织与角色期望)

目录 概述 基本概念 首席数据官 个人角色 执行官角色 业务角色 IT角色 混合角色 组织架构模式 概述 本章书上的重点内容其实不多&#xff0c;了解的地方例如数据管理组织的结构包括分散、网络、混合、联邦、集中等运营模式。 之前也提过的RACI&#xff08;谁负责&am…