10 2018 档案
第一个react
摘要:个人觉着react和vue是很相似的,之前还转载过一篇介绍两个异同点的文章,那个时候还完全不懂react,现在才慢慢开始接触,所以只能总结一些个人的心得,首先自然是react的优点了,个人觉着主要有以下几点吧。 React 可以开发单页面应用 spa(单页面应用) react 组件化模块化 开发模式 阅读全文
posted @ 2018-10-27 23:50 紅葉 阅读(399) 评论(0) 推荐(0) 编辑
vuex状态管理2
摘要:在vuex的官网https://vuex.vuejs.org中,提到的核心概念一共有5个,分别是State、Getter、Mutation、Action和Module,在上一篇随笔中,我们主要用到其中的State和Mutation,接下来,我们来分析剩下几个使用方法,在这里,是在上一篇的基础上面完成 阅读全文
posted @ 2018-10-27 15:07 紅葉 阅读(341) 评论(0) 推荐(0) 编辑
vue配合UI组件
摘要:1,bootstrap 创建项目 首先使用脚手架搭出项目基本框架,具体方法可以参考前面的文章。 1,执行命令创建项目:vue init webpack-simple vue-bootstrap 2,下载相关依赖:npm vue-bootstrap 3,启动项目:npm run dev 出现这个界面就 阅读全文
posted @ 2018-10-27 15:07 紅葉 阅读(5139) 评论(5) 推荐(0) 编辑
vuex
摘要:在之前的学习中,都是通过父子组件进行传参的,当多个组件依赖于同一状态时,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。此时我们就需要用到vuex了。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,解决了组件之 阅读全文
posted @ 2018-10-27 12:14 紅葉 阅读(357) 评论(0) 推荐(0) 编辑
vue-router配合vue-cli的实例
摘要:前面在说到vue-router的时候,都是用最简单的方式说明用法的,但是在实际项目中可能会有所出入,所以,今天就结合vue脚手架来展示项目中的vue-router的用法。 创建项目 首先需要使用脚手架创建一个项目,这里选择的是webpack-simple这个模板。 1,执行命令:vue init w 阅读全文
posted @ 2018-10-23 22:02 紅葉 阅读(11738) 评论(0) 推荐(0) 编辑
vue-router2.0
摘要:在使用vue.js创建单页运用的时候,我们通常的做法是配合vue-router一起使用,通过vue-router将组建映射到路由并进行渲染。 例如我们要实现两个页面的切换跳转,就需要使用路由,这里不再使用a标签进行跳转,而是使用标签<router-link>,然后通过属性to来指定链接,最后将路由匹 阅读全文
posted @ 2018-10-23 20:17 紅葉 阅读(468) 评论(1) 推荐(0) 编辑
父子组件2.0
摘要:在前面总结过vue1.0中的组件通信,现在根据vue2.0的变化比较一下两者的不同之处。 首先还是用一个例子回顾一下之前的父子组件通信。 vue1.0 在上面的例子中,子组件是可以更改父组件的数据的,甚至可以通过添加sync实现同步修改,但是当我们把上面的js改为vue2.0的时候,会发现程序直接报 阅读全文
posted @ 2018-10-20 23:33 紅葉 阅读(242) 评论(0) 推荐(0) 编辑
vue2.0变化
摘要:之前有很多的vue知识总结都是围绕1.0版本实现的,下面主要总结一下2.0相对于1.0的一些变化。 组件定义 在vue1.0中,我们有使用vue.extend()来创建组件构造器继而创建组件实例,如下所示。 但是在vue2.0中,推出了一种更简洁的组件定义方法。 代码片段 在vue1.0中,我们可以 阅读全文
posted @ 2018-10-20 22:01 紅葉 阅读(221) 评论(0) 推荐(0) 编辑
vue-cli
摘要:vue-cli是vue.js官方提供的一个命令行工具,可用于快速搭建大型单页应用。该工具是一套成熟的vue项目架构设计,会跟着vue版本的迭代而更新,能够为用户带来现代化的前端开发流程,只需要几分钟就可以创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。 安装 要想使用vue 阅读全文
posted @ 2018-10-20 11:26 紅葉 阅读(232) 评论(1) 推荐(0) 编辑
vue-loader
摘要:本篇文章将从无到有的通过一个demo来展示vue-loader的基本用法,会涉及到部分webpack,npm等知识。 首先介绍一下最基本的文件结构,因为正式项目中的文件资源都比较多,本项目只是最基本的演示项目,所以会有所偏差。 其中,main.js是项目的入口文件,package.json是工程文件 阅读全文
posted @ 2018-10-18 20:56 紅葉 阅读(9808) 评论(0) 推荐(0) 编辑
slot内容分发
摘要:vue实现了一套内容分发的API,这套API基于当前的web components规范草案,将<slot>元素作为承载分发内容的出口。 在前面的父子组件中,我们提到过,在vue中,组件实例的作用域是孤立的,默认情况下,父子组件的数据是不能共享的。所以子组件的内容应当写在子组件里面,父组件的内容应该写 阅读全文
posted @ 2018-10-17 22:15 紅葉 阅读(257) 评论(0) 推荐(0) 编辑
单向数据流
摘要:在上一篇的父子组件中,我们知道,当我们使用动态props将父组件的数据传递到子组件的时候,如果父组件的数据变化,子组件的数据会随之变化。 父组件数据变化时,子组件数据会相应变化;而子组件数据变化时,父组件数据不变 我们知道,子组件的值是通过emit主动发送到父组件的,需要事件驱动,如果子组件的数据发 阅读全文
posted @ 2018-10-16 21:59 紅葉 阅读(375) 评论(0) 推荐(0) 编辑
vue父子组件(1.0)
摘要:1、父子组件 在上一篇随笔中展示了vue的组件,当我们继续在组件中写组件,形成组件嵌套的时候,就是我们所说的父子组件了。 在上面的例子中,外层的组件aaa就是父组件,内层的bbb组件便是子组件了。 2、子组件获取父组件的数据 我们知道,每个组件都可以有自己的data属性,组件的数据在整个组件的内部都 阅读全文
posted @ 2018-10-16 21:05 紅葉 阅读(822) 评论(0) 推荐(0) 编辑
vue组件
摘要:在vue中,组件是最重要的组合部分,官方中定义组件为可复用的vue实例,分为全局组件和局部组件,接下来通过实例来分别演示两种不同的组件。 全局组件 通过上面的例子,我们可以总结出全局组件的使用步骤: 调用vue.extend()创建一个组件构造器,该构造器中有一个选项对象的template属性可以用 阅读全文
posted @ 2018-10-15 22:24 紅葉 阅读(236) 评论(0) 推荐(0) 编辑
vue过渡
摘要:vue在插入、更新或者移除DOM时,提供了多种不同方式的应用过渡效果,下面主要总结一些常用的过渡。 单元素过渡(vue1.0) 我们常用的动画是css3的动画,在vue中依旧有效。 在上面的例子中,我们实现了一个进入和离开的动画效果,我们需要做如下几步: 在需要使用动画的元素中添加名称,即上面的di 阅读全文
posted @ 2018-10-14 21:33 紅葉 阅读(398) 评论(0) 推荐(0) 编辑
vue之自定义组件
摘要:除了核心功能默认内置的指令外,vue也允许用户注册自定义指令。虽然在vue2.0中,代码复用和抽象的主要形式是组件,但是有些情况下,我们仍需要对普通DOM元素进行底层操作,这个时候就需要用到自定义指令,例如,我们希望将元素的背景色变为红色,就可以通过指令实现。 上面简单的实例中,主要是展示了自定义组 阅读全文
posted @ 2018-10-14 14:36 紅葉 阅读(3828) 评论(0) 推荐(0) 编辑
jquery下拉菜单
摘要:下拉菜单或者导航是我们在网站开发中不可或缺的网站元素之一,使用jQuery可以制作出简洁易用、美观大方的下拉菜单或者导航效果。 下面展示的12款利用jQuery实现的下拉菜单即导航效果整理自前端大牛爱好公众号的美文推送,用于分享和收藏。 1,全屏大幅下拉菜单导航 2,电商网站分类导航菜单特效 3,黑 阅读全文
posted @ 2018-10-13 19:04 紅葉 阅读(2793) 评论(0) 推荐(0) 编辑
vue之过滤器
摘要:在vue2.0以前的版本中vue内置的过滤器,但是因为缺乏纯JavaScript的灵活性,现在vue2.0版本中已经删除了内置过滤器,所以需要自己注册过滤器,我们可以定义本地(在某一个template里面定义filter)过滤器,或者定义全局(global)过滤器。需要提醒的是,如果你定义了一个全局 阅读全文
posted @ 2018-10-13 18:01 紅葉 阅读(988) 评论(0) 推荐(1) 编辑
computer、methods和watch
摘要:在vue中处理复杂的逻辑的时候,我们经常使用计算属性computer,但是很多时候,我们会把计算属性、方法和侦听器搞混淆,在 w3cplus.com的一篇文章中是这样总结这三者的。 methods:正如他的名字一样,它们是挂载在对象上的函数,通常是Vue实例本身或Vue组件。 computed:属性 阅读全文
posted @ 2018-10-13 17:03 紅葉 阅读(4271) 评论(0) 推荐(0) 编辑
vue之文本渲染
摘要:Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。 在前面,我们一直使用的是{{}}的形式渲染文本,但是除此方法之外,vue还提供了其他几种常见的文本渲染方式: v-text:更 阅读全文
posted @ 2018-10-13 11:42 紅葉 阅读(2647) 评论(0) 推荐(0) 编辑
数组去重
摘要:在JavaScript中,数组常常被用到,自然数组去重在项目中就会经常碰到了,本文总结了一些常见的数组去重方法。 ES6 Set去重 这种方法不会改变原数组,但是不能去掉重复的“{}” ES5中的splice 这种方法利用双层循环,外层循环元素,内层循环时比较值。值相同时,则删去这个值。在对数组进行 阅读全文
posted @ 2018-10-13 10:56 紅葉 阅读(196) 评论(0) 推荐(0) 编辑
vue之v-on
摘要:我们可以用 v-on 指令绑定一个事件监听器,通过它调用我们 Vue 实例中定义的方法: say(message){ this.test = message; alert(this.test); }, say(message){ this.test = message; alert(this.tes 阅读全文
posted @ 2018-10-11 21:22 紅葉 阅读(681) 评论(0) 推荐(0) 编辑
垂直居中下
摘要:grid + template 利用CSS Grid的template功能,仅需要把模板设置成三列,就能搞定垂直居中。适用于未知高度的多行文字的垂直居中。 Grid + align-items 在Flex中align-items是针对次轴cross axis作对齐。而在CSS Grid中则是针对Y轴 阅读全文
posted @ 2018-10-11 11:30 紅葉 阅读(251) 评论(0) 推荐(0) 编辑
垂直居中上
摘要:line-height 该方法适用于单行文字垂直居中 line-height + inline-block 将多个元素或多行元素当成一个行元素来看待,需要将这些数据多包一层,并将其设定为inline-block,并在该inline-block对象的外层对象使用inline-block来代替heigh 阅读全文
posted @ 2018-10-10 21:40 紅葉 阅读(224) 评论(0) 推荐(0) 编辑
vue之v-for
摘要:vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同。 对象遍历 value 是遍历得到的属性值,ke 阅读全文
posted @ 2018-10-10 20:24 紅葉 阅读(324) 评论(0) 推荐(0) 编辑
vue之v-if和v-show
摘要:v-if v-if主要用来进行条件渲染。 v-if的简单用法如上面所示,当值为true时进行渲染,当值为false时,页面中不会进行渲染。 v-else和v-else-if 我们可以使用 v-else 指令来表示 v-if 的“else 块”,v-else 元素必须紧跟在 v-if 或者 v-els 阅读全文
posted @ 2018-10-09 21:16 紅葉 阅读(750) 评论(0) 推荐(0) 编辑
vue之v-model
摘要:上一篇文章总结了v-bind的用法,我们发现v-bind实现了数据的单向绑定,将vue实例中的数据同元素属性值进行绑定,今天我们将总结vue中的数据双向绑定v-model。 v-model实现双向绑定主要是通过v-bind绑定一个value属性 ,然后再使用v-on指令给当前元素绑定input事件, 阅读全文
posted @ 2018-10-07 17:14 紅葉 阅读(5621) 评论(0) 推荐(0) 编辑
vue之v-bind
摘要:接触Vue已经有很长一段时间了,后来因为工作的原因,已经有差不多一年的时间没有碰过它了,害怕时间久,自己就完全忘记了,所以还是想抽出一点时间将以前的知识整理一下。 刚接触vue的时候,觉着最神奇的地方莫过于vue的数据绑定了,今天要总结的就是vue中常用的属性绑定v-bind。 上面展示的是v-bi 阅读全文
posted @ 2018-10-07 13:21 紅葉 阅读(10562) 评论(0) 推荐(0) 编辑


点击右上角即可分享
微信分享提示