Vue
vue相关笔记
坚持每天学习一点
找一个程序员学习搭子 杭州有没有帮我内推的大佬?
展开
-
Vue父子组件传值.sync
传统的父子组件之间传值,父组件通过 :变量=“xxx”将值传给子组件,子组件通过props进行接收。但是子组件只有读的属性,不可以对数据进行更改,所以$emit传回父组件,由父组件对数据进行修改//父组件<template> <div class="content"> <btn :btnName='num' @changeFn= changeFn></btn> </div></template>子组件exp原创 2022-05-20 23:53:18 · 1740 阅读 · 0 评论 -
axiso 的使用
Vue官方推荐的ajax请求框架叫做:axiosaxios的Get请求语法: axios.get("/item/category/list?pid=0") // 请求路径和请求参数拼接 .then(function(resp){ // 成功回调函数 }) .catch(function(){ // 失败回调函数 })// 参数较多时,可以通过params来传递参数axios.get("/item/category/list", ..原创 2022-05-16 19:45:20 · 126 阅读 · 0 评论 -
Vue中为什么使用axios详解
1、Vue中选择什么网络模块?Vuex中发送网络请求有非常多的方式1) 传统的Ajax是基于XMLHttpRequest(XHR)为什么不使用?配置和调用方式非常混乱,所以在开发中很少使用,而是使用 jquery-ajax2)jquery-ajax为什么不使用?首先我们需要明确一点,在vue的整个开发中是不需要使用 jquery的,那么意味着为了方便我们进行一个网络请求,特意引入一个重量级的框架jquery,得不偿失3)axiosaxios有非常多的优点,并且使.原创 2021-01-20 23:46:00 · 1652 阅读 · 0 评论 -
VUE CLI3的使用
1、vue-cli3和2版本的区别①、vue-cli3是基于 webpack4打造,vue-cli2还是webpack3②、vue-cli3的设计原则是“0配置”,移除配置文件根目录下的,build和config目录③、vue-cli3提供了 vue ui 命令,提供了可视化的配置,更加人性化④、移除了static文件夹,新增了public文件夹,并且 index.html移动到public中2、使用vue-cli3创建项目1)进入项目需要存放的路径,vue create 项目.原创 2021-01-08 08:02:00 · 398 阅读 · 0 评论 -
Vue笔记
1、vue 有道云笔记原创 2021-02-02 22:33:00 · 72 阅读 · 0 评论 -
Vue的插值语法
1、mustache语法<div id="app"> {{message}} vue <br> {{firstName + ' ' + lastName}} <br> {{firstName}} {{lastName}} <br> {{counter * 2}}</div>2、v-once当希望插值表达式中的内容仅渲染一次时......<div id="app"> <.原创 2021-02-07 23:33:00 · 239 阅读 · 0 评论 -
Vue中 v-bind的使用
1、v-bind的基本使用作用:动态的绑定元素的属性<div id="app"> <!-- 这里不可以使用 mustache 语法 v-bind 有一个语法糖==》 可以直接简写为 : --> <img v-bind:src="imageUrl" alt="博客园背景"> <a v-bind:href="url" target="_blank">百度一下</a> <!--语法糖写法--> .原创 2021-02-09 22:37:00 · 817 阅读 · 0 评论 -
vue项目使用.env文件配置全局环境变量
关于文件名:必须以如下方式命名:.env 全局默认配置文件,不论什么环境都会加载合并.env.development 开发环境下的配置文件.env.production 生产环境下的配置文件关于文件内容:注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXXVUE_APP_USER_URL = XXXXXX关于文件的加载:npm run / npm build时需要携带环境变量,如果不携带环境变量的话,会默认加载 env.development .原创 2021-02-10 09:30:00 · 265 阅读 · 0 评论 -
ES6的async的用法
1、async是什么?async 作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。2、async如何使用写一个async 函数:async function timeout() { return 'hello world'}console.log(timeout());conso...原创 2021-02-10 10:14:00 · 199 阅读 · 0 评论 -
ES6补充
1、块级作用域变量作用域: 变量在什么范围内是可用的没有块级作用域引起的问题:for的问题var btns = document.getElementsByTagName('button');for(var i=0;i<btns.length;i++){ btns[i].addEventListener('click',function () { console.log("第"+i+"个按钮被点击!"); })}无论点击哪个按钮,打印的都是通.原创 2021-02-18 08:00:00 · 63 阅读 · 0 评论 -
vue事件监听 v-on
在前端开发中,我们经常用到交互,在vue中如何监听事件呢,使用v-onv-on介绍作用:绑定事件监听器缩写:@参数:event1、v-on基础用法<button @click="increment">+</button><button @click="decrement">-</button>const app = new Vue({ e...原创 2021-02-18 22:07:00 · 367 阅读 · 0 评论 -
vue循环遍历 v-for
当我们有一组数据需要进行渲染时,就可以通过v-for来完成1、遍历数组<!--在遍历的过程中,没有用到索引值--><ul> <li v-for="item in names">{{item}}</li></ul><!--在遍历的过程中,获取下标值--><ul> <li v-for="(item,index) in names"> {{index+1}} . {{item}}.原创 2021-02-18 22:30:00 · 551 阅读 · 0 评论 -
表单绑定 v-model的使用
表单控件在实际开发中是非常常见的。特别是对于用户信息的提交,需要大量的表单。Vue中使用v-model指令来实现表单元素和数据的双向绑定1、v-model的基本使用<div id="app"> <input type="text" V-model="message"> <h2>{{message}}</h2></div>const app = new Vue({ el: "#app", //用于挂载要管理的元.原创 2021-02-19 07:36:00 · 4444 阅读 · 0 评论 -
vue组件-基本使用
1、什么是组件化?组件化是Vue.js中的重要思想它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用任何应用都会被抽象成一棵组件树组件化思想的应用:有了组件化的思想,我们需要在之后的开发中,充分的利用它尽可能将页面拆分成一个个小的,可复用的组件,这样让我们的代码更加方便组织和管理,并且扩展性也更强2、注册组件的基本步骤1)创建组件构造器2)注册组件3)使用组件<div id="app">//3、使用组件 .原创 2021-02-24 21:19:00 · 135 阅读 · 0 评论 -
Vue组件(二) 通信
1、父组件向子组件传递数据1、父组件通过props向子组件传递数据在vue中,子组件是不能引用父组件或者是Vue实例的数据的但是在开发中,往往有一些数据需要从上层传递到下层:那么如何进行父子组件间的通信呢?通过props向子组件传递数据通过事件向父组件2、demo演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti.原创 2021-03-10 21:34:00 · 123 阅读 · 0 评论 -
vue插槽
1、为什么要使用插槽组件的插槽组件的插槽是为了让我们封装的组件更加具有扩展性让使用者可以决定组件内部的一些内容到底是什么2、如何封装这类组件呢? slot最好的方式就是将共性抽取到组件中,将不同暴露为插槽一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容是搜索框,还是文字,还是菜单,由调用者自己来决定3、插槽的基本使用<!--1、插槽的基本使用 <slot></slot> 2、插槽的默认值 <slot.原创 2021-03-10 22:01:00 · 1576 阅读 · 0 评论 -
前端模块化-导入导出
1、CommonJs实现导入导出导出:通过一个对象导出module.exports = { flag : true, test(a,b){ return a + b; }, demo(a,b){ return a * b }}导入let {test,demo,flag} = require('moduleA')等价于let _ma = require('moduleA')let test = _ma.test2、ES的导入导出1.原创 2021-04-01 00:09:00 · 526 阅读 · 0 评论 -
Vue CLI
1、什么是Vue CLI2、Vue CLI的使用前提 - node + webpack3、Vue CLI的使用1) 安装Vue脚手架npm install -g @vue/cli //默认安装最新的安装指定版本的vue-clinpm install -g @vue/cli@3.2.1查看版本vue --version注意:上面安装的是Vue CLI3的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。npm install -g.原创 2021-04-01 21:53:00 · 97 阅读 · 0 评论 -
Vue Router(一)
1、认识路由vue-router 基本使用vue-router 嵌套路由vue-router 参数传递vue-router 导航守卫keep-alive2、什么是前端渲染,什么是后端渲染1)后端渲染jsp:java server page后端路由阶段:早期的网站开发,整个HTML页面是由服务器来渲染的服务器直接生产好对应的html页面,返回给客户端进行显示2)前后端分离阶段3)单页面富应用阶段spa其实 SPA.原创 2021-04-05 22:22:00 · 97 阅读 · 0 评论 -
Vue Router(二)
1、动态路由router/index.js 中,有如下路由{ path: '/user/:userId', component: User}App.vue中<router-link :to="'/user/'+userId" tag="button">用户</router-link>在User组件中,想要获取到传来的路由参数export default { name: "User", computed:{ userI.原创 2021-04-05 22:50:00 · 83 阅读 · 0 评论 -
Promise
1、什么是promisePromise是异步编程的一种解决方案,将网络请求和回调操作分离2、什么情况下会用到Promise一般情况下,有异步操作时,会使用Promise对这个异步操作进行封装3、Promise的基本语法//1、实用 timeout/* setTimeout(() => { console.info("hello,world!!!") },2000);*/ // 参数 -> 函数 //resolve,reject .原创 2021-04-05 23:00:00 · 88 阅读 · 0 评论 -
Vuex使用
1、Vuex是干什么的Vuex是一个专门为Vuejs应用程序开发的状态管理模式状态管理模式到底是什么?1)你可以简单的将其看成:把需要多个组件共享的变量全部存储在一个对象里面2)然后将这个对象放在顶层的Vue实例中,让其他组件可以使用3)那么,多个组件是不是可以共享这个对象中的所有变量属性了呢?2、使用vuex入门1)创建一个store文件夹和一个index.js,vuex相关的内容放在此处2)index.js中添加如下内容import Vue from.原创 2021-04-08 08:05:00 · 85 阅读 · 0 评论 -
网络请求的封装
1、Vue中选择什么网络模块?Vuex中发送网络请求有非常多的方式1)传统的Ajax是基于XMLHttpRequest(XHR)为什么不使用?配置和调用方式非常混乱,所以在开发中很少使用,而是使用 jquery-ajax2)jquery-ajax为什么不使用?首先我们需要明确一点,在vue的整个开发中是不需要使用 jquery的,那么意味着为了方便我们进行一个网络请求,特意引入一个重量级的框架jquery,得不偿失3)axiosaxios有非常多的优点,并且使用起来.原创 2021-04-08 23:07:00 · 298 阅读 · 0 评论 -
Vue项目中使用和清除定时器
一、方法11)在首先在vue实例的data中定义定时器的名称:export default{ data(){ timer:null }}2)在方法(methods)或者页面初始化(mounted())的时候使用定时器this.timer = setInterval(()=>{ //需要做的事情},1000);3)然后在页面销毁的生命周期函数(beforeDestroy())中销毁定时器export default{ data.原创 2021-04-19 08:42:00 · 3857 阅读 · 1 评论 -
Vue props传递的类型和写法
1、props常用属性type (规定数据类型) String 字符串 Number 数字 Boolean 布尔 Array 数组 Object 对象 Date 日期 Function 函数 Symbol 独一无二的值(es6)default default : (默认值) 基础数据类型: 直接赋值 对象数据类型: 用函数赋值 ()=>[]required required: (必填项) 默认为false,说明父级必须传入,否则会报.原创 2021-04-19 12:47:00 · 920 阅读 · 0 评论 -
移动端开发常用的vue组件
在移动端的开发过程中,涉及到了许多优秀的组件,在此记录下来,以供以后查询:1、tab 页切换,支持左右滑动,通常结合 swiper 进行使用https://github.com/ScoutYin/ly-tab2、轮播图:vue-awesome-swiperhttps://blog.csdn.net/u012570307/article/details/107203851/3、分页滚动组...原创 2021-04-21 12:54:00 · 1026 阅读 · 0 评论 -
Vue项目部署
1、在ide中执行 npm run build执行打包命令一般vue项目打包后的内容放在dist文件夹下,打包后的文件结构如下。2、安装好nginx后。查看nginx.conf文件打开ngin.conf,可以看到nginx默认监听在8080端口,根目录是 /opt/public当访问nginx的8080端口时,返回根目录下的 index.html | index.htm | default.html3、将dist文件下的内容拷贝到nginx 默认的根文件加下此时...原创 2021-06-02 12:26:00 · 2405 阅读 · 0 评论 -
vue路由到参数不一样的同一个页面
参考博客: https://blog.csdn.net/yehaocheng520/article/details/118998899原创 2021-12-20 19:15:00 · 464 阅读 · 0 评论 -
vue项目中定义全局filter
参考博客: https://www.cnblogs.com/zhaoxiaoying/p/10723063.html1、在format.js中定义全局filter函数export default { formatDate(value) { let date = new Date(value.replace(/-/g, "/")) let yea...原创 2021-12-20 19:19:00 · 475 阅读 · 0 评论 -
vue页面配置缓存,使页面跳转时填写的数据不丢失
1、项目文件配置App.vue的内容<template> <div id="app"> <!--所有界面设置缓存--> <keep-alive> <router-view></router-view> </keep-alive> </div></template>2、路由中添加keepAlive属性const routes = .原创 2021-12-20 19:41:00 · 870 阅读 · 0 评论