content.json

[{"title":"前端基础回顾","date":"2017-04-06T16:00:50.000Z","path":"2017/04/07/前端基础回顾/","text":"CSSCSS3新增伪类： 举例： p:first-of-type 选择属于其父元素的首个 <p> 元素的每个<p>元素。 p:last-of-type 选择属于其父元素的最后 <p>元素的每个<p>元素。 p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素。 p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素。 :after 在元素之前添加内容,也可以用来做清除浮动。 :before 在元素之后添加内容 :enabled :disabled 控制表单控件的禁用状态。 :checked 单选框或复选框被选中。 居中水平居中 行内元素： .parent{ text-center } 将行内元素包裹在一个属性display为block的父元素.parent下； 块级元素： 1234.item { /* 这里可以设置顶端外边距 */ margin: 10px auto;} 多个块状元素: .parent{ text-center } 将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center; 或者用flex布局： 12345.parent { display:flex; justify-content:center;} 使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及 justify-content:center 即可 垂直居中 单行的行内元素 123456789101112.parent { background: #222; height: 200px;}/* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */a { height: 200px; line-height:200px; color: #FFF;} 多行的行内元素 组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果 123456789.parent { background: #222; width: 300px; height: 300px; /* 以下属性垂直居中 */ display: table-cell; vertical-align:middle;} 已知高度的块状元素 123456.item{ top: 50%; margin-top: -50px; /* margin-top值为自身高度的一半 */ position: absolute; padding:0;} 未知高度的块状元素 12345.item{ top: 50%; position: absolute; transform: translateY(-50%); /* 使用css3的transform来实现 */} 水平垂直居中 未知高度和宽度元素解决方案1(css3) 123456.item{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 使用css3的transform来实现 */} 未知高度和宽度元素解决方案2(flex布局) 12345678.parent{ display: flex; justify-content:center; align-items: center; /* 注意这里需要设置高度来查看垂直居中效果 */ background: #AAA; height: 300px;} 已知高度和宽度的元素解决方案1 1234567.item{ position: absolute; top: 50%; left: 50%; margin-top: -75px; /* 设置margin-left / margin-top 为自身高度的一半 */ margin-left: -75px;} 已知高度和宽度的元素解决方案212345678.item{ position: absolute; margin:auto; left:0; top:0; right:0; bottom:0;} 这是一种不常见的居中方法，可自适应，比方案2更智能","tags":[{"name":"基础","slug":"基础","permalink":"https://wangxx1991.github.io/tags/基础/"}]},{"title":"豆瓣电影demo","date":"2017-04-04T06:37:36.000Z","path":"2017/04/04/豆瓣电影demo/","text":"123456789101112131415161718192021222324252627282930.|-- build // 项目构建相关代码| |-- build.js // 生产环境构建代码| |-- check-version.js // 检查 node、npm 等版本| |-- dev-client.js // 热重载相关| |-- dev-server.js // 构建本地服务器| |-- utils.js // 构建工具相关| |-- webpack.base.conf.js // webpack 基础配置（出入口和 loader）| |-- webpack.dev.conf.js // webpack 开发环境配置| |-- webpack.prod.conf.js // webpack 生产环境配置|-- config // 项目开发环境配置| |-- dev.env.js // 开发环境变量| |-- index.js // 项目一些配置变量（开发环境接口转发将在此配置）| |-- prod.env.js // 生产环境变量| |-- test.env.js // 测试环境变量|-- src // 源码目录| |-- components // vue 公共组件| |-- App.vue // 页面入口文件| |-- main.js // 程序入口文件，加载各种公共组件|-- static // 静态文件，比如一些图片，json数据等|-- test // 自动化测试相关文件|-- .babelrc // ES6语法编译配置|-- .editorconfig // 定义代码格式|-- .eslintignore // ESLint 检查忽略的文件|-- .eslistrc.js // ESLint 文件，如需更改规则则在此文件添加|-- .gitignore // git 上传需要忽略的文件|-- README.md // 项目说明|-- index.html // 入口页面|-- package.json // 项目基本信息.","tags":[{"name":"vue","slug":"vue","permalink":"https://wangxx1991.github.io/tags/vue/"}]},{"title":"关于Vue2.0开发单页应用的一些记录","date":"2017-03-30T09:35:33.000Z","path":"2017/03/30/关于Vue2-0开发单页应用的一些记录/","text":"以下可能很多都是自己的方式去理解，可能有误，仅作记录回顾，后续继续学习更新。 vur-router (路由设置，做页面跳转) 创建组件：创建单页面应用需要的渲染的组件； 定义路由（组件）：（main.js 中） 1234const routes = [ { path: '/home', component: home }, { path: '/about', component: about }]; 创建路由：创建VueRouter实例； 123const router = new VueRouter({ routes: routes}); 使用router-link组件来导航,to 属性指定链接（在主组件App.vue中）： to=\"/about\">About```1234- 使用<router-view>标签，路由匹配到的组件将渲染在此 ````<router-view></router-view>` 启动路由： 1234new Vue({ router: router, render: h => h('router-view')}).$mount('#app') 可参考此篇博文，及这篇博文 简单代码如下：123456789101112131415161718192021222324252627282930// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)// 1. 定义（路由）组件。// 可以从其他文件 import 进来const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }// 2. 定义路由// 每个路由应该映射一个组件。 其中\"component\" 可以是// 通过 Vue.extend() 创建的组件构造器，// 或者，只是一个组件配置对象。// 我们晚点再讨论嵌套路由。const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar }]// 3. 创建 router 实例，然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。const router = new VueRouter({ routes // （缩写）相当于 routes: routes})// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由，// 从而让整个应用都有路由功能new Vue({ router: router, render: h => h('router-view') }).$mount('#app') Vue-Resoursevue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。 引入组件：在入口文件main.js中引入 import VueResourcr from 'vue-resource' 全局注册： Vue.use(VueResource) 基本语法： 基于全局Vue对象使用http： Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); - 在一个实例中使用$http: this.$http.get('/someUrl', [options]).then((response) => { //响应成功回调 }，(response) => { //响应失败回调 }); > 这里使用的是ES6中的箭头函数写法：(可参考[这篇博文](http://blog.csdn.net/mevicky/article/details/49942559)) ([param] [, param]) => { statements } param => expression TIP：首先我们需要给app.vue定义一个seller的对象：可以通过data()方法。在vue.js中，这个data属性是一个函数（可查看链接），因为组件是可以被复用的，如果定义一个对象然后修改某一个组件的话会影响另外的组件，所以这里定义成一个函数。这个函数return一个对象，对象里面有seller对象，先定为空，然后我们通过发送AJAX请求去拿到一个seller对象，然后send给它。这样就可以拿到seller对象的数据。 QUESTION 在vue组件中 import的是整个对应的组件还是该组件下 export 的对象？按照目前的理解应该是整个组件，但是根据ES6的说明，import传入的是export的对外对象，是否是webpack的编译缘故？ 2. 更详细，待续……参考博文1","tags":[{"name":"vue","slug":"vue","permalink":"https://wangxx1991.github.io/tags/vue/"}]},{"title":"github建站小纪","date":"2017-03-29T15:45:43.000Z","path":"2017/03/29/github建站小纪/","text":"Hexo + github建站过程中遇到的问题小结 安装Hexo, $ npm install hexo-cli -g 报错，Error: EPERM: operation not permitted, mkdir ‘C:\\Program Files\\nodejs\\node cache\\hexo-cli’ 需要在admin权限下操作 启动服务器，$ hexo s # 或者 hexo server ,无法正常打开http://localhost:4000/ 查看 原因：安装了福昕阅读器，4000端口被占，hexo s -p 5000 ，换成5000端口 部署网站$ hexo d ,报错：ERROR Deployer not found: git 需要npm install hexo-deployer-git –save（需要在当前文件下并且是管理员权限下） 修改博客样式中的头像信息？ 在themes\\yilia_config.yml 配置文件中","tags":[{"name":"hexo","slug":"hexo","permalink":"https://wangxx1991.github.io/tags/hexo/"}]},{"title":"vue-router摘要","date":"2017-03-28T15:41:29.000Z","path":"2017/03/28/vue-router摘要/","text":"vue-router学习记录 定义组件，从其他文件import过来 1import goods from 'components/goods/goods'; 如果使用模块化机制变成，导入vue和VueRouter ,要调用Vue.use(VueRouter); 1Vue.use(VueRouter); 定义路由，每个路由应该映射一个组件，其中“component”可以是通过Vue.extend()创建的组件构造器。或者只是一个组件配置对象; 1234const routes = [{ path: '/goods', component: goods}]; 注意格式，在项目中比较严格，格式错误也会报错. 创建router实例，然后传routes配置 123const router = new VueRouter({ routes}); 创建和挂载根实例。要通过router配置参数注入路由 1234new Vue({ router: router, render: h => h(App)}).$mount('#app'); 这里和官网介绍的不太一样，注意new前定一个const app会报错，”app 变量在接下来没有使用”，删除后正常。 0.7版本是先：let app = Vue.extend(App);然后router.start(app, ‘#app’);，2.0版本直接在new中.","tags":[{"name":"vue","slug":"vue","permalink":"https://wangxx1991.github.io/tags/vue/"}]},{"title":"my-first-blog","date":"2017-03-23T15:58:39.000Z","path":"2017/03/23/my-first-blog/","text":"##写在最前面 这是一篇写在本博客上的记录 终于在github上搞定了博客，以后就在此记录学习与生活吧。 其实我只是想测试下reade more的功能是否正常","tags":[{"name":"日常","slug":"日常","permalink":"https://wangxx1991.github.io/tags/日常/"}]}]