Wantingtr Blog

Boilerplate By Hux

Vuex的应用实例 --天气查询应用

利用Vuex实现页面间数据传递 ajax同时发送多个请求

weather 其实是一个很小很简单的demo了，主要就是再熟悉一下ajax和vuex。其中用了和风天气的api，可以精确到行政区划内的天气。因为这里涉及到了在一个页面内同时请求多个页面，以及在涉及到城市和区域之间的各种切换和设定默认值，所以在vuex这一部分还是研究了一下才行。 实现功能： 手动改变城市和行政区，能查询北京、上海、广州、成都的各区天气预报 显示行政区的天气情况，...

Posted by wantingtr on October 20, 2018

Vue2.5仿去哪儿app 实战项目笔记

vuex 公共画廊组件 导航栏的渐变出现

Vue2.5仿去哪儿app 实战项目笔记 利用vuex实现跨页面数据共享 公共画廊组件 导航栏的渐变出现   利用vuex实现跨页面数据共享 要同时改变两个页面的数据，但city.vue和home.vue之间没有一个共同的父级组件，所以无法通过类似前面的父级组件进行数据中转。所以可以用vuex来进行数据管理。 vuex就是通过把所有的公用数据放到一个公共的数据空间去存储，某一个组件改变了...

Posted by wantingtr on September 10, 2018

前端相关概念梳理

前端相关概念梳理   DOM 文档对象模型（Document Object Model） 转载自CSDN博客 HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。 通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。 DOM的妙处在于： 它能够在所有浏览器...

Posted by wantingtr on September 8, 2018

Vue2.5仿去哪儿app 实战项目笔记

swiper的自动构建 发送ajax请求 父子组件和兄弟组件间传值

Vue2.5仿去哪儿app 实战项目笔记 swiper的自动构建 发送ajax请求 父子组件传值 兄弟组件间数据传递   swiper的自动构建 在首页的icon页面下，默认一个页面中包括8个图标。而我们希望若当页面中有9个图标时，可以左右拖动，形成轮播图的效果。而且我们希望页面能够自动计算和适配图标与轮播图，当图标数目变化时，轮播图也跟着相应变化。 所以应该设定两个v-for指令。...

Posted by wantingtr on August 28, 2018

Vue2.5仿去哪儿app 实战项目笔记

移动端适配 项目目录结构 轮播图 样式穿透 px与rem

Vue2.5仿去哪儿app 实战项目笔记 移动端适配 项目目录结构 轮播图 样式穿透 px与rem   参考页面：去哪儿网 效果演示： 项目展示： 仿去哪儿网-Vue.js移动webApp   移动端的适配 引入reset.css 在进行页面开发的时候，需对css进行一些初始化的设置与重设，通过reset.css把浏览器提供的默认样式覆盖掉,统一不同浏览...

Posted by wantingtr on August 19, 2018

关于Vue的组件,生命周期与路由

  父组件向子组件传值： v-bind:content="father-components-data" 子组件利用props：[…] 接收每一个父组件传过来的值 子组件向父组件传值： this.$emit() 通过事件触发向上一层触发事件，父组件监听此事件，获取子组件带出的数据内容   以一个todolist为例： var todoItem = { props:['conten...

Posted by wantingtr on August 10, 2018

利用Vue.js2.0实现购物车和地址选配功能

慕课网实战教程实践

  根据慕课网-利用Vue2.0实现购物车和地址选配功能教程，通过利用Vue2.0来实现电商平台的简单功能。   vue中的$http请求服务. 通过调用http服务，对.json文件发送http请求，通过遍历数组数据完成页面渲染 引入vue-resource.js，即可以使用全局的 Vue.http 或者在 Vue 实例中的 this.$http 调用 http 服务。 使用方法...

Posted by wantingtr on July 30, 2018

Vue.js框架学习笔记之四-一个todolist的小尝试

前言： 至此为止，还仍然是跟着Vue.js的官方文档，对照网络上的一些教程进行较为分散的学习。大部分还停留在理论性的表面学习与对于官方文档中示例代码的理解。因为缺少实战，还是有些云里雾里。所以这一篇，准备对Vue来一个小小的实战。 演示示例 实现功能： 实现浏览器的本地存储，刷新页面后获取数据缓存。 在每个item前显示序号，实现单个item的finish,delete。 ...

Posted by wantingtr on April 30, 2018

Vue.js框架学习笔记之三

Vue.js中的表单 可以用v-model指令在表单 <input>及 <textarea>元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素。 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选...

Posted by wantingtr on April 28, 2018

Vue.js框架学习笔记之二

Vue.js中的样式绑定 class和style是HTML元素的属性，用于设置元素的样式，我们可以通过v-bind来设置样式属性,可绑定一个数据属性或者对象。 v-bind:class="..." v-bind:style="..." class实例： <!DOCTYPE html> <html> <head> <meta charset="u...

Posted by wantingtr on April 22, 2018

ABOUT ME

EMBRACE THE WORLD

FRIENDS