vue
codingXT
菜鸡一枚,请多指教。
展开
-
Vue学习记录--RESOURCE 和 AXIOS的区别
转载:https://www.cnblogs.com/peachmeimei/p/8916098.htmlVUE-RESOURCEVue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$...转载 2019-02-22 12:24:36 · 6904 阅读 · 0 评论 -
Vue学习记录--事件修饰符 详解
转载:https://blog.csdn.net/bk_yzw/article/details/78795182这篇也很清楚:https://blog.csdn.net/wxy270/article/details/79397076事件修饰符:.stop 阻止冒泡.prevent 阻止默认事件.capture 添加事件侦听器时使用事件捕获模式.s...转载 2019-02-12 20:02:52 · 5758 阅读 · 0 评论 -
Vue学习记录--初步理解v-model实现数据的双向绑定和实现计算器
代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c原创 2019-02-12 20:23:40 · 5954 阅读 · 0 评论 -
Vue学习记录-路由
什么是路由**后端路由:**对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;**前端路由:**对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;在单页面应用程序中,这种通过hash改变来切换页面...原创 2019-02-23 15:27:40 · 5870 阅读 · 0 评论 -
Vue学习记录--使用样式
在Vue中使用样式使用class样式数组<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>数组中使用三元表达式<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>数组中嵌套对象<h1 :class=&原创 2019-02-12 21:36:52 · 6112 阅读 · 0 评论 -
Vue学习记录-- v-for使用详解
Vue指令之v-for和key属性迭代数组<ul> <li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name}} --- 年龄:{{item.age}}</li></ul>迭代对象中的属性 <!-- 循环遍历对象身上的属性 --> <div..原创 2019-02-12 22:01:38 · 8425 阅读 · 0 评论 -
Vue学习记录-- v-if 和v-show的使用和区别
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2019-02-12 22:12:17 · 5848 阅读 · 0 评论 -
padStart()方法,padEnd()方法实现字符串补全
转载:https://blog.csdn.net/ixygj197875/article/details/79090578 padStart()方法,padEnd()方法ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()...转载 2019-02-20 11:29:03 · 6038 阅读 · 0 评论 -
Vue学习记录— 键盘修饰符以及自定义键盘修饰符
键盘修饰符以及自定义键盘修饰符按键修饰符也就是Vue提供的键盘监听事件。<label>Name: <!--输入完成之后按下 enter键即可调用add 方法--> <input type="text" v-model="name" class="form-control" @keyup.enter="add">原创 2019-02-20 12:00:48 · 6218 阅读 · 0 评论 -
Vue学习记录--自定义指令让文本框获得焦点,为绑定的元素设置指定的字体颜色 和 字体粗细
自定义指令自定义全局和局部的 自定义指令: // 自定义全局指令 v-focus,为绑定的元素自动获取焦点: Vue.directive('focus', { inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用 el.focus(); } }); ...原创 2019-02-20 12:39:33 · 12152 阅读 · 3 评论 -
Vue学习记录--实例的生命周期
vue实例的生命周期什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!生命周期钩子:就是生命周期事件的别名而已;生命周期钩子 = 生命周期函数 = 生命周期事件主要的生命周期函数分类:创建期间的生命周期函数:beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性crea...原创 2019-02-20 18:38:38 · 5981 阅读 · 0 评论 -
Vue学习记录--实现跑马灯效果
视频:https://www.bilibili.com/video/av36650577/?p=10分析:1. 给 【浪起来】 按钮,绑定一个点击事件 v-on @2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后 调用 字符串的 substring 来进行字符串的截取操作,把 第一个字符截取出来,放到最后一个位置即可;3. 为了实现点击下按钮,自动截取...原创 2019-02-12 19:07:02 · 5970 阅读 · 0 评论 -
Vue学习记录-- v-cloak,v-text,v-html,v-bind,v-on的基本使用
1.v-cloak使用 v-cloak 防止页面加载时出现 vuejs 的变量名<div id="app"> {{msg}}</div>HTML 绑定 Vue实例,在页面加载时会闪烁v-cloak 可以解决这一问题,在 css 中加上[v-cloak] { display: none;}这段 CSS 的含义是,包含 v-cloak (clo...原创 2019-02-12 17:29:32 · 6368 阅读 · 0 评论 -
Vue学习记录--使用ref获取DOM元素和组件引用
使用 this.$refs 来获取元素和组件 <div id="app"> <div> <input type="button" value="获取元素内容" @click="getElement" /> <!-- 使用 ref 获取元素 --> <h1 r原创 2019-02-23 14:39:39 · 9219 阅读 · 0 评论 -
Vue学习记录--动画
Vue中的动画为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能;使用过渡类名HTML结构:&amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;input type=&quot;button&quot; value=&quot;动起来&quot; @click=&原创 2019-02-22 14:21:36 · 5832 阅读 · 0 评论 -
用代码手把手教你使用MVVM
转载自:https://juejin.im/post/5a0712a35188255ea95b6d7c 概述说到Android MVVM,就会联想到DataBinding框架。然而两者的概念是不一样的,不能混为一谈。MVVM是一种架构模式,而DataBinding是一个实现数据和UI绑定的框架,是构建MVVM...转载 2019-02-11 17:10:05 · 5887 阅读 · 0 评论 -
Vue学习记录--实现列表的添加删除以及查找功能
品牌管理案例1.添加新品牌2.删除品牌3.根据条件筛选品牌1.x 版本中的filterBy指令,在2.x中已经被废除:filterBy - 指令&lt;tr v-for="item in list | filterBy searchName in 'name'"&gt; &lt;td&gt;{{item.id}}&lt;/td&gt原创 2019-02-17 18:36:03 · 7280 阅读 · 0 评论 -
Vue学习记录--调试工具devtools的安装与使用
链接:https://pan.baidu.com/s/1m7l6tMBvzFxGoIHFPgbaKw提取码:ewpj下载上面的文件,将他放到一个固定的地方打开谷歌浏览器设置—>扩展程序–》勾选开发者模式—》加载已解压的扩展程序—》选择“chrome扩展”文件夹,至此恭喜已经安装成功!!!用谷歌浏览器打开vue项目,按F12 ,然后点击vue就可以使用了...原创 2019-02-17 19:34:15 · 6229 阅读 · 0 评论 -
Vue学习记录--私有和全局过滤器的使用
修改上一篇vue博客的品牌案例过滤器概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;私有过滤器HTML元素:&lt;td&gt;{{item.ctime | dataFormat('yyyy-mm-dd')}}&lt...原创 2019-02-17 19:53:25 · 6178 阅读 · 3 评论 -
Vue学习记录--组件
定义Vue组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组件化和模块化的不同:模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;全局组件定义的三种方式使用...原创 2019-02-22 21:16:15 · 5843 阅读 · 0 评论 -
Vue学习记录--定义局部子组件以及组件切换
使用components属性定义局部子组件组件实例定义方式:<script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, components: { // 定义子组件 account:...原创 2019-02-22 21:45:31 · 8590 阅读 · 0 评论 -
什么是vue?为什么用vue?
综合:https://segmentfault.com/a/1190000015560315https://blog.csdn.net/liang377122210/article/details/71545459https://blog.csdn.net/xutongbao/article/details/77870989这几篇都写得非常好1.Vue.js是什么?vue就是一个js库,...原创 2019-02-12 15:45:47 · 55024 阅读 · 14 评论 -
Vue学习记录--入门基础代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2019-02-12 16:30:31 · 5875 阅读 · 0 评论 -
Vue学习记录--父子组件之间传值以及案例评论列表的实现
父组件向子组件传值组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据&lt;script&gt; // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '这是父组件中的消息' }, components...原创 2019-02-23 14:25:43 · 6097 阅读 · 0 评论 -
VUE学习记录--结合node手写JSONP服务器剖析JSONP原理
JSONP的实现原理由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口,浏览器认为这种访问不安全;可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称作JSONP(注意:根据JSONP的实现原理,知晓,JSONP只支持Get请求);具体实现过程:先在客户端...原创 2019-02-21 11:22:13 · 5937 阅读 · 2 评论