vue
开猿节流
代码改变人生——代码改变世界
展开
-
Vue入门到放弃25(vue路由--router)
什么是路由1.后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;2.前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;3.在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前...原创 2019-12-11 19:16:26 · 452 阅读 · 0 评论 -
Vue入门到放弃24(vue获取DOM元素和组件--ref和$refs的使用)
ref 有三种用法: 1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点$refs $refs是一个对象,持有已注册过ref的所有的子组件。普通方式 我们...原创 2019-12-11 17:11:53 · 457 阅读 · 0 评论 -
Vue入门到放弃23(vue案例--评论列表)
基础页面<body> <div id="app"> <ul class="list-group"> <!--循环取出列表数据--> <li class="list-group-item" v-for="(item ,i) in list" :key="item.id"...原创 2019-12-11 16:31:15 · 447 阅读 · 0 评论 -
Vue入门到放弃21(组件-切换案例)
一、通过v-if控制实现 首先我们通过前面介绍的v-if标签来实现下这种效果1.创建组件 创建我们需要的两个全局组件,并通过标签使用。<body> <div id="app"> <a href="" @click.prevent="flag=true">登录</a> <a ...原创 2019-12-10 17:08:44 · 278 阅读 · 0 评论 -
Vue入门到放弃20(Vue的data和methods属性)
1. 组件可以有自己的 data 数据2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!<body> <di...原创 2019-12-10 15:49:36 · 267 阅读 · 0 评论 -
Vue入门到放弃19(Vue组件)
定义Vue组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组件化和模块化的不同:+模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;+组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;全局组件定义的...原创 2019-12-10 11:59:09 · 272 阅读 · 0 评论 -
Vue入门到放弃18(Vue列表动画-添加删除)
https://cn.vuejs.org/v2/guide/transitions.html#列表过渡Vue动画案例使用transition-group标签<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name...原创 2019-12-10 10:58:07 · 203 阅读 · 0 评论 -
Vue入门到放弃17(Vue中的半场动画)
JavaScript 钩子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2019-12-09 18:03:37 · 156 阅读 · 0 评论 -
Vue入门到放弃16(Vue中的动画)
无动画:<body> <div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <!-- 需求: 点击按钮,让 h3 显示,再点击,让 h3 隐藏 --> <h3 v-if="flag">这是一个H3</h3&g...原创 2019-12-09 17:40:00 · 210 阅读 · 1 评论 -
Vue入门到放弃15(vue-resource 示例之 vue对数据库数据增删查)
数据列表接口查询: 地址 http://www.liulongbin.top:3005/api/getprodlist 作用描述 获取品牌数据json数据 请求方式 Get 传入api的参数 无 返回数据格...原创 2019-12-09 16:23:34 · 439 阅读 · 0 评论 -
Vue入门到放弃14(vue-resource 实现 get, post, jsonp请求)
除了 vue-resource 之外,还可以使用`axios`的第三方包实现实现数据的请求(`axios`不支持跨域请求)引入vue-resource<script src="js/vue.js"></script><script src="js/vue-resource.js"></script>基本语法引入vue-re...原创 2019-12-09 14:59:15 · 224 阅读 · 0 评论 -
Vue入门到放弃13(vue实例的生命周期)
vue实例的生命周期什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! 生命周期钩子:就是生命周期事件的别名而已; 生命周期钩子 = 生命周期函数 = 生命周期事件 主要的生命周期函数分类: 创建期间的生命周期函数: beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性 ...原创 2019-12-06 17:33:58 · 197 阅读 · 0 评论 -
Vue入门到放弃12(自定义指令)
Vue自定义指令语法: Vue.directive('focus', { bind: function (el) {}, inserted: function (el) {}, updated: function (el) { } })注意:Vue中所有的指令,在调用的时候,都以v-开头使用Vue.directiv...原创 2019-12-06 16:05:12 · 168 阅读 · 0 评论 -
Vue入门到放弃11(按键修饰符)
系统修饰键 系统本身给我们提供的有几个修饰键,我们先来使用下(https://cn.vuejs.org/v2/guide/events.html)。自定义修饰键 系统提供的修饰键,就那么几个,这时如果我们想要自定义的话第一种方式就是使用按键对应的值来处理(https://dpb-bobokaoya-sm.blog.csdn.net/article/details/9628...原创 2019-12-06 15:13:49 · 148 阅读 · 0 评论 -
Vue入门到放弃10(过滤器应用-时间格式字符串格式化)
过滤器应用-时间格式字符串格式化// 全局的过滤器, 进行时间的格式化 // 所谓的全局过滤器,就是所有的VM实例都共享的 Vue.filter('dateFormat', function (dateStr, pattern = "") { // 根据给定的时间字符串,得到特定的时间 var dt = new Date(dateStr)...原创 2019-12-06 11:38:56 · 207 阅读 · 0 评论 -
Vue入门到放弃09( Vue过滤器)
过滤器概念: Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示(" | ");分类:过滤器分为全局过滤器和局部过滤器(私有过滤器)1.全局过滤器 我们先通过案例来介绍下过滤器的使用,然后再看下何为全局过滤器过滤器...原创 2019-12-06 10:28:01 · 457 阅读 · 0 评论 -
Vue入门到放弃08(Vue小案例添加,删除,搜索)
1.添加 <script src="./lib/vue-2.4.0.js"></script> <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css"> <body> <div id="app"> <div class="panel panel...原创 2019-12-04 17:23:07 · 236 阅读 · 0 评论 -
Vue入门到放弃08(Vue条件判断 v-if,v-else-if,v-else)
v-if和v-else<body> <div id="app"> <h5>Modeng 是怎么样的一个人?</h5> <div v-if="isHandsome">非常帅</div> <div v-else>还是帅</div> <...原创 2019-12-04 15:37:37 · 173 阅读 · 0 评论 -
Vue入门到放弃07(Vue v-if和v-show差异)
<body> <div id="app"> <!-- <input type="button" value="toggle" @click="toggle"> --> <input type="button" value="toggle" @click="flag=!flag"> <!-- v...原创 2019-12-04 15:19:14 · 161 阅读 · 0 评论 -
Vue入门到放弃06(Vue v-for)
<body> <div id="app"> <!-- 原始操作 --> <p>{{list[0]}},{{list[1]}}、、、</p> <p v-for="item in list">{{item}}</p> <p v-for="(item, i)...原创 2019-12-04 14:37:01 · 132 阅读 · 0 评论 -
Vue入门到放弃05(Vue样式处理class、style)
在Vue中使用样式使用class样式 数组<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1> 数组中使用三元表达式<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1> 数组中嵌套对象<h1 :c...原创 2019-12-02 20:14:02 · 182 阅读 · 0 评论 -
Vue入门到放弃03(Vue事件修饰符详解)
事件修饰符: .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身(比如不是子...原创 2019-11-21 16:54:20 · 195 阅读 · 0 评论 -
Vue入门到放弃02(Vue跑马灯效果案例)
Vue跑马灯效果1.分析a.点击"加油"按钮绑定一个点击事件,使用v-on或者缩写:"@"b.在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后 调用 字符串的 substring 来进行字符串的截取操作,把 第一个字符截取出来,放到最后一个位置即可;c.为了实现点击下按钮,自动截取的功能,需要把 2 步骤中的代码,放到一个定时器中去;2.实现2.1 绑定...原创 2019-11-21 16:35:40 · 256 阅读 · 0 评论 -
Vue入门到放弃01(基础入门)(vue介绍与入门)详解
什么是Vue.jsVue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,...原创 2019-11-21 14:26:21 · 293 阅读 · 0 评论 -
vue环境配置(一)——安装(node.js)
一、安装node.js说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具。node.js的官方地址为:https://nodejs.org/en/download/,如下图所示:二:安装三:设置nodejs prefix(全局)和cache(缓存)路径1、在nodejs安装路径下,新建node_g...原创 2019-08-16 15:56:45 · 298 阅读 · 0 评论 -
vue文件说明(三)——文件内部内容说明
index.htmlindex.html可以理解为一个web页面容器,挂在main.js定义的根节点,内容有组件填充。App.vueApp.vue是根组件,有三部分组成,分别为模板,脚本,样式模板中定义了一个根节点(id为app)。<router-view>路由页面,可以理解为插槽,路由的页面都为加载此处。附加:<template>&...原创 2019-08-19 12:00:52 · 515 阅读 · 0 评论 -
vue项目结构(二)——项目结构说明
简单介绍目录结构build是一些webpack的文件,配置参数什么的,一般不用动config是vue项目的基本配置文件node_modules是项目中安装的依赖模块src 源码文件夹,基本上文件都应该放在这里。—assets 资源文件夹,里面放一些静态资源(图片)—components这里放的都是各个组件文件router路由配置—App.vue 组件—main.js入口文件stati...原创 2019-08-19 11:36:52 · 266 阅读 · 0 评论