vueJs
文章平均质量分 63
itKingOne
热爱生活,热爱运动,活出精彩,活出新高度
展开
-
Vue生命周期解析
Vue的生命周期包括: beforeCreate:实例刚刚创建,数据检测和事件初始化都未开始 created:数据检测和事件初始化完毕,还未开始编译模板 beforeMount:模板编译完成,有一个虚拟DOM节点 mounted:替换或者插入DOM,形成真实的DOM节点 beforeUpdate:数据改变,但视图还没更新 updated原创 2017-03-22 15:56:04 · 1082 阅读 · 0 评论 -
Vue-cli+webpack单页模式详解
由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会“太折腾”。一、文件结构本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容。├─build│ ├─build.原创 2017-07-11 10:03:11 · 871 阅读 · 0 评论 -
Vue2.x教程之filter过滤器的使用
vue2.0以后已经放弃对自带的过滤器函数,但同时对开发人员提供了一个filter 的处理器,虽然命名为 filter ,但是我觉得叫做数据处理器更体贴。用以在不改变的data 的情况下 输出前段需要的格式数据。基本调用方法:[html] view plain copyspan style="color: rgb(82, 8原创 2017-07-04 09:57:41 · 10969 阅读 · 0 评论 -
vue脱坑合集(六)——使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 前言: Vuex 的安装将不再赘述,可以参考之前的博客 Vue 爬转载 2018-06-07 14:32:46 · 1243 阅读 · 0 评论 -
Vue中使用set方法过程的一个小发现
vue教程中有这样一个注意事项:第一种具体情况如下: 运行结果:当利用索引改变数组某一项时,页面不会刷新。解决方法如下:运行结果:三种方式都可以解决,使用Vue.set、vm.$set()或者数组的splice方法。在做项目的过程中,有个发现,先上代码:第一个转载 2017-07-06 11:08:51 · 2748 阅读 · 0 评论 -
Vue-cli单文件组件引入less、sass、css样式的不同方法
vue-cli中已经内置配置好了sass 以及lass的配置。如果需要的话直接下载两个模块就可以了,webpack它会根据 lang 属性自动用适当的加载器去处理。如果需要使用sass,则安装:npm install node-sass --save-devnpm install sass-loader --save-dev如果需要使用less,则安装:npm ins原创 2017-07-07 16:11:43 · 10238 阅读 · 0 评论 -
如何使用webpack在vue项目中写jsx语法
本文主要给大家介绍的是关于利用jsx写vue组件,下面话不多说,来一起看看详细的介绍吧。我们平常写vue的组件时,一般都是用的是模版,这种方式看起来比较简洁,而且vue作者也推荐使用这个方式,但是这种方式也有一些它的弊端,例如模版调试麻烦,或者在一些场景下模版描述可能没那么简单和方便。下面我们要讲的是如何在vue里面写jsx,知道react的人应该都知道jsx,jsx的一个特性原创 2017-08-11 14:14:23 · 21241 阅读 · 3 评论 -
Vue 后台实战篇之Element UI
Element去年十月份开始用 vue 做管理后台的时候毫不犹豫的就选择了 Elemen,那时候 vue2 刚发没多久,市面上也没有很多其它的 vue2 的 ui 框架。虽然 Element 也有很多的不足,前期的 bug 也不少,但我还是选择了它,说一下我选择 Element 的原因吧:有大厂背书 : 虽然核心开发只有三个人,但至少不用担心哪天就不维护,带着小姨子跑路了。持续迭代原创 2017-09-20 12:33:56 · 9346 阅读 · 1 评论 -
Vue数据绑定详细原理剖析(非常详细)
相信大家对mvvm双向绑定应该都不陌生了,一言不合上代码,下面先看一个本文最终实现的效果吧,和vue一样的语法,如果还不了解双向绑定,猛戳Googlediv id="mvvm-app"> input type="text" v-model="word"> p>{{word}}p> button v-on:click="sayHi">change modelbutton>转载 2018-01-24 16:58:32 · 6597 阅读 · 0 评论 -
Axios 请求配置参数详解以及全局配置示例
基本应用:// 发送 POST 请求axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }});请求配置{ // `url` 是用于请求的服务器 URL url: '/user', // `me...原创 2018-07-17 17:20:29 · 16976 阅读 · 0 评论 -
Vue常见面试题整理
一、对于MVVM的理解?MVVM是Model-View-ViewModel的缩写。 Model:代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。 View:代表UI组件,它负责将数据模型转化成UI展现出来。 ViewModel:监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View和Model的对象,连接Model和View。 ...原创 2018-09-20 09:46:40 · 653 阅读 · 0 评论 -
Vue3.0变化更新解读(值得收藏)
(内容同步自小邹的头条号:沪漂程序员的生活史)9月30日,尤雨溪在medium个人博客上发布了vue3.0的开发思路,可以说3.0带来了很大的变化。当时小邹也只是瞄了一眼,没想到这么快vue3.0就出来了。最近 尤雨溪也是在 Vue Toronto上发布了最新的 Vue 3,并且讲解了一些主要的变化更新,下面让我们一起来看一看:vue3.0变化更新Vue 3.0 将会发生什么?...原创 2018-11-17 11:28:08 · 3638 阅读 · 0 评论 -
Vue项目如何接入Typescript
(内容同步自小邹的头条号:沪漂程序员的生活史)一、为什么要接入typescriptavascript由于自身的弱类型,使用起来非常灵活。这也就为大型项目、多人协作开发埋下了很多隐患。如果是自己的私有业务倒无所谓,主要是对外接口和公共方法,对接起来非常头疼。主要表现在几方面:参数类型没有校验,怎么传都有,有时会出现一些由于类型转换带来的未知问题。 接口文档不规范,每次都要通过读代码...原创 2018-11-30 14:15:23 · 2085 阅读 · 0 评论 -
vue脱坑合集(四)——与 Vuex 的第一次接触
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/6266038.html但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这个问题。 一、安装并引入 Vue转载 2018-06-07 14:30:39 · 449 阅读 · 0 评论 -
webpack插件html-webpack-plugin详解
插件地址:https://www.npmjs.com/package/html-webpack-plugin这个插件用来简化创建服务于 webpack bundle 的 HTML 文件,尤其是对于在文件名中包含了 hash 值,而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件,也可以使用 lodash 模板加载生成的 bundles,或者自己加载原创 2017-04-17 17:18:02 · 11436 阅读 · 0 评论 -
Vue2.0如何改变定界符
在Vue2.0之后移除了Vue.config.delimiters的全局配置,提供新的API,我们可以在独立构建的时候使用它来改变默认的{{}},具体代码如下:上线申请 ${ childrens.name } var vm = new Vue( { el: '#app', data: { child原创 2017-04-17 13:56:53 · 3774 阅读 · 0 评论 -
Vue.js中v-bind v-model的使用和区别
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据最基础的就是实现一个联动的效果 class="app"> Multiline message is: {{message}}原创 2017-04-17 14:12:07 · 15554 阅读 · 1 评论 -
webpack的使用以及脱坑集合
使用process.argv 获取命令行使用的参数// 判断是否带production参数,production会压缩jsvar isprod = false;for (var i in process.argv) { if (process.argv[i] === "-p" || process.argv[i] === "--production") { ispr原创 2017-04-21 16:32:21 · 1484 阅读 · 0 评论 -
webpack开发和生产两个环境的配置详解
目录webpack.base.conf.jswebpack.dev.conf.jswebpack.prod.conf.js一开始在接触webpack 的时候,简直痛不欲生,现在回头看,做个注释,当然参考了很多文章。这是一个关于vue 开发的webpack 架构会列举出来webpack 系列教程Webpack——令人困惑的地方Express结合Webpack的全栈自动刷新原创 2017-04-21 16:35:20 · 42560 阅读 · 4 评论 -
避免vue表达式在加载时的闪烁
在vuejs指令中有 v-cloak ,这个指令保持在元素上直到关联实力结束编译。和CSS规则如 [v-cloak]{display:none} 一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。用法如下:[v-cloak]{ display:none;}div v-cloak>{{message}}div>这样 不会显示,直到编译结束原创 2017-05-23 22:41:10 · 2212 阅读 · 0 评论 -
Vue1.0接口请求之vue-resource全攻略
Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。另外,vue-resou原创 2017-05-10 09:47:52 · 1705 阅读 · 0 评论 -
vue脱坑合集(二)——组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下都是子组件。 一、父组件向子组件传递数据在 Vue 中,可以使用 props 向子组件传递数据。 子组件部分:转载 2018-06-07 14:29:50 · 409 阅读 · 0 评论 -
vue脱坑合集(一)——使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安装 node.js首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。只是这样安装的 node 是固定版本的,如果需要多版本的转载 2018-06-07 14:29:24 · 513 阅读 · 0 评论 -
vue脱坑合集(三)——使用 vue-router 跳转页面
使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果: 项目结构:转载 2018-06-07 14:30:22 · 2572 阅读 · 1 评论 -
vue脱坑合集(五)——组件进阶
组件(Component)是 Vue.js 最强大的功能之一,之前的文章都只是用到了基本的封装功能,这次将介绍一些更强大的扩展。 一、基本用法在使用 vue-cli 创建的项目中,组件的创建非常方便,只需要新建一个 .vue 文件,然后在 中写好 HTML 代码,一个简单的组件就完成了 一个完整的组件,除了 以外,还有 和 需要注意的是, 中的转载 2018-06-07 14:32:29 · 622 阅读 · 0 评论 -
vue脱坑合集(七)——监听滚动事件 实现动态锚点
前几天做项目的时候,需要实现一个动态锚点的效果如果是传统项目,这个效果就非常简单。但是放到 Vue 中,就有两大难题:1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动?2. 如何监听页面滚动事件?在浏览了大量文章、进行多次尝试之后,终于解决了这些问题期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命转载 2018-06-07 14:33:03 · 1443 阅读 · 0 评论 -
学习 Vue 源码的必要知识储备(含面试知识点)
我最近在写 Vue 进阶的内容。在这个过程中,有些人问我看 Vue 源码需要有哪些准备吗?所以也就有了这篇计划之外的文章。当你想学习 Vue 源码的时候,需要有扎实的 JavaScript 基础,下面罗列的只是其中的一部分比较具有代表性的知识点。如果你还不具备 JavaScript 基础的话,建议不要急着看 Vue 源码,这样你会很容易放弃的。我会从以下 7 点来展开:Flow 基...原创 2019-05-30 11:16:47 · 1871 阅读 · 0 评论