vue
关注
分享
扫一扫
Simple_IDE
这个作者很懒，什么都没留下…
展开
-
koa使用socketio
服务端const Koa = require('koa');const Router = require('koa-router') // koa 路由中间件const app = new Koa();const router = new Router(); // 实例化路由const process = require('child_process');// 使用中间件,保证可跨域const CORS = require('./middleware/cors.js');const { de原创 2021-08-05 17:09:45 · 1285 阅读 · 2 评论 -
vue中配置proxy代理不起作用
记住！在修改完vue.config.js文件只后一定要用npm run serve重启服务原创 2021-06-11 11:44:25 · 2104 阅读 · 1 评论 -
vue中设置代理解决跨域
编辑vue.config.js文件module.exports={ devServer:{ proxy:{ '/test':{ target:'http://localhost:7002', changeOrigin: true, secure: false, pathRewrite: { '^/test': ''原创 2021-06-09 15:48:30 · 127 阅读 · 0 评论 -
vue中使用v-bind=“$attrs“进行多层组件的传值
有如下的嵌套关系<grandfather> <father> <grandson> </grandson> </father></grandfather>比如说在grandfather中传给了father一些propsgrandfather.vue<div> <father name="test" age="18" hobby="badminiton" grade="3".原创 2021-06-07 16:07:56 · 24165 阅读 · 6 评论 -
vue指令
vue2注册指令<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js"><原创 2021-05-19 14:39:26 · 110 阅读 · 0 评论 -
手写mini-vue之重新理解
introduce核心模块(core modules)Reactivity Module 有响应式对象发生改变的时候会重新调用render函数Compiler Module 获取HTML模板并编译成渲染函数(render function)Renderer Module -Render Phase(渲染阶段) 调用render函数生成Vnode -Mount Phase 调用VNode挂载到网页 -Patch Phase(补丁阶段也原创 2021-05-15 09:59:05 · 223 阅读 · 1 评论 -
egg中间件权限认证(cookie的跨域访问)
解决跨域携带cookie的问题前端设置//在每次请求的时候在加一个withCredential:trueaxios({ url:`${baseURL}/addArticle`, method:"POST", //一定要设置下面这个headers才可以跨域携带 headers:{ 'Access-Control-Allow-Origin':'http://localhost:8080/' }, withCredentials:true,})原创 2021-05-08 19:55:53 · 636 阅读 · 0 评论 -
vue3中使用markdown编辑和展示
安装支持vue3版本的v-md-editor插件# 使用 npmnpm i @kangc/v-md-editor@next -S# 使用yarnyarn add @kangc/v-md-editor@next在vue3项目中引入import { creatApp } from 'vue';import VueMarkdownEditor from '@kangc/v-md-editor';import '@kangc/v-md-editor/lib/style/base-edit.原创 2021-04-26 11:39:00 · 1656 阅读 · 2 评论 -
vue中background-image图片路径问题
vue中background-image图片路径问题原创 2021-04-25 20:09:17 · 700 阅读 · 0 评论 -
vue3监听响应式对象
let book = reactive({ name: "js编程", price: 50, }); const changeBookName = () => { book.name = "c#"; }; watch(()=>book.name,()=>{//通过一个函数返回要监听的属性 console.log('书名改变了') })原创 2021-04-25 16:22:36 · 1155 阅读 · 0 评论 -
router-view 组件间传值
router-view 组件间传值原创 2021-04-25 15:28:02 · 404 阅读 · 0 评论 -
vue中的动态路由
注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：const userId = '123'router.push({ name: 'user', params: { userId }}) // -> /user/123router.push({ path: `/user/${userId}` }) // -> /user/123// 这里的 para.原创 2021-04-23 13:16:44 · 148 阅读 · 0 评论 -
vue中获取select中option的key和value
原创 2021-04-22 21:25:49 · 4615 阅读 · 0 评论 -
vue中的diff算法
function diff(n1,n2){ //n1=preSubTree n2=curSubTree //1.tag变化 if(n1.tag!==n2.tag) { n1.el.replaceWith(document.createElement(n2.tag)); } //2.props变化 else { //交换新旧节点的element const el=(n2.el=n1.el);/原创 2021-04-18 22:39:09 · 118 阅读 · 0 评论 -
vue中的虚拟dom转化为真实dom
1.创建虚拟节点Vnode的函数 createVNode()2.在render中创建虚拟节点VNodes 3.在createApp中把得到的虚拟节点挂载到根节点上去 首先是写一个创建虚拟dom的函数function createVNode(tag,props,children){ return {tag,props,children}}然后在根组件中render函数中创建虚拟domreturn createVNode("div",{ id:"app原创 2021-04-18 21:32:44 · 1424 阅读 · 0 评论 -
mini-vue vue3的一些原理
响应式的原理const {effect,reactive} =require('@vue/reactivity')//要做到a变化,依赖a的b也跟着变化//首先让a成为一个响应式的对象let a=reactive({ value:10})let b;//然后使用副作用//effect在初始化的时候会执行一次//当a发生变化的时候,effect也会执行一次//这个effect跟react的useEffect差不多effect(()=>{ b=a.value+10}原创 2021-04-15 19:40:09 · 326 阅读 · 1 评论 -
vue3实现todoList
App.vue<template> <h2>App</h2> <input type="text" v-model="todo" /> <button @click="add">test</button> <div class="wrap" v-for="(item,index) in data" :key="index"> {{item}} <div class="delete".原创 2021-04-13 12:40:37 · 418 阅读 · 0 评论 -
vue中的ref
<template> <h2>App</h2> <input type="text" ref="txt" value="simple"></template><script lang="ts">// 引入子级组件Childimport { defineComponent, onMounted, ref, toRefs } from 'vue'export default defineComponent({ name原创 2021-04-12 12:47:03 · 297 阅读 · 0 评论 -
自定义hooks
定义hookimport { ref,onMounted, onUnmounted} from 'vue'export default function useMousePosition(){ const x=ref(-1); const y=ref(-1); const updatePosition=(e:MouseEvent)=>{ x.value=e.pageX; y.value=e.pageY; } onMou.原创 2021-04-12 12:30:24 · 148 阅读 · 0 评论 -
vue3中的computed和watch
computed函数:与computed配置功能一致当回调中只有一个函数的时候只有getter有getter和setter const fullName1=computed(() => { console.log('fullName1') return user.firstName + '-' + user.lastName }) const fullName2 = computed({ get () { console原创 2021-04-10 18:13:11 · 350 阅读 · 0 评论 -
手写vue3中的组合api
shalloReactive和reactiveconst reactiveHandler = { get (target, key) { if (key==='_is_reactive') return true return Reflect.get(target, key) }, set (target, key, value) { const result = Reflect.set(target, key, value) console.log(原创 2021-04-10 10:44:28 · 137 阅读 · 0 评论 -
vue2和vue3响应式的区别
vue2的响应式核心:对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持Object.defineProperty(data, 'count', { get () {}, set () {}})问题对象直接新添加的属性或删除已有属性, 界面不会自动更新直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {}Vue3的响应式核心:通过原创 2021-04-09 17:37:18 · 407 阅读 · 0 评论 -
vue3起步
安装vue3脚手架npm i -g @vue/cli如何支持typescript在创建项目的时候如vue create fileName 选择manmully,然后用空格选中typescript选项使用vue3的图形界面vue ui语法高亮支持下载vuter新语法import { defineComponent ,ref} from 'vue';export default defineComponent({ name: 'App', se.原创 2021-04-07 14:31:34 · 277 阅读 · 0 评论 -
vue中动态引入图片的问题
1.import方式<img :src="logo">import logo from '@assets/images/avatar.png';data() { return { logo }}2.require方式<img :src="logo">data() { return { logo:require("@assets/images/avatar.png") }}原创 2020-12-09 09:58:04 · 363 阅读 · 0 评论 -
vue路由守卫
一、什么是导航守卫？导航：“导航”表示路由正二、为什么使用导航守卫？真实的项目中需要判断权限或者登录状态决定用户能访问的路由，但是因为路由是在浏览器地址栏中的，用户可以输入，如果不加以拦截就可以看到本不该看到的页面；为了避免这种情况，我们需要使用导航守卫，在路由发生变化时作出相应的判断，判断用户是否可以去到他想去往的页面的路由；三、常用的导航守卫： let router = new VueRouter({....});1.全局前置守卫router.beforeEach((to原创 2020-11-22 15:14:22 · 1380 阅读 · 0 评论 -
mockjs学习
1.首先在项目中安装mockjs一般的还会在项目中安装json5.解决son文件不能加注释的问题npm install mockjs --save-devnpm install json5 --save-dev2.在项目中使用mockjs//引入mockjs模块const Mock=require('mockjs')let obj=Mock.mock({ id:'@id', username:'@cname()',//随机生成一个中文名字 date:'@date()'原创 2020-11-22 13:06:32 · 141 阅读 · 0 评论 -
vue-router动态路由匹配-响应路由参数变化
原创 2020-11-22 12:25:10 · 455 阅读 · 0 评论 -
vue中v-model的原理
原创 2020-11-22 10:18:50 · 138 阅读 · 0 评论 -
vue父组件接收子组件传递方法的参数
原创 2020-11-22 10:12:48 · 1089 阅读 · 0 评论 -
vue组件中的data为什么是函数
原创 2020-11-22 10:04:14 · 102 阅读 · 0 评论 -
vue中的key值
原创 2020-11-22 09:33:36 · 784 阅读 · 0 评论 -
axios中的GET POST PUT PATCH
1.GET:用域获取数据2.POST：用于提交数据3.PUT ：更新数据（吧所有数据推送到后端）4.PATCH：更新数据（只推送修改的数据到后端）5.DELETE:删除数据一个简单的请求axios({ method:'GET', url:'/data.json'， params:{ //传递的参数 id:12 //在URL中为 //http://localhost:8080/data.json?id=12原创 2020-11-19 16:44:33 · 528 阅读 · 0 评论 -
vue组件缓存
vue组件缓存原创 2020-11-17 19:08:15 · 160 阅读 · 0 评论 -
vue中的$nextTick
在vue中，数据改变影响视图(DOM)不是立即的，也就是说如果想要修改数据后(比如this.article = data.data)马上操作被该数据影响的DOM(比如获取article中的数据)，需要把此代码放到$nextTick中原创 2020-11-13 16:49:25 · 78 阅读 · 0 评论 -
在有作用域的组件给子组件设置样式
默认只能作用到子组件的根节点1.使用子组件根节点本身的class类名2.如果是第三方组件不知道类名，可以审查元素获取或者自定义类名但是如果我们想修改子组件非根节点的样式应该怎么办呢？用/deep/深度作用操作符 /deep/ .van-grid-item__content { background: unset; }...原创 2020-11-02 09:12:11 · 145 阅读 · 0 评论 -
npm中的-S -D
1.-S(一定要大写)npm 在早期的时候安装包不会生成依赖信息，那么什么是依赖信息呢，就是packge.json中的dependencies如果生成了依赖信息，那么删除node_modules这个文件也不会有什么影响,因为packge.json记录了你项目中所需要的包的信息，如果你把node_modules删除了，那么你项目运行的话 ，它会根据dependencies中的信息取下载那么如果我需要依赖信息呢 这就需要用到-S了 它是–save的简写2.-D一般把开发过程中所用到的包保存到原创 2020-10-27 12:48:00 · 1082 阅读 · 0 评论 -
vue中的render
vue中的renderrender: h => h(App)等同于render : function(createElement){ return createElement(App)}render函数是渲染一个视图，然后提供给el挂载，如果没有render，页面上什么都没有h是createElement的别名，vue生态系统的通用管理这是vue2.0的写法，在vue1.0中写成components: { App }...原创 2020-10-27 12:33:40 · 133 阅读 · 0 评论 -
vue-router的使用
vue-router的使用路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。路由中有.原创 2020-10-27 12:29:40 · 211 阅读 · 0 评论 -
在vant使用插槽自定义图标
1.在每个带图标的组件下面会有相应的v-slot name说明2.在组件中使用(这里用的是阿里巴巴的icon font) <van-field v-model="user.mobile" center icon-prefix="toutiao" left-icon="shouji" placeholder="请输入手机号码" style="position:relative;"> <template #left-icon>原创 2020-10-27 10:00:43 · 8468 阅读 · 4 评论 -
vue插槽的使用v-slot
vue插槽的使用v-slot原创 2020-10-26 21:29:37 · 274 阅读 · 0 评论