vue 生命周期钩子函数 每一个Vue实例在创建时都需要经过一系列初始化.根据vue实例化过程中执行的逻辑,可以分为5个阶段: 初始化阶段 模板编译阶段 虚拟DOM挂载阶段 响应更新阶段 卸载阶段 这个过程构成了vue实例的生命周期.在每个阶段前后都暴露了一个钩子函数,称为生命周期函数,可以让我们在特定阶段注入自定义的执行逻辑. 下面列出每个阶段的初始逻辑…

缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的几个阶段,而且也说到了Vue系列需要讲到的知识点,今天就正式开始Code,当然今天的代码都特别简单,希望大家慢慢的学习,今天主要讲的是JS高级——关于面向对象的语法. 磨刀不误砍柴工,当然,我在写这篇之前,或者是写Vue之前,都在考虑要从何处入手,怎么写,因为大家肯定有一部分是全栈工程师,都很懂,那我写的您就…

前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交流,看到博客下边好多小伙伴提出问题,我又燃起了斗志,不过这两天感冒了,所以更新的比较晚,这里也提醒大家,节日要照顾好自己哟~~~,好多人说我写的上不了台面,哈哈这里表示赞同,本系列的宗旨就是,给大家一个学习的点,让大家去自学一个面,然后大家一起学,把面交流成一个立体,就达到一个体系了.好啦,言归正传…

一.前言  在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.在这个过程中,Vue 会运行一些生命周期钩子函数,而我们则可以在钩子函数中编写一些自定义方法,用以在 Vue 的整个生命周期中某些阶段实现我们特殊需求.那么,本章,我们就来了解 Vue 实例的生命周期钩子函数. 学习系列目录地址:https://www.cnbl…

当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') module.exports = { build: { index: path.resolve(__dirname, 'dist/index.html'), assetsRoot: path.resolve(__dirname, 'dist'), assetsSubDirectory: 'stati…

mixins 混入是一种对重复代码的组织方式,可以在多个组件间复用代码. 如果在项目中,在多个组件间有一段逻辑代码是共同的.那常见的处理方式是: 每个组件都复制粘贴代码(显然这是最不好方式) 将以共同的代码逻辑抽离成多个函数,并存储到util文件里,在组件使用时引入这个方法. 直接将共同的代码剥离出来,并存储到你定义的mixin文件里,在组件使用时引入,并在实例选项中全局混入,或组件中局部混入. 后两种方式在思想上是一致的,但是mixin混入比方法抽离更为彻底,在混入中完全按照vue的代码组织方…

具体文档和demo可以访问github:https://github.com/zhoushengmufc/iosselect 移动端浏览器对于select的展示样式是不一致的,ios下是类似原生的picker,安卓下各浏览器展示各异,我们需要一个picker组件来统一各端下各种浏览器的展示. iosselect是在webapp下的一个picker组件,可以轻松实现各类选择器效果.比如地区选择 时间选择 日期选择等. 下面是一个地址选择器demo截图,可以访问:http://zhoushengfe…

iosselect是在webapp下的一个picker组件,可以轻松实现各类选择器效果.比如地区选择 时间选择 日期选择等. 下面是一个地址选择器demo截图,可以访问:http://zhoushengfe.com/iosselect/demo/three/area.html 该js picker接口丰富,适用于多类场景 可以定制依赖关系,可以定制选择层级,可以定制高度 展示项数.无论你是px还是rem,都完全不是问题.无论你是react还是angular还是vue还是zepto jquey都不…

前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.js,总的来说,这个组件不能说最好,但是对于一般不太复杂的报表是够用了.今天就来看看它如何使用吧. 一.组件比较以及选用 其实说起报表组件,网上一搜一大把,各种让人眼花缭乱的组件,但貌似比较出名一点的都是收费的.综合来看: JsChart组件功能强大,能适应各种复杂的需求和业务:Chart.js免费.…

