vue
关注
分享
扫一扫
学习没有捷径，如果有那便是持之以恒
学习一直在路上。
展开
-
vue中MVC和MVVM之间的对应关系图及所在的html位置
下面是关系图原创 2019-08-03 15:18:43 · 254 阅读 · 2 评论 -
路由嵌套之子路由
<!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-U...原创 2019-08-14 14:52:13 · 169 阅读 · 0 评论 -
Vue的v-for循环、v-if、v-show指令
循环普通数组 <li v-for="item in mytitle">{{item}}</li> <!--当拿到数组的下标的时候可以这样--> <li v-for="(item,i) in mytitle">索引值是：{{i}}-----对应的值是 {{item}}</li>-------------...原创 2019-08-07 21:00:42 · 2245 阅读 · 0 评论 -
Vue-动画，过度类名transition实现自定义文字渐入渐出
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--//导入js包--> <script src="js/vue.js"></script&g...原创 2019-08-10 10:49:57 · 2471 阅读 · 0 评论 -
命名视图实现经典布局
<!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-U...原创 2019-08-14 16:55:17 · 725 阅读 · 0 评论 -
Vue中监视文本框数据改变之watch方式
<!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-U...原创 2019-08-14 19:32:48 · 1299 阅读 · 0 评论 -
Vue动画实现之animate第三方类库
引入css<link href="./css/Animate.css" rel="stylesheet">使用transition标签控制区域bounceIn 、bounceOut为相关动作animated 固定写法，可以加到 <p v-if="flag" class="animated">{{msg}}</p> <transition en...原创 2019-08-10 16:10:34 · 811 阅读 · 0 评论 -
nrm的安装使用
什么是nrm开发的npm registry 管理工具 nrm, 能够查看和切换当前使用的registry, 最近NPM经常 down 掉, 这个还是很有用的顾名思义，就是说nrm是一个管理npm的工具。先安装node.js(Windows)地址:https://nodejs.org/en/之后就是一直next，注意一定就是不要放在c盘配置环境变量配置path后面加 %NODE...原创 2019-08-15 14:30:41 · 236 阅读 · 0 评论 -
transition-group实现列表的动画
效果图}.v-enter-active,v-leave-active{transition: all 0.6s ease; } li:hover{ background-c...原创 2019-08-12 18:23:25 · 455 阅读 · 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-08-12 22:09:45 · 3082 阅读 · 0 评论 -
使用render函数渲染组件
案例代码<!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-08-16 18:58:05 · 1300 阅读 · 0 评论 -
在vue中使用样式
使用class样式数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>在vue中使用样式</title> <script src="js/vue.js"></script><...原创 2019-08-07 18:33:56 · 257 阅读 · 0 评论 -
使用params方式传递路由参数
引入包 <script src="js/vue.js"></script> <!-- 引入路由 --> <script src="./js/vue-router.js"></script>创建路由 // 创建路由 var routers=new VueRouter({...原创 2019-08-14 10:26:59 · 12201 阅读 · 0 评论 -
讲解v-cloak、v-text和v-html作用
直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>学习 v-cloak v-test v-html</title> <!--//导入js包--> <script src="j...原创 2019-08-03 17:47:46 · 454 阅读 · 0 评论 -
vue中的v-bind、v-on作用
直接上代码：v-bind：v-bind 是vue中，提供的用于绑定属性的指令<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>学习 v-cloak v-test v-html</title> <!--/...原创 2019-08-03 18:13:35 · 5566 阅读 · 0 评论 -
vue实现跑马灯效果
我是流氓直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跑马灯</title> <!--//导入js包--> <script src="js/vue.js"><...原创 2019-08-03 21:42:06 · 347 阅读 · 0 评论 -
vue中的修饰符案例
事件中的修饰符.stop :阻止冒泡.prevent 阻止默认事件.capture: 添加使劲按倾听时使用事件捕获模式.self 只当事件在该元素本身触发的时候回调.once 事件只触发一次案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2019-08-04 09:40:21 · 164 阅读 · 0 评论 -
vue指令之v-model和双向数据绑定
基本案例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-model</title> <!--//导入js包--> <script src="js/vue.js"><...原创 2019-08-04 10:46:59 · 346 阅读 · 0 评论 -
Vue---ref获取DOM元素
获取p标签元素当获取元素或者组件的DOM时候，用ref="名称"定义，用his.$refs.名称 来调用<p ref="getDom">{{msg}}</p>---------------------------------------------------------------------------- new Vue({ el:'#app', ...原创 2019-08-13 14:57:40 · 1856 阅读 · 0 评论 -
vue中品牌列表案例
效果图用到的知识点双向数据绑定：v-model全局的过滤器，进行时间的格式化实例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--//导入js包--&g...原创 2019-08-08 21:26:18 · 1047 阅读 · 0 评论 -
Vue中的过滤器
语法Vue.filter（'过滤器名称'，function（）{}）-----------------------------------------------------------=<!--过滤器调用时候的格式 {{name | 过滤器的名称}} -->全局过滤器Vue.filter('msgFormat',function (msg,arg,arg2) { ...原创 2019-08-08 21:33:24 · 171 阅读 · 0 评论 -
Vue-router，路由
概念前端路由：现代前端开发中最流行的页面模型，莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面，通过动态替换DOM内容并同步修改url地址，来模拟多页应用的效果，切换页面的功能直接由前台脚本来完成，而不是由后端渲染完毕后前端只负责显示。- 后端路由后端路由又可称之为服务器端路由，因为对于服务器来说，当接收到客户端发来的HTTP请求，就会根据所请求的相应URL，来找到相应的映射...原创 2019-08-13 17:52:30 · 143 阅读 · 0 评论 -
Vue中自定义指令之获取文本框焦点，改变字体颜色，大小
钩子函数bind： 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted：被绑定元素插入父节点时调用update：所在组件的VNode更新时调用，但是可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有，但是你可以通过比较更新前后的值来忽略不必要的模板更新componentUpdated:所在组件的VNode及...原创 2019-08-09 11:03:46 · 4434 阅读 · 0 评论 -
V-resource 发起get post jsonp请求
引入vue-resource<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>post请求 postmethod(){ //发起post请求， application/x-www-form-urlencoded ...原创 2019-08-09 15:42:27 · 671 阅读 · 0 评论 -
组件传值
父组件向子组件传值格式：子组件用父组件的数据，用props数组来接收，是一个数组,名称对应接收，并且是只读的new Vue({ //下面是父作用域 el:'#app', data: { //定义父组件数据 meg:'123父组件的数据' ...原创 2019-08-13 11:33:40 · 155 阅读 · 0 评论