前端-Vue
文章平均质量分 61
努力的Wellington
努力的Wellington
展开
-
【Vue3】学习笔记-reactive响应式
【Vue3】学习笔记-reactive响应式用ref 设置响应式对象用reactive 设置响应式对象总结用ref 设置响应式对象JS中设置对象import { ref } from "vue";var user = ref({ username: "Wellington", age: 18,});调用方法function setUserAge() { user.value.age = 14; console.log(user);}在视图页面显示 <h1>原创 2022-03-05 16:00:00 · 1517 阅读 · 0 评论 -
【Vue3】学习笔记-响应式ref
【Vue3】学习笔记-响应式refvite创建Vue3项目Vue3 声明全局变量响应式ref总结vite创建Vue3项目npm 7+用以下指令npm init vite@latest my-vue-app -- --template vue安装依赖npm install运行npm run devVue3 声明全局变量<script setup>import HelloWorld from './components/HelloWorld.vue'</script原创 2022-03-03 20:50:53 · 1496 阅读 · 0 评论 -
【Vue】学习笔记-路由
【Vue】学习笔记-路由路由概述创建包括路由模块的Vue项目配置router.js文件编程式导航导航守卫常见错误总结路由概述一个Web应用应该有多个页面,之前学习的Vue案例都是在一个页面完成的,通过路由,可以让应用在多个页面间跳转(严格的说Vue是单页面应用,所以跳转的不是其他页面,而是其他组件)。本文将会讲解路由的常用功能创建包括路由模块的Vue项目首先使用下面命令创建一个带路由的项目:vue create RouterProject├─src │ └─assets │ │ └─logo.原创 2022-02-28 04:30:00 · 1276 阅读 · 0 评论 -
【Vue】学习笔记-非父子级传递数据
【Vue】学习笔记-非父子级传递数据前言非父子级传递数据常见错误总结前言组件之间的传值可以分为三种:1.父级向子集传递数据2.子级向父级传递数据3.非父子级传递数据本文主要讲解非父子级传递数据非父子级传递数据在编写项目组件过程中,使用store.js管理非父子级间的数据,相当于建立一个类似于全局变量的store来管理非父子级之间的关系,创建sister和brother两个平级组件,在App组件中同时引入两个组件store.js如下export default { //状态原创 2022-02-27 22:51:22 · 730 阅读 · 0 评论 -
【Vue】学习笔记-组件传值的数据累加器
【Vue】学习笔记-组件传值的数据累加器前言父级组件购物车组件计数器组件常见错误总结前言组件传值的数据累加器可以分为三个部分App.vue为父级组件Carts.vue表示购物车Counter.vue表示计数器父级组件实现页面的组件传值主要思路为:父组件引入可视化的购物车组件(Carts.vue),而购物车组件数量的变化又依赖于计数器组件的值。因此,在编写累加器(Counter.vue)时,应该父组件(App.vue)中导入购物车组件然后购物车组件在编写的时候导入累加器(Counter.vue)原创 2022-02-27 22:50:44 · 1270 阅读 · 0 评论 -
【Vue】学习笔记-数据交互
【Vue】学习笔记-数据交互概述安装axios通过axios向后台获取数据数据交互的实现常见错误总结概述基于Vue的web项目显示的所有服务端数据,都是通过Ajax获取的。官方推荐使用Axios作为Ajax库,所以本文主要讲解在Vue项目中,如何安装和使用Axio,以及通过前端的Vue框架和后端的Koa框架进行数据交互的例子安装axiosVue项目中使用如下命令安装npm install axios --save在要引用axios的页面引用import axios from 'axios'原创 2022-02-28 03:00:00 · 1804 阅读 · 5 评论 -
【Vue】学习笔记-表单
【Vue】学习笔记-表单数据双向绑定表单控件(在form中)数据双向绑定通过v-mode指令在文本输入框中创建双向数据绑定@submit.prevent=“postData” prevent防止出现闪现表单控件(在form中)0.标签 label1.文本输入框 input type=text2.密码输入框 input type=password3.下拉菜单 select option4.单选框 input type=“radio”(两个) v-mod原创 2022-02-28 03:00:00 · 898 阅读 · 0 评论 -
【Vue】学习笔记-插槽、DOM、过滤器
【Vue】学习笔记-插槽、DOM、过滤器插槽DOM过滤器总结插槽让我们更灵活地使用组件,增强组件的扩展性。开发或使用UI库,了解组件制作原理。ElementUI基本基于插槽实现。例如实现按钮中文本的自定义,可以通过属性传值,也可以通过插槽来实现。App.vue<template> <div class="app"> <my-button >提交</my-button> <my-button >注册</my-butt原创 2022-02-27 22:48:58 · 710 阅读 · 0 评论 -
【Vue】学习笔记-Vue生命周期钩子
【Vue】学习笔记-Vue生命周期钩子Vue生命周期钩子vue实例vue实例生命周期钩子总结Vue生命周期钩子页面加载时,主动执行某些程序,比如之前在写methods时候,一般会在里面指定一些方法,比如getData获取数据methods:{ getData(){ //do ajax }}当我们打开一个网页的时候,网页直接显示数据而不是打开某个事件之后再显示数据,会在组件加载的时候直接显示列表,所以通过事件触发来调用getData()是无法满足要求的,生命周期钩原创 2022-02-27 22:48:30 · 989 阅读 · 0 评论 -
【Vue】学习笔记-计算属性与侦听器
【Vue】学习笔记-计算属性与侦听器前言计算属性侦听器编程中常见错误总结前言computed:计算属性watch:侦听器(监听器)计算属性data属性和computed属性定义的值都可以直接绑定在表达式中。如果某些值需要通过计算才能得到,那么最好使用计算属性,计算属性具有缓存,重复调用只计算一次如购物清单总价 =单价 * 数量 * 折扣代码如下:<template> <div class="app"> <h1>计算属性与侦听器</h1&原创 2022-02-27 22:48:02 · 923 阅读 · 1 评论 -
【Vue】学习笔记-组件传值
【Vue】学习笔记-组件传值前言1.父级向子集传递数据2.子级向父级传递数据常见错误总结前言组件之间的传值可以分为三种:1.父级向子集传递数据2.子级向父级传递数据3.非父子级传递数据本文主要讲解父级向子集传递数据和子级向父级传递数据这两种1.父级向子集传递数据父级向子级传递数据:使用属性传递1)在App组件中,绑定msg属性传递给Child内部(:msg=“message”)data()中message:“app.vue data”2)Child获取信息用props:[“msg”](数原创 2022-02-27 22:46:04 · 1799 阅读 · 0 评论 -
【Vue】学习笔记-模板语法
【Vue】学习笔记-模板语法前言条件判断指令显示列表指令组件嵌套常见错误与总结前言指令是带有’v-'前缀的特殊属性,常见的指令如下所示:v-bind:绑定属性(简写:)v-on:绑定事件(简写@)条件判断指令v-if和v-show为条件判断指令两者的区别如下运行时显示结果为:v-if是不渲染dom,而v-show是渲染dom,然后将元素设置为display:none条件判断指令具体有什么作用呢?使用条件判断常见的例子有:网页根据用户是否登录跳转页面,源代码如下:<templ原创 2022-02-27 22:44:49 · 1097 阅读 · 1 评论