qq_36400099的博客

本博客参考书籍《HTML5权威指南》，为个人原创，转载请注明出处 一、过渡过渡属性transition-property ：应用过渡的属性，值为属性，值为all时，所有有变化的属性会有过渡效果 transition-duration:过渡的持续时间 transition-timing-function:过渡期间计算中间值的方式， 默认ease ,其他值：ease-in、 ease-out

一、当前项目目录二、首先编写模板文件2.1、入口文件HTML中的主组件为App.vue子组件v-header的模板目录为：./components/header/header.vue router-link：这里使用用路由的名字来链接到一个路由，需要在路由配置是添加name属性为导航名。 也可以使用原始的路径链接路由： <router-link to="/goods">商品</router-l

项目结构目录 其中： - build文件夹———配置了webpack的基本配置、开发环境配置、生产环境配置等 - config—————-配置了路径端口值等 - node_modules—–依赖的模块 - src文件夹————放置组件和入口文件 - - assets文件夹——-存放bootstrap等外部插件 - - common文件夹 - - - css————–公共的css文件：

一、my-project项目安装前准备安装nodejs安装cnpm ，npm构建项目及下载插件会很慢全局安装vue全局安装vue-cli二、vue-cli脚手架工具快速构建项目架构项目文件夹下输入shell命令： vue init webpack my-project 该命令会生成项目名为my-project的项目模板项目文件夹下输入shell命令： cnpm install 该命

问题：点击按钮显示或隐藏浮出层弹框 在使用这一功能时，首先想到的是使用css3的transition过渡来实现显示与隐藏的交互功能。因为使用css来做这个效果会实现更加平滑的过渡。然而单纯的css3过渡是由浏览器直接改变元素的css属性实现的，例如使用:hover选择器，一旦用户将按钮悬停在元素上，浏览器就会应用跟选择器关联的属性。（参考HTML5权威指南第477页） 解决方式： 故可以使用v

本节重点： - flex布局的用法 - 参考学习阮一峰的博客 什么是flex布局 采用flex布局的元素，叫flex容器，所有子元素自动成为容器成员，叫flex项目.box{display:flex;display:-webkit-flex;}子元素的float、clear、vertical-align 属性失效容器的属性flex-direction:row(默认) | row-

本节重点： - 父组件到子组件的数据传递 - 子组件到父组件的数据传递 - js的模块化，按需引入 - 组件的模块化，重复使用 - 数组过滤与过滤器的使用一、goods商品界面点击到food详情界面的实现父组件good.vue界面： 与子组件的关联 点击商品时，更改传入的商品数据this.selectedfood = food根据子组件的DOM节点this.$refs.thisfoo

html代码生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画动画的内容分别是外层和内层,外层控制动画小球的轨道和方向,内层控制动画小球的运行状态动画使用vue的js钩子实现因为小球动画只有一个方向(只执行单方向从上到下滚落),所以只用了before-enter,enter,after-

本节内容： - 添加商品数量的购物车控件按钮的实现 - 页面底部购物车组件部分的实现 - 通过购物车控件按钮增加商品数量，更改数据后，更新购物车控件的各个状态和各个数据主组件good.vue模块代码购物车控件按钮 <cartcontrol @cartAdd ='_drop' :food ='list'></cartcontrol>购物车组件部分 <cartshop ref='shop

本章重点： - 如何使用better scroll的事件派发 - better scroll的滚动监听事件、如何滚动元素、如何实现左右联动的巧妙逻辑 一、效果图二、需求分析分块： good.vue组件主要分为左侧菜单区、右侧内容区、底部购物车区单侧联动之当右侧内容区滚动时需要滑动到左侧相应菜单块. 使用better scroll 滚动监听事件，监听当前滚动的y轴坐标scrollY内容区

本笔记重点: - 如何在项目中引入Vue的扩展‘better scroll’ - 关于better scroll 的API - 饿了么项目中应用点–让内容在中间区域滚动 - 饿了么项目中应用点–通过一侧点击事件滚动另一侧内容一、better scroll的使用首先贴上改扩展插件的github托管地址： https://github.com/ustbhuangyi/better-scroll

深入响应式原理Vue 最显著的特性之一便是不太引人注意的响应式系统(reactivity system)。模型层(model)只是普通 JavaScript 对象，修改它则更新视图(view)。这会让状态管理变得非常简单且直观。 vue 如何追踪变化：把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.definePro

本笔记重点： - 如何通过vue的refs属性获取DOM节点 - 如何在vue的示例中获取到节点元素 - 在created函数中不可使用的问题一、refs的使用1.1 官方介绍    被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例:<!-- vm.$refs

一、使用Prop的场景与意义组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。 子组件要显式地用 props 选项声明它期待获得的数据二、使用方法// 简单语法Vue.component('props-demo-simple', { props: ['size', 'myMessage

一、参考博客版本 0.9.3http://www.cnblogs.com/cnblogs-jcy/p/7055653.html 二、vue-resource的使用API在vue-resource的官网上已经解释的很清楚了，贴上链接链接： https://github.com/pagekit/vue-resource2.1 下载vue-resource插件首先在package配置"depende

本节知识点： 如何让小方块做抛物线动画 - 单个元素做动画只能实现从右上角到左下角的上下斜线平移 - 类名为wai的外层元素做y轴过渡，先向上平移（负方向）再向下平移（正方向），使用贝塞尔曲线自定义过渡动画 - 类名为lit的内层元素做x轴过渡，向左平移（负方向） - HTML部分<template> <div class="ratings"> <button @click=

一、如何在手机等移动端查看页面1.1查看电脑IP地址$ ipconfig---------->10.2.65.1121.2 、获取当前网页的完整url地址，到草料二维码网站(http://cli.im/)中讲该ip地址转变成一个二维码,手机端扫码打开。手机端打开的网页类似于客户端浏览器打开的网页，开发代码过程会自动反应到手机端上。注意事项：手机与电脑要处在同一局域网中二、border 1px问题由于