Vue.js
文章平均质量分 82
vue学习
游王子og
看不穿你所有的虚情假意,只触碰到你转瞬即逝的真心
展开
-
Vue.js与axios
/ 创建实例时配置默认值});// 创建实例后修改默认值。原创 2024-08-25 22:23:04 · 1068 阅读 · 0 评论 -
Vue.js ECharts使用
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。ECharts 提供了丰富的图表类型和交互能力,使用户能够通过简单的配置生成各种各样的图表,包括但不限于折线图、柱状图、散点图、饼图、雷达图、地图等。原创 2024-06-07 16:43:55 · 485 阅读 · 0 评论 -
Vue.js组件(4):组件 v-model
v-model可以在组件上使用以实现双向绑定。父组件可以用v-model返回的值是一个 ref。.valuev-model这意味着你也可以用v-model把这个 ref 绑定到一个原生 input 元素上,在提供相同的v-model。原创 2024-06-06 21:58:56 · 1448 阅读 · 0 评论 -
Vue.js组件(3):组件事件
在组件的模板表达式中,可以直接使用$emit方法触发自定义事件 (例如:在v-on父组件可以通过v-on(缩写为同样,组件的事件监听器也支持.once像组件与 prop 一样,事件的名字也提供了自动的格式转换。注意这里我们触发了一个以 camelCase 形式命名的事件,但在父组件中可以使用 kebab-case 形式来监听。与prop大小写格式一样,在模板中我们也推荐使用 kebab-case 形式来编写监听器。和原生 DOM 事件不一样,组件触发的事件。你只能监听直接子组件触发的事件。原创 2024-06-05 22:09:43 · 673 阅读 · 0 评论 -
Vue.js组件(2):Props
因为在编译时整个表达式都会被移到外部的函数中。一些补充细节:所有 prop 默认都是可选的,除非声明了。原创 2024-06-03 20:34:19 · 1047 阅读 · 0 评论 -
Vue.js组件(1):组件注册
一个 Vue 组件在使用前需要先被“注册”,这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册。原创 2024-06-03 20:04:25 · 782 阅读 · 0 评论 -
Vue.js 与 TypeScript(2) :其他标注类型
ref()ref()原创 2024-06-03 10:23:22 · 683 阅读 · 0 评论 -
Vue.js 与 TypeScript(1) :项目配置、props标注类型、emits标注类型
像 TypeScript 这样的类型系统可以在编译时通过静态分析检测出很多常见错误。这减少了生产环境中的运行时错误,也让我们在重构大型项目的时候更有信心。通过 IDE 中基于类型的自动补全,TypeScript 还改善了开发体验和效率。原创 2024-06-02 21:42:03 · 887 阅读 · 2 评论 -
Vue.js(13):模板引用
虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作,但在某些情况下,我们仍然需要直接访问底层 DOM 元素。要实现这一点,我们可以使用特殊的ref是一个特殊的 attribute,和v-for章节中提到的key类似。它允许我们在一个特定的 DOM 元素或子组件实例被挂载后,获得对它的直接引用。这可能很有用,比如说在组件挂载时将焦点设置到一个 input 元素上,或在一个元素上初始化一个第三方库。原创 2024-06-02 15:27:46 · 248 阅读 · 0 评论 -
Vue.js(12):侦听器
计算属性允许我们声明性地计算衍生值。然而在有些情况下,我们需要在状态变化时执行一些“副作用”:例如更改 DOM,或是根据异步操作的结果去修改另一处的状态。原创 2024-06-02 15:16:41 · 948 阅读 · 0 评论 -
Vue.js(11):生命周期钩子
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。原创 2024-06-01 12:00:53 · 281 阅读 · 0 评论 -
Vuex学习(1):介绍、安装、开始
/ 状态data () {return {count: 0},// 视图`,// 操作methods: {驱动应用的数据源;以声明方式将状态映射到视图;响应在视图上的用户输入导致的状态变化。以下是一个表示“单向数据流”理念的简单示意:但是,当我们的应用遇到多个组件共享状态多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。原创 2024-05-30 22:27:01 · 684 阅读 · 0 评论 -
vue项目打包教程
如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件;dist文件夹就是打包好的项目,给它放到服务器上部署即可。输入命令 npm run build 进行打包。原创 2024-05-26 20:46:40 · 287 阅读 · 0 评论 -
基于Vue的验证码实现
其中icon_light.png图标图片如下,其他img.jpg图片可以是任意图片。原创 2024-05-19 22:24:47 · 530 阅读 · 0 评论 -
Vue.js(14):组件基础
一、基本实例在这里演示的是一个简单的示例,但是在典型的 Vue 应用中,我们使用单个文件组件而不是字符串模板。你可以在本节找到有关它们的更多信息。组件是带有名称的可复用实例,在这个例子中是<button-counter>。我们可以把这个组件作为一个根实例中的自定义元素来使用: <div id="webapp"> <button-counter></button-counter> <...原创 2021-10-08 16:52:51 · 277 阅读 · 1 评论 -
Vue.js(10):表单输入绑定
一、基础用法你可以用 v-model 指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听用户的输入事件来更新数据,并在某种极端场景下进行一些特殊处理。提示:v-model会忽略所有表单元素的value、checked、selectedattribute 的初始值而总是将当前...原创 2021-10-08 15:40:52 · 214 阅读 · 1 评论 -
Vue.js(9):事件处理
一、监听事件我们可以使用v-on指令 (通常缩写为@符号) 来监听 DOM 事件,并在触发事件时执行一些 JavaScript。用法为v-on:click="methodName"或使用快捷方式@click="methodName" <div id="basic-event"> <!-- js代码直接写在内部,counter是VM实例的data中的属性也就是this.counter --> <bu...原创 2021-10-08 14:44:46 · 200 阅读 · 1 评论 -
Vue.js(8):列表渲染
一、用v-for把一个数组对应为一组元素我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法,其中 items 是源数据数组,而item则是被迭代的数组元素的别名。<div id="app"> <ul> <li v-for="item in items"> {{ item.message }} </...原创 2021-10-07 14:13:29 · 522 阅读 · 1 评论 -
Vue.js(7):条件渲染
一、v-if v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<h1 v-if="awesome">Vue is awesome!</h1>也可以用v-else添加一个“else 块”:<h1 v-if="awesome">Vue is awesome!</h1><h1 v-else>Oh no ????</h1>在<templat...原创 2021-10-07 13:17:24 · 104 阅读 · 1 评论 -
Vue.js(6):Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用v-bind处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将v-bind用于class和style时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。一、绑定 HTML Class对象语法我们可以传给:class(v-bind:class的简写) 一个对象,以动...原创 2021-10-06 13:28:32 · 392 阅读 · 1 评论 -
Vue.js(5):计算属性
一、计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如,有一个嵌套数组对象:Vue.createApp({ data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', ...原创 2021-10-05 22:37:49 · 150 阅读 · 1 评论 -
Vue.js(4):响应式基础
一、Data Property组件的data选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象,然后 Vue 会通过响应性系统将其包裹起来,并以$data的形式存储在组件实例中。为方便起见,该对象的任何顶级 property 也直接通过组件实例暴露出来:// 创建Vue对象 const app = Vue.createApp({ data() { // data函数,返回对象 return { co...原创 2021-10-04 20:04:28 · 362 阅读 · 1 评论 -
Vue.js(3):模版语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应性系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染...原创 2021-10-03 12:02:04 · 362 阅读 · 1 评论 -
Vue.js(2):创建一个 Vue 应用
一、创建一个应用实例每个 Vue 应用都是通过用createApp函数创建一个新的应用实例开始的:const app = Vue.createApp({ /* 选项 */})该应用实例是用来在应用中注册“全局”组件的。我们会在后面的指南中详细讨论,简单的例子:// 创建一个Vue应用 const app = Vue.createApp({}); // 添加组件 app.component('SearchInput', Se...原创 2021-09-28 22:21:48 · 632 阅读 · 1 评论 -
Vue.js(1):介绍
一、Vue.js 是什么Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。二、安装Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。将 Vu...原创 2021-09-27 23:10:56 · 439 阅读 · 3 评论