安装方式有如下几种. 1.最常用的安装方式. # 进入atom插件文件夹 cd ~/.atom/packages/ # git clone 插件源文件 git clone https://github.com/AtomLinter/linter-eslint # 进入linter-eslint插件文件夹 cd linter-eslint # 安装插件 npm install 2.本地安装 npm i --save-dev eslint [eslint-plugins] 3.全局安装 npm i…

前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时不复习了,今天呢,咱们就说说用昨天创建的空项目来搭建一个简单的个人博客系统,首先先分析下整体工作流程,然后再动手写代码,主要涉及到 axios 和 vue-router 的相关概念,好啦,开始今天的讲解. 零.要完成的右下角褐色的部分 一.Vue 项目是如何运转的? 1.SPA的挂载页面 —— Index.h…

思路: 通过调用函数 把 组件实例this  传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConfig from './modalConfig' 我们只要在 modalConfig.js文件里定义个函数和一个变量(用来存this)即可 //用来获取 调用此 js的vue 组件 实例 (this) let vm = null; const sendThis = ( _this )=> { vm =…

Cropper.js是一款很好用的图片裁剪工具,可以对图片的尺寸.宽高比进行裁剪,满足诸如裁剪头像上传.商品图片编辑之类的需求. github: https://github.com/fengyuanchen/cropperjs 网站: https://fengyuanchen.github.io/cropperjs/ 简单使用 使用很简单,首先需要一个image或者canvas元素: <!-- Wrap the image or canvas element with a block elem…

问题一:vue文件中引入外部js文件的方法 //在vue文件中 <script> import * as funApi from '../../../publicJavaScript/publicFun.js';//这里如果有多个方法的话也引用一次就可以了 //import {test,test2,test3} from '../../../publicJavaScript/publicFun.js';//这样如果引用的方法比较多的话就会比较麻烦,而且不美观 export default {…

第二章:Node.js中交互式运行环境--------REL 一:REPL运行环境概述 C:\Users\junliu>node > foo = 'bar' ; 'bar' > 二:在REPL运行环境中操作变量 C:\Users\junliu>node > foo='bar' 'bar' > var foo='bar' undefined > console.log("foo='bar'"); //控制台窗口中将输出"bar"…

2.23 js处理日历控件(修改readonly属性) 前言    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题.    基本思路:先用js去掉readonly属性,然后直接输入日期文本内容一.日历控件    1.打开12306的车票查询界面,在出发日期输入框无法直接输入时间    2.常规思路是点开日历控件弹出框,从日历控件上点日期,这样操作比较烦躁,并且我们测试的…

