Vue
文章平均质量分 66
缘明随心
这个作者很懒,什么都没留下…
展开
-
webpack-初识
初识webpackwebpack 概念安装初始化项目安装webpack简单的构建---使用命令的方式构建项目使用webpack打包简单构建项目---使用配置文件的方式创建src文件夹创建配置文件---webpack.config.js在package.json文件中定义,运行指令webpack配置webpack配置文件package.json 配置安装html处理插件配置本地服务器---(等待扩展)安装---webpack-dev-server配置本地服务器配置运行指令处理css---loader安装配置w原创 2020-07-16 18:09:54 · 129 阅读 · 0 评论 -
vue-获取当前时间并格式化
yyyy-mm-dd hh:mm:ssVue.prototype.getNowFormatDate = function getFormatDate() { var date = new Date(); var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) { month = "0" + month;原创 2020-07-11 13:31:53 · 6614 阅读 · 0 评论 -
vue-组件双向绑定--v-model的原理
vue-组件双向绑定--v-model的原理v-model指令v-model指令@input =“value = $event":value="value"父组件<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <h1>年龄:{{age}}</h1> <!-- 使用v-model绑定一个事件,发送一个数据 --&原创 2020-07-10 17:15:50 · 447 阅读 · 0 评论 -
vue-使用js创建组件--render函数
vue-cli--使用js创建组件--render函数template 怎么被写成一个页面的一般使用组件我们也可以使用JS创建一个组件template 怎么被写成一个页面的template 被 vue-template-compiler 插件编译成一个render函数render函数再被创建成一个VNode(虚拟dom)一般使用组件创建组件,一般的我们再components文件夹中创建一个需要的组件导入:import 组件的名字 from '地址’// 导入一个其他的组件import原创 2020-07-10 16:56:01 · 3672 阅读 · 2 评论 -
vue-$nextTick-等待页面渲染完毕的回调
vue-$nextTickvue-cli中$nextTick的作用案例--切换标签内容第一种解决方法--使用定时器第二种方法(重要)---$nextTickvue-cli中$nextTick的作用作用:等待页面渲染完毕回调场景:操作dom的时候,数据修改,页面还没渲染完毕,就去获取数据,会有延迟,获取的是之前的数据案例–切换标签内容当我们需要切换标签的内容时,可能会因为没有渲染完毕,直接调用赋值时,会复制到最初没有改变的数据 <div class="home"> &原创 2020-07-10 14:57:34 · 8714 阅读 · 0 评论 -
vue-混合-mixin
vue---混合-mixin混合-mixin创建使用混合-mixin抽出各个组件的相同的业务逻辑和数据创建创建一个mixin文件夹,在里面定义一些公用的mixin方法定义export default {mounted(){}}export default { data() {return { user : {name : "momo",age : 18} }}, mounted() { console.log("组件被挂载了"); }, methods : { s原创 2020-07-10 11:08:03 · 225 阅读 · 0 评论 -
vue-cli-中的组件加载模式
vue-cli中的组件加载模式动态组件案例---动态改变组件异步加载组件案例---点击加载异步的组件动态组件导入组件注册组件调用组件时通过component标签以及属性is来进行识别需要加载的组件是什么案例—动态改变组件 <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <component :is="current"></component> <原创 2020-07-09 18:07:41 · 242 阅读 · 0 评论 -
vue-缓存
vue---缓存vue---缓存再需要的页面中路由中添加在展示页面显示进行处理---keep-alivevue—缓存再需要的页面中路由中添加meta : { keep : true} { path: '/', name: 'Home', component: Home, meta : {keep : true} },在展示页面显示进行处理—keep-alive<keep-alive> <router-view class="page" v-原创 2020-07-09 15:07:42 · 136 阅读 · 0 评论 -
vue---vux详解
vue---vux详解VUEX 全局状态管理器什么样的数据需要放在vuex中?参数---详解`state``geeters``mutations``actions``modules`使用modules----state的使用及调用modules----getters的使用及调用modules----mutations的使用及调用modules----actions的使用及调用问题----如何在vuex中调用vuex中的方法或事件使用映射解构的方法在组件中直接调用对应事件,数据名等VUEX 全局状态管理原创 2020-07-07 19:33:28 · 5159 阅读 · 34 评论 -
Ajax---详解
AjaxHTTPhttp请求方式中的8中请求方式请求报文响应http请求/响应的步骤客户端链接到web服务器发送http请求服务器接收请求返回HTTP响应释放链接TCP链接客户端浏览器解析HTML内容http响应状态码GET与POST请求区别HTTP主要特点无连接无状态简单快速灵活支持B/S 与C/S原生的---Ajax什么是AjaxAjax的优势Ajax的缺点同步异步Ajax的实现步骤Ajax---GET方法案例Ajax---POST方法案例Ajax的方法中的名词解释文件上传jQuery中的---Ajax原创 2020-07-01 18:56:38 · 4796 阅读 · 39 评论 -
vue-问题
vue-问题为什么要封装axiosjsopn的原理什么是跨域同源策略跨域方法vue-cli中路由守卫方法有哪些组件内部路由独享全局路由守卫参数说明this说明$router与 $route区别vue组件有哪些传参方式cookie sessionStorage localStorage 区别js文档注释有哪些格式什么是promise为什么要封装axios实现默认配置 如:baseURL,timeout…实现请求拦截:header添加(token、user)加载提示 数据进行格式化响应拦截:原创 2020-07-01 10:07:31 · 720 阅读 · 0 评论 -
JavaScript-Promise的使用及详细解释
JavaScript-Promise的使用及详细解释案例使用多种方法实现以下案例第一种---setTimeout嵌套第二种---封装函数Promise详解小案例第三种---使用Promise来实现最开始的案例Promise---具体使用的案例第一版---点击按钮显示图片第二版---加载出第一张之后在加载其他,依次加载第三版---图片中谁先加载完成,谁就先显示第四版---等待图片全部加载完毕,所有图片一起显示封装Jsonp案例使用多种方法实现以下案例案例目标“你好”----2秒后输出“你笑起来真好原创 2020-07-01 09:22:29 · 2379 阅读 · 33 评论 -
封装-Jsonp
封装-JsonpJsonpjsonp是什么?为什么使用jsonp?原理---jsonp的通俗讲解案例---使用script的src获取跨域数据封装Jsonp案例---获取qq.com中的城市信息与天气信息Jsonpjsonp是什么?通过script标签中的src属性没有同源限制的方法进行获取数据即通过script标签来跨域获取数据,名为JSON with Padding,或者就叫JSONP。JSONP的原理很简单,但需要服务器端给予相应配合。大致来说,JSONP的实现思路就是在客户端编程时作原创 2020-07-01 09:14:23 · 748 阅读 · 0 评论 -
vue-路由守卫
vue-cli---路由守卫组件内的路由守卫---局部`beforRouterEnter() {}`----进入路由前执行的方法案例---拦截,不登陆不能进入购物车,自动跳转到登录界面案例---显示隐藏tabs全局路由守卫案例---实现权限登录组件内的路由守卫—局部beforRouterEnter() {} 进入路由前执行的方法beforRouterLeave() {} 离开路由前执行的方法beforeRouterUpdate() {} 路由更新前执行的方法,如: produce/abc =原创 2020-07-01 08:55:26 · 785 阅读 · 0 评论 -
Vue-Axios的封装---登录注册---axios(二)
Vue-cli---Axios的封装简单的的登录与注册第一种---逻辑数据未分离注册登录用户页面获取用户数据信息以及注销第二种---逻辑数据分离---token封装Axios调用封装完毕的Axios---并在添加所需要的方法然后进行使用登录zai首页获取并显示用户信息及注销token的使用简单的的登录与注册第一种—逻辑数据未分离注册使用注册原型的方式的axios方法进行注:有后台更好<template> <div class="register"> <h1原创 2020-06-29 21:01:14 · 5298 阅读 · 39 评论 -
vue-axios(一)
vue-axios认识及使用Axios 简介Axios 引入方式安装 axios导入 axios使用 axios 的三种方法---GET,POST,FILEAxios 中 GET方法Axios 中 POST请求的三种方式POST的第一种----urlencoded方法POST的第二种----json数据方法POST的第三种----qs序列化Axios 中的---file方法--文件上传案例---上传文件,显示进度条通过axios 构造方法获取数据---就是直接使用axios不适用注册原型的方法Axios 配原创 2020-06-28 18:56:08 · 2499 阅读 · 31 评论 -
vue-跨域问题
vue-跨域问题同源策略什么是浏览器的同源策略什么是跨域 ,实现跨域的方法有那些跨域跨域的方法jsonp ,CRS 浏览器响应头信息允许跨域(`Access-Control-Allow-Origin : * `) 允许任何域名访问 --后端设置本地服务器代理跨域---proxy什么是jsonp服务器跨域的实现原理vue-cli 的代理跨域代理跨域的原理代理跨域的实现方法同源策略什么是浏览器的同源策略当前浏览器发起Ajax的时候要求,当前页面,和请求地址同源当前页面 : http://localho原创 2020-06-28 18:52:44 · 568 阅读 · 0 评论 -
vue-导入导出及路由相关
vue---导入导出及路由相关vue 导入与导出vue中 js模块的导入与导出匿名导出与匿名导入具名导出与具名导入补充---导入时:`.js`, `.vue` 这些可以隐藏(不用写),`index`,这个名字也可以省略案例---使用`省略index.js`的方法来简写多层级导出补充`console.log()`与`console.dir()`的区别动态的异步导入---懒加载动态的异步导入---prefetch,提前加载(将其加载到缓存中,等到所有文件加载完毕时,或者触发时才加载)导入图片vue 路由路由--原创 2020-06-27 20:20:10 · 3877 阅读 · 33 评论 -
Vue-vue-cli---初识,网路请求,组件传参
vue-cli---初识,网路请求,组件传参vue-cli的初识view页面的认识---vue组件的组成写法与vue单页面相同cli的组件的调用vue-cli---css样式vue中的生命周期函数---钩子函数vue-cli中的文件是,.vue文件vue-lic---网络请求网络请求---查看的方法网络请求---响应阶段vue-cli---组件间传递数据vue-cli的初识view页面的认识—vue组件的组成一个组件就是一个.vue文件template 模板 ,只能有一个根节点script 逻辑原创 2020-06-22 16:54:34 · 2572 阅读 · 21 评论 -
Vue-vue-cli的安装
Vue脚手架---vue-cli的安装安装vue-cli1. 安装node.js2. 全局安装nrm(用来切换下载源)3. 全局安装脚手架(vue-cli)4. 创建项目进入创建好的项目文件夹运行项目---不要关闭命令窗口浏览器运行---命令窗口会给出运行地址安装vue-cli1. 安装node.js下载Node.jsNode.js地址键盘win+R键 打开运行,输入cmd输入:node -V 查看版本,如果安装成功则可以查看2. 全局安装nrm(用来切换下载源)npm i原创 2020-06-19 19:09:09 · 810 阅读 · 0 评论 -
Vue-组件相关
vue组件相关组件为什么使用组件???定义组件定义全局组件定义局部组件调用组件内的属性,跟vue实例中的属性一样,但是有些是函数形式,有些是跟vue实例一样组件的参数组件的传参-父传子组件的传参-子传父组件插槽-slot具名插槽组件分离案例---todoList组件为什么使用组件???组件复用性强,可以更改几个参数等,就可以拿到其他地方用隔离(拆分),大型项目里,每个人只需要负责一部分,等定义组件定义全局组件使用 实例化的Vue对象调用组件方法component("组件名字" { tem原创 2020-06-19 17:35:12 · 2755 阅读 · 67 评论 -
vue-watch与computed的区别
vue中watch与computed的区别watch 与 computedwatch 与 computed区别watch 与 computedwatch 与 computed区别watch 监听数据变化执行handler函数computed是从现有数据计算出现新的数据computed 会缓存,watch 不会缓存,频繁操作数据时简易computedcomputed 不能实现异步,watch可以异步computed 时多对一的关系(多个数据,计算一个数据)watch 一原创 2020-06-19 09:36:47 · 328 阅读 · 0 评论 -
Vue-Vue双向绑定原理简单总结
Vue双向绑定原理简单总结Vue双向绑定原理Vue双向绑定原理总结vue.js是采用数据劫持结合发布者-订阅模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据创建时,发布消息给订阅者,触发相应的监听回调...原创 2020-06-19 09:33:38 · 438 阅读 · 0 评论 -
Vue-style,class绑定,以及动画
Vue-style,class绑定,以及动画vue的参数对象Vue指令加深Vue 操作dom---`$refs``class`的绑定`style`绑定Vue中的动画transfrom动画关键帧动画动画模式动画组动画vue的参数对象el vue的作用域(模板指定)templatedata vue的定义初始数据methods vue的事件方法中心computed vue的计算属性,从现有属性计算新的数据watch vue监听,如果监听对象,必须有deep : true声明周期钩子函数创建阶原创 2020-06-17 18:01:16 · 2494 阅读 · 0 评论 -
Vue案例-数字每三个字符加个逗号
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <h原创 2020-06-17 14:41:47 · 3861 阅读 · 0 评论 -
Vue-事件等
Vue事件vue的参数对象vue事件修饰符按键修饰符计算属性---`computed`监听---`watch`过滤---管道----`filters : {}`案例---过滤小数以及更加条件案例---电话3-4-4模式自定义指令案例--- 图片加载骨架vue的参数对象el vue的作用域data vue的定义初始数据methods vue的事件方法中心computed vue的计算属性,从现有属性计算新的数据watch vue监听,如果监听对象,必须有deep : true声明周期钩子函数原创 2020-06-16 17:32:32 · 733 阅读 · 38 评论 -
Vue-指令的基本原理(可能)
Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。备注:应当直接在 Object 构造器对象上调用此方法,而不是在任意一个 Object 类型的实例上调用。const object1 = {};Object.defineProperty(object1, 'property1', { value: 42, writable: false});object1.property1 = 77;// throws原创 2020-06-16 14:43:52 · 1508 阅读 · 0 评论 -
Vue-初识
vue 总体感知作者:尤雨溪渐进式的前端框架思维:1,angular指令思维 2,react组件与虚拟dom思维version:2.x版本vue组件:模板(视图),业务逻辑,指令:联系模板与与业务逻辑el : 指定vue的模板data : 指定vue的初始数据methods : 指定vue的所有事件的函数vue中的thisdata的数据,methods里面的方法,都会直接挂载到vue实例上面,所以this.数据名,this.方法名,都可以直接访问对原创 2020-06-15 18:24:28 · 571 阅读 · 0 评论