zlq_CSDN的博客

我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来。但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验。还有一些童鞋已经开始又慌又抓狂了 – “又要开始学新的写法了 (ノToT )ノ ~┻┻”。所以这里我使用Vue2和Vue3开发一个简单的表格组件来展示一下Vue2和Vue3开发组件的区别。看完这片文章后，你将会有一个概念Vue2和Vue3开发组件时的区别，并且为Vue3...

使用场景：菜单栏的展示任何有层次结构的树状格式实现思路：vue树状组件是属于递归组件的应用，可以通过组价命名来使用自己的组件。代码展示：父组件<template> <div> <tree-item :list="categoryList"></tree-item> </div></template&g...

弹窗组件包含内容：弹窗遮罩层内容层的实现（涉及slot、props、$on、$emit）实现步骤：搭建组件UI样式，HTML、css实现遮罩层、内容区编写弹窗内容：通过组件slot插槽接收父组件传递过来的弹窗内容组件开关的实现组件代码实现<template> <div class="modal-bg" v-show="show"> <di...

提示组件UI样式如下：设计思路：element message消息提示是方法的方式触发：this.$message({});本质上还是组件，故需要将组件转化为方法的方式来使用最后将方法挂载到 Vue prototype 原型上，即可全局使用message.vue组件的实现：<template> <div class="message> <p&g...

插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心的两个问题在这里就点出来了，是显示不显示和怎样显示。由于插槽是一块模板，所以，对于任何一个组件，从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。非插槽模板指的是html模板，比如‘div、span、ul、table’这些，非插槽模板的显示与隐藏...

有时候我们在谷歌浏览器中调试好的项目，并不一定会在手机上适配，因此我们需要在手机上进行项目的预览和测试。测试步骤保证自己的手机可以正常运行保证手机和项目开发的电脑处于同一个 WIFI 环境下，即手机可以访问电脑的 ip 地址打开项目的 package.json 文件，在 dev 脚本中，添加一个 --host 指令，将电脑当前的 WIFI ip 地址设置为 --host 的指令...

注意：1.前端服务器测试地址的万能地址，太好用了http://jsonplaceholder.typicode.com/users，基本能响应各种请求。点击进入官网2.这里测试只写了成功的回调函数，同时还要失败时的回调函数。 HTML代码：<!DOCTYPE ...

1.下载vue-devtools插件 地址 https://github.com/vuejs/vue-devtools2.解压vue-devtools-master 并双击打开 进入文件夹 3.在该文件夹下运行cmd，若是cmd进入的地址不是文件夹所在地址cd 进入解压的vue-...

引言：当我们需要和后台分离部署的时候，必须配置config/index.js:用 vue-cli 自动构建的目录里面 （环境变量及其基本变量的配置），解析如下：（1）项目中配置的config/index.js，有dev和production两种环境的配置 以下介绍的是production环境下的webpack配置的理解'use strict'// Template version: 1...

Vue中的路由可以实现不同组件间的切换。创建一个路由对象 ,当导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter。部分核心代码： <!--注意：不能够直接写/login,意思是跳转到一个真实的页面--> <!--<a href="/login">登录</a>--> &l...

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。生命周期图示基本使用：var vm = new Vue({ el: '#app', data: { msg:'ok' }, methods: { show:fu...

在 vue 1.0 之前，前后端请求数据使用的基本上都是 vue-resource ，2.0版本之后，使用 的大都是 axios 请求。import axios from 'axios'//通过 axios 来发送 get/post 请求export default function ajax( url = '', params = {}, type ="GET") { //定义 Pr...

Vue跨域配置在Vue项目目录中打开config/index.js,在proxyTable中添写如下代码：proxyTable: { '/api': { //使用"/api"来代替"http:// 你的地址（http://127.0.0.1:3000）" target: 'http:// 你的地址 ', //源地址 changeOr...

是什么？vue-lic 是 vue 官方提供的脚手架工具，默认搭建好一个项目的基本架子，我们只需要在此基础上进行相应的修改即可。下载： https://github.com/vuejs/vue安装注意：安装 vue-cli 前需要事先配置好 node 环境npm install -g vue-cli//如果是 mac 电 sudo表示以管理员的权限sudo install -...

问题报错：Access to XMLHttpRequest at ‘http://127.0.0.1:3000/api/getStuList’ from origin ‘http://localhost:63342’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the...

认识vue：Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。采用了MVVM的分层开发思想。使用前需要先进行安装或导包 （可以在CDN下载，或在项目下cpm来下载）基本结构：<script src="./vu...

概念：Vuex 是 Vue 配套的公共数据管理工具，它可以把一些共享的数据保存到 vuex 中， 方便整个程序中的任何组件直接获取或修改我们的公共数据。Vuex的使用：在项目中安装 vuex          cnpm i vuex -D在 main.js 文件中，导入，并注册import Vuex from 'vue...

下图呢是我在学习vue的时候进行的总结，该图对我们的开发模式进行了详细的介绍：