一.vue使用步骤: 1.引包vue.js 2.html中写要操作的DOM节点 3.创建vue对象:new Vue({options}); 4.配置options:el:(要操作的对象,用选择器,同jquery), emplate:(模板,指定要插入的内容:{{插值表达式}},注:必须只有一个根节点), data(function(){return key:emplate中要操作的数据}), methods:{函数名:function(){函数体,(this.xxx调用data中定义的数据)(t…

ylbtech-JavaScript-Tool:Moment.js Parse, validate, manipulate, and display dates and times in JavaScript. Moment.js 是一个 JavaScript 日期处理类库,用于解析.检验.操作.以及显示日期. 1. Format Dates返回顶部 1. moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); m…

1.概念 node.js:可以运行JavaScript的服务平台,可以把它当做一个后端程序,只是它的开发语言是JavaScript (通常情况下,JavaScript的运行环境都是浏览器,因此JavaScript的能力也就局限于浏览器能赋予它的权限了.比如说读写本地系统文件这种操作,一般情况下运行在浏览器中的JavaScript代码是没有这个操作权限的.如果我们想用JavaScript写出一些能够运行在操作系统上的,能够具有像PHP,JAVA之类的编程语言具有的功能的程序该怎么办呢?Node.j…

Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局vue实例中.然后我就在js文件中这样使用 this.$notify({ title: "失败", message: "请先登录老铁~", type: "error" }); 结果报错了,报错信息如下 TypeError: _this.$notify…

ylbtech-JavaScript-Tool:md5.js 1.返回顶部 1.md5.js /* CryptoJS v3.1.2 code.google.com/p/crypto-js (c) 2009-2013 by Jeff Mott. All rights reserved. code.google.com/p/crypto-js/wiki/License */ var CryptoJS=CryptoJS||function(s,p){var m={},l=m.lib={},n=func…

介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚动完成后,不触发父元素的滚动,比如 modal.侧边栏 等等. 深入研究-webkit-overflow-scrolling:touch及ios滚动 详细文档 & 例子 Document & Demo vue-scroll-lock 一个 VUE 组件:子元素 scroll 父元素容器不跟随滚…

js进阶 11-22/23 js如何实现选项卡 一.总结 一句话总结:通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起,通过控制div标签的display属性可以实现选项卡的选项切换. 1.某些样式设置了,但是出不来效果的原因可能是什么? 优先级会导致某些特效出不来 现在设置的优先级低于之前的 可以通过加父标签的方式来增加优先级 2.如何增加样式的优先级? 可以通过加父标签的方式来增加优先级 3.如何实现一组标签中点某个标签,这个标签的样式改变? 动态给点的标签添加一个自己写好的激…

该demo纯前端实现 使用到vue技术点: 1.在该demo中使用到的vue指令:{{}}. v-if. v-model. @click v-for 2.在该demo中使用到的事件修饰符: .prevent(阻止事件默认行为) 3.在该demo中使用到的api: arr.push(item,...):向数组末尾添加一个或多个元素 arr.splice(index,num) :删除并插入,删除指定索引和数量的元素,并添加新元素,参数1必须,参数2不给则清空数组,参数3不给则不添加新元素 arr.f…

该demo由前端请求后台服务器获取数据进行渲染 使用到的技术点 1.使用到的vue指令:{{}} v-if v-for v-model 2.使用到的事件:@click 点击事件, @keyup.enter 回车 3.使用到的事件修饰符:.prevent 阻止事件默认行为 4.使用vue-resource发起请求获取服务端返回的数据 5.使用生命周期函数created(),即在页面渲染前请求用户列表 6.自定义私有过滤器 7.js base64编码:window.btoa() , base64解码…

参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742 不为其他,就为了记录一下,方便以后查看: 第一种方法: 1.首先在http.js中:定义一个变量context用来接收vue,再定一个initVue方法传入的参数是vue,并导出这个方法. import axios from 'axios' const TIME_OUT_MS = 60 * 1000 // 默认请求超时时间 let context = null…

一.环境搭建 二.项目创建 三.认识项目 四.项目功能 一.环境搭建 *安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ *安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org *安装脚手架 cnpm install -g @vue/cli *清空缓存处理 npm cache clean --force 二.项目创建 *创建项目 vue create 项目名 // 要…

一.什么是vue 二.如何在页面中使用vue 三.vue的挂载点 四.vue的基础指令 一.什么是vue 1.什么是vue vue.js十一个渐进式javascript框架 渐进式:vue从控制页面中的一个变量到页面中一块内容到整个页面,最终到整个项目都可以用vue框架来实现 2.vue可以做哪些事情 将数据渲染到指定区域(数据可以是后台获取,也可以死是前台自己产生) 可以与页面完成基于数据的交互方式 3.为什么学习vue 1.整合了Angu lar .React框架的有点(第一手API文档是中…

一.效果图 二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 <template> <div> <div id='streetMap'> <div class="tips" v-show="tipsShow" :style="tipsStyle"> <span v-html="tipsContent"…

非父子组件传值 vuex 一.非父子组件传值 基于父子组件通信与传值实现非父子组件传值的示例关键代码: <template> <div> <!-- 学员展示 --> <add-student @add="add"></add-student> <!--监听子组件自定义事件add,触发自身add事件--> <student-list :student-list="studentList"&g…