![](https://img-blog.csdnimg.cn/2019090300325422.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue.js + mui 框架
学习总不晚
学习不能计较目的-毕竟学习本身就是在进步。
展开
-
01Vue的基础代码
开始学习Vue的使用第一步导入 vue框架包具体可以参考官网的使用 安装:Vue的安装(简言之:直接下载vue.js 然后通过 script 本地引入一下就可以了,可以不使用其链接的方式)划重点:Vue 使用时 注意其格式;(var vm = new Vue({el:'#app', //这里的app 名字就是对于.html中需要使用Vue的父容器的id 名称data:{}...原创 2019-08-31 18:42:51 · 135 阅读 · 0 评论 -
17 通过ref代替DOM用来获取元素和组件的引用
重点ref :官网给出的解释是:ref: 用于注册对元素或子组件的引用。引用将在父组件的$refs 对象下注册。如果在普通DOM元素上使用,则引用将是该元素;如果在子组件上使用,则引用将是组件实例:<!-- vm.$refs.p will be the DOM node --><p ref="p">hello</p><!-- vm.$re...原创 2019-09-01 23:25:42 · 427 阅读 · 0 评论 -
18 路由的使用01
划重点组件的定义路由:VueRouter路由的两种引用通过 a 标签的 href 添加 # 进行使用:<a href="#/login"> 登录组件</a>使用 router-link路由的定义路由routes 的匹配规则在Vue中注册路由: router使用redirect 对路由重定向:也可设置默认的路由显示糖醋鲤鱼<!DO...原创 2019-09-01 23:39:30 · 224 阅读 · 0 评论 -
19 使用路由传递参数(query方式)02
划重点路由:VueRouter基础路由传参通过query :在template中:$route.query.id (id对应 params中的id)通过to指向对应的params:参数拼接;router-view:可以看做是用来显示路由匹配规则的容器(必不可少)梅菜扣肉一大份<!DOCTYPE html><html lang="en"><...原创 2019-09-01 23:51:49 · 1002 阅读 · 0 评论 -
20 使用路由传递参数(params方式)03
说明:此文章是上一篇文章的延续:注意 router-link 中 to 对应的值得写法的异同宫保鸡丁<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...原创 2019-09-02 00:21:47 · 891 阅读 · 0 评论 -
21 父子组件之间的传值
划重点组件间传值注册组件props 在组件中的作用鱼香肉丝 一小份<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...原创 2019-09-02 23:15:36 · 128 阅读 · 0 评论 -
22 使用keyup和watch和computed监听文本框的改变
划重点keyup键盘事件:仅用于键盘的事件监听;不适合手机客服端的使用watch事件:监听 文本框标签内容的变化computed:也可以用来监听输入框内容的变化watch / computed的区别:watch 使用的时候没有返回值:return ; computed 有返回值青椒肉丝 <!DOCTYPE html><html lang="en">&l...原创 2019-09-02 23:22:15 · 322 阅读 · 0 评论 -
23 Class与Style动态绑定
划重点v-bind 绑定机制的使用在computed 中动态操作绑定的样式Classcomputed中的方法有返回值对于class可以定义一个默认的样式;同时也可以定义一个需要动态变化的对应的样式名称土豆肉片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...原创 2019-09-02 23:39:14 · 207 阅读 · 0 评论 -
24 添加渲染if与show
划重点判断条件 if 的使用判断添加 show 的使用剁椒鱼头<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...原创 2019-09-02 23:43:24 · 440 阅读 · 0 评论 -
25 表单输入和绑定
划重点template上面使用 v-for :类似于v-if ;;我们可以利用v-for 的 template 标签来渲染一段包含多个元素的内容:可以是一个数组input 中的 placeholder 属性可以默认输入框中的内容label 标签的使用select 选择框的使用酸菜鱼<!DOCTYPE html><html lang="en"><h...原创 2019-09-02 23:50:24 · 105 阅读 · 0 评论 -
26 组件基础
重点component 组件定义组件的使用组件间传值大盘鸡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...原创 2019-09-02 23:55:41 · 100 阅读 · 0 评论 -
27 简易视频播放器
划重点本案例是在上一个案例的基础上直接调试使用的 - 所以复习了组件的使用video 标签的使用在网页中操作视频:播放 、暂停 、快进 、清蒸鲤鱼<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi...原创 2019-09-03 00:03:04 · 514 阅读 · 0 评论 -
0-27 Vue阶段学习小结
Vue 小知识点 说明:序号说明:本小结的序号 如 :01 、02…和0-27 中的序号不代表对应关系。----------两个空格可以换行-----------------------1. 在使用vue的时候 ;需要添加vue的架包依赖:vue.min.js2. mui.plusReady(…)方法 是用在vue生命周期中的mounted方法中 初始化一些数据使用的;但是 该方法在电脑浏...原创 2019-09-03 00:15:02 · 1593 阅读 · 0 评论 -
16 子组件和父组件之间传值
划重点子组件 / 父组件 定义组件中:props 的使用组件中:data 的使用(有 return 返回值) ; 区别:Vue中的data (没有返回值);组件方法中 emit 的使用:emit:英文原意是:触发、发射 的意思components :直接在Vue的方法中声明和绑定要使用的组件小炒肉:温馨可口<!DOCTYPE html><html lang...原创 2019-09-01 17:59:52 · 148 阅读 · 0 评论 -
15 组件的切换和对组件的data的使用
划重点a 标签的使用事件修饰符组件的定义组件的切换:登录 / 注册泡椒鱼头 :微辣<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i...原创 2019-09-01 17:48:41 · 115 阅读 · 0 评论 -
14 定义数组的两种方式
划重点直接看代码说明关东煮<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...原创 2019-09-01 17:36:32 · 582 阅读 · 0 评论 -
02跑马灯-定时器的使用
划重点v-bind: 绑定事件function_name (){ } //ES6的函数写法规范定时间:setInterval / clearInterval上硬菜<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="...原创 2019-08-31 19:13:54 · 1322 阅读 · 0 评论 -
03事件修饰符
直接划重点.stop: 阻止冒泡.prevent: 阻止默认事件.capture: 添加事件监听器时使用事件捕获模式.self: 只当事件在该元素本身(比如不是子元素)触发时触发回调.once: 事件只能触发一次上牛百叶:添加案例说明<!DOCTYPE html><html lang="en"><head> ...原创 2019-08-31 19:26:42 · 164 阅读 · 0 评论 -
04简易计算器
划重点:select:选择器的使用 (select : option / option … )v-model 事件绑定毛肚一份:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="...原创 2019-08-31 19:32:37 · 133 阅读 · 0 评论 -
05v-for命令
划重点v-for:遍历牛肚一份带走不谢:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-09-01 15:35:22 · 137 阅读 · 0 评论 -
06 v-for中key属性的使用
划重点v-for中key:标识当前对象元素的唯一身份;绑定key (v-bind:key=“item” )数组的添加:push / unshiftpush:把添加添加到数组的末尾–> 也就是数组末尾累加;unshift:把元素添加到数组的首位千张一份<!DOCTYPE html><html lang="en"><head> &...原创 2019-09-01 15:44:31 · 181 阅读 · 0 评论 -
07 v-if和v-show使用和区别
划重点:v-ifv-show小葱拌豆腐<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-09-01 15:51:17 · 115 阅读 · 0 评论 -
08 增删查功能
划重点:lable 标签keyup:键盘事件标签内添加样式:style使用事件修饰符:preventforEach :遍历 数组indexOf: 可以返回要查询的某个字符串值在整个字符串中首次出现的位置下标findIndex:返回传入一个测试条件(函数)符合条件数组的首个元素的位置splice:向/从数组中添加/删除项目,然后返回被删除后的新的项目数组黑椒蟹 一对:<...原创 2019-09-01 16:08:08 · 99 阅读 · 0 评论 -
09 生命周期
生命周期beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestorydestoryed辣子鸡:香辣入口,犹如吃了炫迈一样 - - - 根本停不下来<!DOCTYPE html><html lang="en"><head> <meta cha...原创 2019-09-01 16:24:50 · 95 阅读 · 0 评论 -
10 Source-Get-Post-JsonP 网络请求
划重点使用vue-resource.js库 进行网络请求操作POST : this.$http.post ( … )GET : this.$http.get ( … )小鸡炖蘑菇<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l...原创 2019-09-01 16:36:34 · 197 阅读 · 0 评论 -
11 动画transition的使用
划重点动画的几个周期:开始阶段v-enter:开始动画前 (这是一个时间点)v-enter-active:执行动画中…v-enter-to:开始动画执行后 (这是一个时间点)离开阶段v-leave:离开动画前 (这是一个时间点)v-leave-active:离开动画的过程中…v-leave-to:离开动画之后,离开的终止状态 这个时候元素动画已经结束了 (这是一...原创 2019-09-01 16:47:04 · 123 阅读 · 0 评论 -
12 动画transition的使用2
划重点Vue 动画:transition / transform在动画周期中执行动动画(上一篇是通过动画样式控制动画)清蒸扇贝<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w...原创 2019-09-01 17:00:05 · 160 阅读 · 0 评论 -
13 transition数组的动画使用
划重点动画:transitiontransition-group :数组动画数组的 添加 / 删除豆腐粉丝汤 清淡又健康<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...原创 2019-09-01 17:27:53 · 415 阅读 · 0 评论 -
webpack打包--创建webpack项目
Vue脚手架+webpack打包开始学习:参考文档:Vue CLI使用官网:安装参考文档生成项目的两种方式:首先安装全局的Cli:npm install -g @vue/cli一个说明:创建新的项目或者打开项目 首先要定位到自己创建的操作目录文件1:通过命令直接生成项目:(适合一个新的需要快速开发的项目)a:打开终端定位到需要存放项目的文件夹:b:通过命令:vue c...原创 2019-09-03 00:27:13 · 176 阅读 · 0 评论