VUE
stalin_
程序员界的小学生
展开
-
VUE学习10--VUE如何请求数据(一)--Vue-Resource的使用(包含前后端使用demo)
VUE请求数据的常用方式有三种:vue-resourceaxiosfetch-jsonp今天我们先来说一下vue-resource一、优势及特点:1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。2. 支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。3. 支持Promise API和URI Templat原创 2020-09-08 17:39:16 · 864 阅读 · 0 评论 -
VUE学习09--VUE生命周期函数/钩子的介绍和使用
VUE中的生命周期函数/生命周期钩子指的是在组件挂载,组件更新,组件销毁的时候触发的一系列的方法。常见的钩子函数如下:beforeCreate 实例创建前执行created 实例创建后执行beforeMount 模板编译前执行mounted 模板编译后执行(请求数据,操作dom , 放在这个里面 mounted)beforeUpdate 数据更新前执行updated 数据更新后执行beforeDestroy 实例销毁前执行(页面销毁的时候要保存一些数据,就可以监听这个销毁的.原创 2020-08-21 17:51:55 · 196 阅读 · 0 评论 -
VUE学习08--VUE使用组件来复用页面内容
组件化是VUE的一大特性,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。 简单来说,有了组件化设计,我们可以实现部分页面的复用,比如我们定义一个header.vue,然后多个页面中都可以引用这个header.vue,这样使代码量更少,更简洁。当然对程序员自身的设计能力也有了更高的要求。 下面来说说组件应该如何定义和使用。 1.首先我们需要把组件页面开发完成。 2.在需要引入组件的页面...原创 2020-07-24 17:18:33 · 2089 阅读 · 0 评论 -
VUE学习07--VUE使用localStorage和mounted实现toDoList(待办事项新增,切换,删除)
上一篇文章我们讲了如何实现一个简单的toDoList,可以新增,删除,修改状态的待办事项。但是它还不够完善,比如我们输入了几个项目进去,如果页面刷新或者重新进入,刚才添加或者删除的项目就没有了,为了能够实现永久保存,我们可以利用Html5的一个缓存机制localStorage加上vue的mounted来实现。一、localStorage用法:1.存储/更新数据localStorage.setItem('key',value)2.获取数据localStorage.getI...原创 2020-07-09 19:01:45 · 730 阅读 · 0 评论 -
VUE学习06--VUE实现简易toDoList(待办事项新增,切换,删除)
结合前面学习过的一些知识点,今天我们来做一个toDoList的小Demo,具体的需求就是在vue页面上实现一个可以新增,删除,修改状态的待办事项。效果图如下:当然.....我们不做这么复杂的样式,只是实现一个这样的功能。下面我们来贴一下代码,详细注释在代码中都有哦~~<template> <div id="app"> <input type="text" v-model="todo" @keydown=doAdd($event)>...原创 2020-07-09 14:38:04 · 2274 阅读 · 0 评论 -
VUE项目启动报错--Error: EPERM: operation not permitted, unlink
今天在打开之前的一个VUE的小Demo想运行一下时,发现执行npm install 命令安装组件和依赖时失败了。查看了一下生成的debug日志。看到最下方有几行报错信息如下。15555 error code EPERM15556 error syscall unlink15557 error path F:\vue\vuedemo06\node_modules\.staging\html-entities-f752483c\LICENSE15558 error errno -404815559原创 2020-07-07 20:09:15 · 4229 阅读 · 0 评论 -
VUE学习05--VUE流程控制语句( if / else if / v-show 条件判断 , for 循环 , for + if 使用)
对于每一门语言,流程控制语句都十分的重要,有了它们我们才能实现更加复杂的需求,实现更加强大的功能。在VUE中对应也有一些特有的标签。下面我们来了解一下~一、条件判断标签:v-if --对应ifv-else --对应elsev-else-if --对应else ifv-show --...原创 2020-06-17 19:46:39 · 1625 阅读 · 0 评论 -
VUE学习04--VUE字符串过滤器的使用
由于后端对字符串的处理特别多,在学习前端时又发现了VUE有一个过滤器的功能,我们可以通过自定义过滤器来对字符串进行处理。下面我们来学习一下字符串过滤器的使用。首先我们来说一下用法:正常显示一个数据我们会这样 {{message}}在使用过滤器就像linux中命令的管道符一样,用 | 进行过滤。{{message | filters1 | filters2 | .....}}然后filters定义在<scripts>标签内,与data,method等内容平级。下面请看代码示例。.原创 2020-06-12 10:48:28 · 2422 阅读 · 0 评论 -
VUE学习03--VUE数据绑定(绑定数据,绑定属性,绑定样式,双向数据绑定)
今天我们一起来学一学 VUE的绑定。一、数据绑定首先可以先把数据定义在Vue页面中的<script>标签内,然后在<template>标签中通过{{变量名去取}}。另一种方法:<div v-text="变量名"></div>如果变量是对象,可以{{对象.属性}}去取。如果变量是集合,可以通过 v-for 遍历去取。请看下面实例(我们在新建项目中的App.vue):<template> <div id="app原创 2020-06-12 09:58:40 · 751 阅读 · 0 评论 -
VUE学习02--VUE项目各级目录及文件作用介绍
我们创建完成vue项目,会发现有很多目录及文件,我给大家简单介绍一下各个目录的作用。build -- 主要是一些webpack 项目打包的配置文件config -- 项目运行时的一些配置,如项目端口号等。node_module -- 项目依赖, 由命令npm install生成index.html -- 入口文件package.json -- 项目的配置文件 创建项目填写的一些选项都写到这里了。 webpack.config.js -- webpack的配置文件,webpack打包的工具.原创 2020-06-09 17:16:19 · 968 阅读 · 0 评论 -
VUE学习01--如何使用VSCode搭建一个可以运行的VUE项目
初学前端,将自己学习路上的一点经验总结一下,供大家参考,欢迎大家多提建议~共同进步~首先大概介绍一下VUE框架。VUE是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。由于VUE框架具有简单、灵活、高效的特点,目前在国内的中小企业中使用广泛。下面我们来说一下如何使用VSC原创 2020-06-01 19:12:14 · 1285 阅读 · 0 评论