![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
文章平均质量分 72
CURRY_zhao
风已住,用技能改变生活
展开
-
初次接触vue,我是怎么学习的
又到了review的时候,话不多说,这次放出,最初的学习笔记。Vue我将Vue看成了一门新得编程语言来学,基础的语法知识我认为就以下这些重点。一、数据绑定语法1、数据绑定最基础的形式是文本插值,使用 {{}} 语法(双大括号),三个大括号标签可以输出真的HTML字符串。双大括号标签也可以用在 HTML 特性 (Attributes) 内,。也可以实现单次插值绑定,{{ * msg }}。...原创 2019-11-05 09:33:41 · 484 阅读 · 0 评论 -
vue中v-for的使用,离不开的数组
先引入一个例子:HTML{{ parentMessage }} - {{ index }} - {{ item.message }}JSvar example2 = new Vue({el: '#example-2',data: {parentMessage: 'Parent',items: [{ message: 'Foo' },{ mes原创 2017-02-07 16:03:59 · 12147 阅读 · 0 评论 -
实现样式的覆盖以及scoped的作用域
先说样式的覆盖吧,在使用框架或者别的官方组件(像饿了吗)时,一些图标还有条形图的样式需要进行样式的覆盖。怎么做呢,下面就讲一个方法吧,要得到效果如下这里用到的是饿了吗的组件,实例如下: title="覆原创 2017-01-11 10:21:47 · 7225 阅读 · 0 评论 -
用vue实现点击按钮,滑出面板(二)完结版
在通信的时候容易出错,或者信息根本传不过来。那么这里就示例一下,怎么通过组件之间的通信完成点击事件。index.vue文件中: 点我传递中介引入组件,即是要弹出的组件import addForm from './docsForm'export default {components: {addForm},data() {原创 2017-01-10 16:57:14 · 8051 阅读 · 0 评论 -
Vue 表单验证插件的写作过程
前言前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue。这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js。 当然为什么不找个插件呢? vue-validator呀。我想了下,一个是表单验证是个高度定制化的东西,这种网上找到的插件为了兼顾各个公司的需求,所以加了很多功能,这些我们不需转载 2016-12-20 17:09:17 · 10810 阅读 · 1 评论 -
vue插件使用方法
开发插件插件通常会为Vue添加全局功能。插件的范围没有限制——一般有下面几种:添加全局方法或者属性,如: vue-element添加全局资源:指令/过滤器/过渡等,如 vue-touch通过全局 mixin方法添加一些组件选项,如: vuex添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。一个库,原创 2016-12-20 10:28:03 · 14000 阅读 · 2 评论 -
用vue实现点击按钮,滑出面板(一)
实现这样的效果,有好多种方法,你可以用CSS里面的动画效果实现。既然接触到了vue,不如就用vue的相关知识。在vue官方文档里,我们可以看到过渡效果这一方面的知识,概述如下:Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在原创 2017-01-06 18:32:44 · 11168 阅读 · 0 评论 -
使用elementui表格,项目感悟
一、使用表格第一步import ElementUI from 'element-ui'Vue.use(ElementUI)二、完成第一步,接下来直接引用组件标签了 :data="tableData" style="width: 100%"> prop="date" label="日期原创 2016-12-29 18:08:44 · 38544 阅读 · 7 评论 -
Vue2.0中,“渐进式框架”和“自底向上增量开发的设计”是什么知乎回答
作者:徐飞链接:https://www.zhihu.com/question/51907207/answer/136559185来源:知乎著作权归作者所有,转载请联系作者获得授权。在我看来,渐进式代表的含义是:主张最少。每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。转载 2016-12-22 17:10:00 · 9060 阅读 · 0 评论 -
vue中的event bus非父子组件通信
有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的Vue实例作为中央事件总线:有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的 Vue 实例作为中央事件总线:var bus = new Vue()// 触发组件 A 中的事件bus.$emit('id-selected', 1)原创 2016-12-21 18:04:08 · 13999 阅读 · 0 评论 -
微信小程序与vue的区别,知乎回答!!!
明显不是嘛,数据属性更新是这样的小程序:Page({ data: { items: [] }, onLoad: function(options) { this.setData({ items: [1,2,3] }) }})Vue:new Vue({ data: { items: []转载 2016-12-09 11:49:02 · 10146 阅读 · 0 评论 -
vue代码练习及效果图
{{ message }} Reverse Message Hello Kitty! Now you see me! {{ todo.text }} Vue.component('todo-item', {props: ['todo'], template原创 2017-02-07 17:51:25 · 1359 阅读 · 0 评论 -
vue实现货币过滤器
自定义事件也可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。所以要让组件的 v-model 生效,它必须:接受一个 value 属性在有新的 value 时触发 input 事件代码如下:HTML: {{ message }} Total: ${{ total }}J原创 2017-02-08 10:50:43 · 6829 阅读 · 0 评论 -
使用vue-cli3引入外部js报错的问题
最近做的一个移动端,需要使用mui框架,在引入的时候,按照平常的语法,发现总是报错,Uncaught SyntaxError: Unexpected token <解决办法,将引入的js文件夹,与index.html,放到同一级。...原创 2019-02-28 10:06:32 · 7259 阅读 · 6 评论 -
element-ui中table的render-header,iview中的render
在表格引用,:render-header=“renderHeaderFuc”js中方法书写:renderHeaderFuc(h, { column, $index}) { return h('span', {}, [ h('span', {}, '金额'), h('span', { style: {}, on: { click: () => { ...原创 2018-10-26 21:01:50 · 3185 阅读 · 0 评论 -
初次接触nuxt.js
Nuxt.js是一个基于vue.js的通用应用框架。通过对客户端/服务端基础架构的抽象组织,Nuxt.js主要关注的是应用的UI渲染。特性 基于Vue.js自动代码分层服务端渲染强大的路由功能,支持异步数据静态文件服务ES6/ES7语法支持打包和压缩JS和CSSHTML头部标签管理本地开发支持热加载集成ESLint支持各种样式预处理器:SASS,less,Stylus等等...原创 2018-03-26 18:09:14 · 2113 阅读 · 0 评论 -
vue源码阅读笔记(用到的函数)
用到的函数:typeof value === ‘string’typeof value === ‘number’typeof value === ‘boolean’typeof value === ‘object’Get the raw type string of a value e.g. [object Object] var _toString = Object.prot原创 2018-02-01 17:45:57 · 279 阅读 · 0 评论 -
单页应用的数据流方案探索
大家好,现在是2017年4月。过去的3年里,前端开发领域可谓风起云涌,革故鼎新。除了开发语言的语法增强和工具体系的提升之外,大部分人开始习惯几件事:组件化MDV(Model Driven View)所谓组件化,很容易理解,把视图按照功能,切分为若干基本单元,所得的东西就可以称为组件,而组件又可以一级一级组合而成复合组件,从而在整个应用的规模上,形成一棵倒置的组件树。这种方法转载 2017-04-24 09:12:15 · 1966 阅读 · 0 评论 -
使用vue的v-for与v-if遇到的一个问题
今天周四,在进行项目时,就发现一个问题,自己想要使用v-if有时常常得不到自己预期的效果。那么就苦苦钻研了一下。并且也从官网上看到,它们两个确实是存在优先级的。官网上的解释是这样说的,推荐的解决方法是加入,但是在自己写的项目中,v-for始终是在最外面,所以渲染的时候是没有效果的。正在考虑换个方法,实现功能。绑定不合理,需要拆组件啦!!!!原创 2017-04-20 16:13:24 · 14248 阅读 · 2 评论 -
Vue.js学习与理解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。Vue.js转载 2017-03-02 15:58:52 · 656 阅读 · 1 评论 -
Vue2.0的变化(1)
模板解析器不再依赖于DOM(除非你使用真正的DOM作为模板),因此只要你使用字符串模板,你将不再受到任何1.0版本中的解析限制。但是,如果你依赖在存在的内容中挂载一个元素作为模板(使用el元素),你将依然受到这些限制。高层级的变化模板解析器不再依赖于DOM(除非你使用真正的DOM作为模板),因此只要你使用字符串模板,你将不再受任何1.0版本中的解析限制。但是,如果你依赖在存在的内容中挂在一转载 2017-02-10 12:19:46 · 683 阅读 · 0 评论 -
vue项目,在进行点击的时候,如何屏蔽掉一些小的按钮,阻止冒泡
我们在进行表格的可点击时,前面往往带有复选框或者收藏按钮之类的,这时候就需要排除收藏按钮和复选框这些类。那么如何解决呢?采取的思路如下:1.给复选框定义一个类型,type="selection" 2.在点击函数中就可以使用判断条件来进行复选框的阻止冒泡。rowDetailShow(row, event, column) {if(column.type !== 'selection'原创 2017-01-19 17:51:39 · 13768 阅读 · 0 评论 -
组件与组件之间的通信以及vue2.0中的变化、示例
一、开始第一个DEMO,其中一个功能需求--组件与组件之间作用域里,但又需要传递数据。例如:App.vue为父组件,有子组件A.vue、B.vue1.App的数据传递给A、B2.A、B的数据传递给App3.A、B数据相互传递解决以上需求的思路如下:1.App通过props传递数据给A、B2.A、B通过$dispatch调用App的Event并传递数据给App转载 2016-12-07 18:53:29 · 16923 阅读 · 0 评论 -
vuex是做什么的
组件之间的作用域独立,而组件之间经常又需要传递数据。A为父组件,下面有子组件B和C。A的数据可以通过props传递给B和C。A可以通过$broafcast调用B和C的events,从而操作B和C的数据。B和C可以通过$dispatch调用A的events,从而操作A的数据当B需要操作C的数据就会比较麻烦,需要先$dispatch到A,再$broadcas转载 2016-11-25 10:03:37 · 2728 阅读 · 1 评论 -
vue1.0到vue2.0迁移助手
使用vue的版本更新了,里面有指令语法发生了变化,在1.0的喜欢上用2.0,有些容易出错,并且不容易察觉,那么迁移工具就显得特别有用,让你事半功倍,帮助你查找哪里不符合。步骤如下:1.安装 npm install --global vue-migration-helper 2.在文件所在路径下,在cmd中运行vue-migration-helper结果如图,方便快捷搜索版本错原创 2016-12-07 09:36:36 · 2891 阅读 · 0 评论 -
vue.js 计算属性$watch
计算属性在模板中绑定表达式是非常便利的,但是他们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么vue.js将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。基础例子a={{a}},b={{b}}var vm=new Vue({el:'#example',data:{a:转载 2016-10-31 19:29:34 · 3001 阅读 · 0 评论 -
关于vue的基础概念
vue-cli相当于脚手架 给你自动生成模板工程vue-router是 vue路由插件 支持你单页应用的vue-loader是webpack下loader插件 可以把.vue文件 输出成组件原创 2016-11-12 10:03:42 · 732 阅读 · 0 评论 -
vue-cli的使用与解释
1、node.js安装 https://nodejs.org/en/download/ .msi方便以后npm的使用 2、安装vue-cli npm install -g vue-cli3、使用vue-cli初始化项目 vue init webpackmy-project 4、进转载 2016-11-12 09:59:07 · 10764 阅读 · 0 评论 -
命令行生成vue的框架
-- 安装nodejs用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的,所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识:nodejs安装: http://blog.csdn.net/zzwwjjdj1/article/details/51980082npm 介绍: http://blog.csd转载 2016-11-11 15:41:57 · 1956 阅读 · 0 评论 -
Vue.js vue-resoucre的使用与解析 全攻略
本文的主要内容如下:介绍vue-resource的特点介绍vue-resource的基本使用方法基于this.$http的增删查改示例基于this.$resource的增删查改示例基于inteceptor实现请求等待时的loading画面基于inteceptor实现请求错误时的提示画面本文11个示例的源码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星转载 2016-10-28 11:29:25 · 33434 阅读 · 8 评论 -
Vue.js结合vue-router和webpack编写单页路由项目
一、前提1. 安装了node.js。2. 安装了npm。3. 检查是否安装成功:打开cmd,输入node,没有报“node不是内部或外部命令”表示安装成功node.js。打开cmd,输入npm,没有报“npm不是内部或外部命令”表示安装成功node.js。4. node.js下载地址:http://pan.baidu.com/s/1eRW4hiU。用转载 2016-11-07 16:44:23 · 3136 阅读 · 2 评论 -
vue.js中使用slot
什么是组件?组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。Slot分发内容①概述:简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是转载 2016-10-25 12:05:04 · 11812 阅读 · 0 评论 -
v-show与v-if
1.共同点都是动态显示DOM元素2.区别(1)手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;(2)编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;(3)编译条件:v-if是惰性的,如果初始条件转载 2016-10-24 19:03:03 · 1204 阅读 · 0 评论 -
计算属性,样式和类绑定
先上总结:(十九)标签和API总结(2)vm指new Vue获取的实例 ①当dom标签里的值和data里的值绑定后,更改data对应的值可以实时更新标签里的值; 但后续添加的值是无效的(绑定失败)。 ②将可以将对象直接作为data的一个属性,是有效的(因为对象按值传递);所以该属性和该对象是全等的;转载 2016-11-03 15:47:58 · 1397 阅读 · 0 评论 -
vue.js使用props传递数据
#使用props传递数据html:传递普通的字符串h3>#使用props传递数据h3>div id="dr01"> div>组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。div> br /> child msg="hello, vue.js!">child>div>转载 2016-11-03 10:55:52 · 19544 阅读 · 0 评论 -
如何阅读Vuejs源码、学习笔记
程序结构梳理Vue.js 是一个非常典型的 MVVM 的程序结构,整个程序从最上层大概分为全局设计:包括全局接口、默认选项等vm 实例设计:包括接口设计 (vm 原型)、实例初始化过程设计 (vm 构造函数)这里面大部分内容可以直接跟 Vue.js 的官方 API 参考文档对应起来,但文档里面没有且值得一提的是构造函数的设计,下面是我摘出的构造函数最核心的工作内转载 2016-11-17 11:13:43 · 4231 阅读 · 0 评论 -
Vue.js和MVVM的小细节
MVVM是Model-View-ViewModel的缩写,它是一种基于前端开发的架构模式,其核心是提供对View和ViewModel的双向数据绑定,这使得ViewModel的状态改变可以自动传递给View,即所谓的数据双向绑定。Vue.js是一个提供了MVVM风格的双向数据绑定的JavaScript库,专注于View层。它的核心是MVVM中的VM,也就是ViewModel。ViewModel负转载 2016-11-30 09:24:57 · 3882 阅读 · 0 评论 -
Vue中你不知道但却很实用的黑科技
作者:Aresn链接:https://zhuanlan.zhihu.com/p/24173419来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。最近数月一直投身于 iView 的开源工作中,完成了大大小小 30 多个 UI 组件,在 Vue 组件化开发中积累了不少经验。其中也有很多带有技巧性和黑科技的组件,这些特性有的是 Vue 文档中提到转载 2016-12-06 10:27:21 · 18669 阅读 · 0 评论 -
mapGetters工具函数
来自https://vuefe.cn/vuex/getters.html#mapGetters-工具函数mapGetters工具函数会将store中的getter映射到局部计算属性中。import {mapGetters} from ‘vuex’export default{computed:{...mapGetters([//使用对象扩展操作符把getter混入到comp转载 2016-11-23 16:05:55 · 20709 阅读 · 0 评论 -
JS编码风格受到ES6的限制
在进行调试的时候,我们的浏览器会出现这样的错误:Failed to load resource:the server responded with a status of 404(Not Found)终端的提示错误则为:ERROR in ./src/router.js ✘ http://eslint.org/docs/rules/semi Extra semicolon F:\原创 2016-11-23 10:57:58 · 7670 阅读 · 0 评论