Vue学习系列
关注
分享
扫一扫
开启你我的学习之旅
躬匠
这个作者很懒，什么都没留下…
展开
-
Vue学习系列 -- 常见的UI框架
在此总结一下常见的与Vue相关的UI框架，具体分为移动端和PC端两大类。这里只是做了一个罗列，并未展开介绍，详细内容请访问对应链接查看官方文档。移动端Vux：https://vux.li/#/ Mint-UI：http://mint-ui.github.io/#!/zh-cn Vonic：https://wangdahoo.github.io/vonic-documents/...原创 2019-06-14 11:01:51 · 3950 阅读 · 4 评论 -
Vue学习系列 -- vue-router 快速入门
网上看到一篇介绍vue-router的文章，还不错，特转载自此，原文链接。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。本...转载 2019-06-01 16:02:07 · 350 阅读 · 0 评论 -
Vue学习系列 -- package-lock.json的作用
转载自：https://www.cnblogs.com/cangqinglang/p/8336754.html其实用一句话来概括很简单，就是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。引用知乎@周载南的回答根据官方文档，这个package-lock.json 是在 `npm install`时候生成一份文件，用以记录当前状...转载 2019-05-30 14:34:27 · 2898 阅读 · 0 评论 -
单页面应用学习
最近一直在进行Vue的学习，发现最终生成的页面只有一个html，之后就是css、js、img了。与以往的应用很不同，仔细研究之后才发现这就是所谓的单页应用，于是有了这篇文章。今天我们就来一起了解一下SPA的相关概念、与传统Web应用的区别以及SPA的优缺点。一、什么是SPA单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用：...原创 2019-05-29 23:27:49 · 535 阅读 · 0 评论 -
Vue学习系列 -- 自定义指令
前面的章节我们先后学习了v-on、v-bind、v-model、v-link等内置指令，今天我们就来学习一下如何创建自定义指令。自定义指令也是先注册后使用，其注册和组件的注册很类似，也分为全局注册和局部注册。只是注册组件时是使用的component关键字，而注册指令时要使用directive关键字。全局注册Vue.directive('focus', { //指令内容...原创 2019-05-29 22:55:52 · 1660 阅读 · 0 评论 -
Vue学习系列 -- slot槽指派
我们在前面组件的学习章节中，只介绍到了父子组件之间的数据传递，其中对应子组件，只是简单的定义了一个标签。既然子组件可以作为一个标签，那标签里面如果填充了html元素会怎么样呢？比如下面的形式： <component-demo> <h1>{{title}}</h1> <div>{{co...原创 2019-05-29 19:29:55 · 1473 阅读 · 0 评论 -
Vue学习系列 -- 环境搭建踩坑总结
今天在线下搭建开发环境时遇到了不少问题，废话少说，直接上截图并给出具体的解决方案。按照build.sh的指示，只需依次执行以下命令即可：#根据package.json文件里配置的依赖项，下载相应文件npm install#重新编译node-sassnpm rebuild node-sass#执行devnpm run dev注：开发环境下前期已经安装了node。一、未...原创 2019-05-29 18:42:10 · 761 阅读 · 0 评论 -
Vue学习系列 -- 组件通信
通过上一章节的学习，我们已经知道父子组件之间可通过props进行通信，但在2.x之后的版本，props就变为单向的了：只能由父组件向子组件传值；但在实际的工作中，存在子组件向父组件传值的业务场景；所以，今天我们就来详细学习一下父子组件之间如何进行双向传值。一、父组件向子组件传值上面我们已经提到了子组件可以通过props接受父组件的传值，废话少说，实践一把。子组件通过props里的mes...原创 2019-05-28 22:10:02 · 626 阅读 · 0 评论 -
Vue学习系列 -- 组件注册
组件的使用就是为了提高代码的可复用。组件与Vue实例类似，都要在注册之后才可以使用。注册又分为全局注册和局部注册两种方式，今天我们就先来简单学习一下。全局注册注册之后的组件全局任何地方都可以使用，具体使用如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <tit...原创 2019-05-27 23:57:52 · 866 阅读 · 0 评论 -
Vue学习系列 -- v-model指令与表单元素学习
这一节我们主要要学习的就是v-model指令，v-model用于表单类元素上双向绑定数据。常见的表单元素就是input textarea 单选按钮 双选按钮 下拉列表等。这里，我做了一个简单的注册表单信息提交demo，并将用户提交的信息实时打印出来，废话少说，直接上代码。下面的demo并未使用UI组件库，所以界面看起来可能有点丑陋，不过已经能说明问题了。<!DOCTYPE ht...原创 2019-05-26 22:39:25 · 1849 阅读 · 1 评论 -
Vue学习系列 -- 计算属性
不知道在上一节指令章节的学习中，大家有没有注意到一个细节：Vue.js模板内的表达式只能进行简单的计算，当其过长或者逻辑复杂时会变得难以维护，遇到这个问题如何处理呢？答案是计算属性。在计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，最终只要返回一个结果即可。使用计算属性有以下两点好处：计算属性相当于对数据操作的封装，用户只需要知道如何使用就可以了，无需关注逻辑细节； 解耦...原创 2019-05-26 17:53:04 · 371 阅读 · 0 评论 -
Vue学习系列 -- 常见事件/指令学习
指令是Vue中最常用的一项功能，它带有v-前缀。指令的主要职责就是当表达式的值发生改变时，相应的将某些行为应用到DOM上。注意：数据驱动DOM是Vue的核心理念，我们无需主动操作DOM，只需要维护好数据，DOM的事vue会自动帮我们处理。常见的指令有v-on、v-bind、v-model、v-html、v-for，下面我们结合具体的代码来一块学习一下。v-on：用于绑定原生的动作，如c...原创 2019-05-26 16:04:35 · 285 阅读 · 0 评论 -
Vue学习系列 -- vue生命周期了解
每个Vue实例在创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子。我们可以利用这些钩子，在适当的时候进行我们的业务逻辑处理。在JQueryz中，有一个很明显的前置钩子：ready()方法。$(document).ready(function() { // })同样，在Vue里也有各种生命周期钩子，常见的有以下三个：created：vue实例创建完成之后会...原创 2019-05-26 14:24:51 · 1864 阅读 · 0 评论 -
Vue学习系列 -- 基础知识了解
不想做全栈的工程师不是好的工程师。最近在自学Vue，同时准备在博客上将自己的学习心得、期间遇到的问题给同步记录下来，做成一个学习系列。这个系列会杜绝说教、偏理论，更多的是通过理论加简单的例子加深理解。OK，废话不多说，开始我们今天的学习。首先，在学习Vue之前，你需要对MVVM设计模式有所了解。如果你还不够了解MVVM，可以先阅读这篇文章：MVVM关于Vue，我们还有以下几点需要了...原创 2019-05-26 11:39:55 · 1915 阅读 · 0 评论 -
Vue学习系列 -- Top 30 开源项目
背景：之前负责的一个内部平台需要进行升级改造，而FE人力紧张，无人力投入，且前端是用的Vue写的。项目简单，排期较长，由后端RD统一进行开发。本人一直从事的是后端工作，对于前端工作了解的很少，对于Vue更是知之甚微，决定先进行Vue基础知识的了解，然后结合开源项目加深对Vue的了解。下面是从其他地方看到的一些比较好的Vue开源项目，共同学习、了解一个。在过去的一年中，我比较了近30...转载 2018-11-19 09:58:30 · 767 阅读 · 0 评论