vue学习笔记
记录vue学习的点滴。(此内容全为根据B站博主“黎曼的猜想”,感谢博主的精彩讲解)。
此为公开课的连接:https://www.bilibili.com/video/av50680998?p=1
ai生活的码农
爱单车的人儿却在掉头发的路上越走越远。
展开
-
vue学习十六---component组件的三种创建方式
component组件以下写了三种组件创建方式,个人推荐使用第三种,同时配了三个对应的demo1. 使用 Vue.extend 配合 Vue.component 方法:var login = Vue.extend({ template: '<h1>登录</h1>' }); Vue.component('login', login);2....原创 2019-11-30 18:44:03 · 892 阅读 · 0 评论 -
vue学习十六 --- vue-resource三种请求方式
<body> <div id="app"> <input type="button" value="get请求" @click="getInfo"> <input type="button" value="post请求" @click="postInfo"> <input type="bu...原创 2019-11-22 11:06:10 · 175 阅读 · 0 评论 -
vue学习十五---生命周期函数
var vm=new Vue({ el:'#app', data:{ msg:'ok' }, methods:{ show(){ console.log('执行了show方法 '); ...原创 2019-11-21 21:01:05 · 106 阅读 · 0 评论 -
vue学习十四 ----自定义全局指令,文本框获得焦点
一 、DOM实现<input type="text" class="form-control" v-model='keywords' id="search" >// 获得焦点 document.getElementById('search').focus()二 、自定义焦点使用vue.directive()定义全局的自定义指令注意:参数一:指令的名称 在定义的时候,...原创 2019-11-21 20:26:49 · 323 阅读 · 0 评论 -
vue学习十三-- 自定义按键修饰符(实现f2回车完成数据输入)
一、vue官方提供的按键修饰符:实现效果:当输入完内容是,敲击“enter”后,触发vue实例,方法对象中的“add”函数,<input type="text" class="form-control" v-model='name' @keyup.enter="add">// 'enter'的键盘码是13 同样可可使用以下方法<input type="text"...原创 2019-11-21 19:50:41 · 512 阅读 · 0 评论 -
vue学习十二----过滤器(采用 私有/公有对 new Date()时间格式转化)
实现的效果:过滤器调用的时候 ,采用就近原则,如果私有过滤器和全局过滤器一直 则调用私有过滤器一 、全局过滤器全局过滤器和vue的实例是平级关系,不存在包含与被包含的关系1.定义语法// 过滤器的定义语法 Vue.filter('过滤器的名称',function(){}) // 过滤器中function ,第一个参数已经固定死了,永远是过滤器管道 符‘|’前传递过来的数...原创 2019-11-21 19:28:21 · 242 阅读 · 0 评论 -
vue select @click的时候,第一次点击无效,第二次才有效果
转载:连接为什么这么做,日后有空再深究。这里只是做个记录。转载 2019-11-19 09:58:00 · 3705 阅读 · 0 评论 -
vue学习十一-----vue的简单应用
实现数据关键字搜索,以及数据添加删除结果图:代码如下:// 需要导入vue 和boostrap的包 <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌&l...原创 2019-11-16 11:34:10 · 182 阅读 · 0 评论 -
vue学习十 -- v-if和v-show的区别
通过以下例子来显示v-if和v-show之间的区别以及使用场景他们都是vue中的判断指令,但是实现的方式有所不同,具体看如下例子: <div id="app"> <!-- <input type="button" value="toggle" @click='toggle'> --> <input type="bu...原创 2019-11-14 15:59:21 · 159 阅读 · 0 评论 -
vue学习九--v-for的四种用法,以及key问题
v-for的使用:普通数组的使用:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2019-11-13 17:54:37 · 487 阅读 · 0 评论 -
vue学习八--通过属性绑定为元素设置style内联样式
方式:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...原创 2019-11-13 17:39:30 · 218 阅读 · 0 评论 -
vue学习七--通过属性绑定为元素设置class样式
以下采用四种方当绑定class样式:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2019-11-13 17:09:21 · 171 阅读 · 0 评论 -
vue学习六---v-model的简单应用之简易计算机
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-11-13 15:34:55 · 138 阅读 · 0 评论 -
vue学习五之v-model 数据双向绑定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-11-13 11:48:21 · 92 阅读 · 0 评论 -
vue学习四 --小练习之跑马灯
跑马灯<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=...原创 2019-11-13 11:21:44 · 103 阅读 · 0 评论 -
vue学习二(补)
剩余指令的学习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...原创 2019-11-13 10:56:36 · 84 阅读 · 0 评论 -
vue学习三
##vue学习之— 阻止事件学习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...原创 2019-11-13 10:52:38 · 101 阅读 · 0 评论 -
vue学习二——v-cloak,v-text,v-html的区别于应用(闪烁问题)
vue三个指令之v-cloak,v-text,v-html的学习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...原创 2019-11-12 15:48:06 · 187 阅读 · 0 评论 -
vue学习一之.mvvm 基本结构的划分
vue学习一1.mvvm 基本结构的划分。2.基本的vue页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...原创 2019-11-12 14:56:13 · 153 阅读 · 0 评论 -
vuex理解之对象调用
vuex理解之对象调用1.在了解Vuex之前,先看看对象引用的概念(猜猜一下代码输出结果)。//代码1let state={ msg:"welcome" }let copy = statestate.hello="world"console.log(Object.keys(copy)) //Object.keys用于获取对象键名//代码2let state={ msg:"w...原创 2019-11-12 10:09:25 · 174 阅读 · 0 评论