content.json

{"meta":{"title":"For You","subtitle":"Designed by XX","description":"Funny Website","author":"StarFishing","url":"http://starfishing.github.io"},"pages":[{"title":"留言板","date":"2018-08-03T04:18:05.000Z","updated":"2018-08-03T08:04:00.006Z","comments":true,"path":"message/index.html","permalink":"http://starfishing.github.io/message/index.html","excerpt":"","text":""},{"title":"404","date":"2018-08-01T03:26:26.000Z","updated":"2018-08-01T03:26:26.379Z","comments":true,"path":"404/index.html","permalink":"http://starfishing.github.io/404/index.html","excerpt":"","text":""},{"title":"search","date":"2018-08-01T03:26:08.000Z","updated":"2018-08-01T03:26:08.812Z","comments":true,"path":"search/index.html","permalink":"http://starfishing.github.io/search/index.html","excerpt":"","text":""},{"title":"分类","date":"2018-08-02T12:39:54.000Z","updated":"2018-08-03T08:46:25.920Z","comments":false,"path":"categories/index.html","permalink":"http://starfishing.github.io/categories/index.html","excerpt":"","text":""},{"title":"标签","date":"2018-08-02T12:52:18.000Z","updated":"2018-08-03T08:45:16.847Z","comments":false,"path":"tags/index.html","permalink":"http://starfishing.github.io/tags/index.html","excerpt":"","text":""},{"title":"About me(XL)","date":"2018-08-02T12:54:12.000Z","updated":"2018-10-10T13:33:36.321Z","comments":true,"path":"about/index.html","permalink":"http://starfishing.github.io/about/index.html","excerpt":"","text":"故事开始的地方每一篇博客都会认真对待，或赠与看到的你。 个人主页；项目演示：Tootips , 飘城旅行。前端开发 || PS || HTML || CSS || Node.js || vue.js"}],"posts":[{"title":"浏览器缓存","slug":"浏览器缓存","date":"2018-10-27T00:20:28.707Z","updated":"2018-10-27T00:19:35.904Z","comments":true,"path":"2018/10/27/浏览器缓存/","link":"","permalink":"http://starfishing.github.io/2018/10/27/浏览器缓存/","excerpt":"","text":"Cookie1、因为HTTP请求无状态，所以需要cookie去维持客户端状态 2、过期时间 expire 3、cookie的生成方式 ​ （一） http response header中的set-cookie ​ （二） js中可以通过document.cookie可以读写cookie 4、仅仅作为浏览器存储（大小4KB左右，能力被localstorage替代） 5、cookie中在相关域名下面 —— cdn的流量损耗 6、httponly LocalStorage1、HTML5设计出来专门用于浏览器存储的 2、大小为5M左右 3、仅在客户端使用，不和服务端进行通信 4、接口封装较好 5、浏览器本地缓存方案 SessionStorage1、会话级别的浏览器存储 2、大小为5M左右 3、仅在客户端使用，不和服务端进行通信 4、接口封装较好 5、对于表单信息的维护 IndexedDB1、IndexedDB 是一种低级API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据 的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据 来说，这种方法不太有用。IndexedDB提供了一个解决方案。 2、为应用创建离线版本 PWAPWA (Progressive Web Apps) 是一种 Web App 新模型，并不是具体指某一种前沿的技术或者某一 个单一的知识点，我们从英文缩写来看就能看出来，这是一个渐进式的 Web App，是通过一系列新 的 Web 特性，配合优秀的 UI 交互设计，逐步的增强 Web App 的用户体验。 1、可靠：在没有网络的环境中也能提供基本的页面访问，而不会出现“未连接到互联网”的页面。 2、快速：针对网页渲染及网络数据访问有较好优化。 3、融入（Engaging）：应用可以被增加到手机桌面，并且和普通应用一样有全屏、推送等特性。 4、lighthouse(下载地址) ​ https://lavas.baidu.com/doc-assets/lavas/vue/more/downloads/lighthouse_2.1.0_0.zip Service WorkerService Worker 是一个脚本，浏览器独立于当前网页，将其在后台运行,为实现一些不依赖页面或者 用户交互的特性打开了一扇大门。在未来这些特性将包括推送消息,背景后台同步， geofencing（地 理围栏定位），但它将推出的第一个首要特性，就是拦截和处理网络请求的能力，包括以编程方式 来管理被缓存的响应。","categories":[{"name":"缓存","slug":"缓存","permalink":"http://starfishing.github.io/categories/缓存/"}],"tags":[{"name":"缓存","slug":"缓存","permalink":"http://starfishing.github.io/tags/缓存/"}]},{"title":"jquery常用方法","slug":"jQuery","date":"2018-10-20T07:05:20.039Z","updated":"2018-10-20T07:17:49.173Z","comments":true,"path":"2018/10/20/jQuery/","link":"","permalink":"http://starfishing.github.io/2018/10/20/jQuery/","excerpt":"","text":"$(“#div”).text(“hello”)//text()方法，读取或设置元素的innerTest，函数没参数即读取 $(“image1”).attr(“src”,”www.baidu.com")//attr()方法，读取或者设置元素的属性。当有两个参数时，第二个参数为要设置的 属性值；$(“#link1”).removeAttr(“href”)//移除相应的属性 $(“#div”).css(“color”,”red”)//设置样式，一个参数为读取样式； //创建一个按钮，并且加载div1之后，添加点击事件，用slideUp方法收起div1; $("<input type="button" value="动画" />").insertAfter($div1).click(function(){$div1.slideUp(3000);}); map()和each()区别 //map的回调函数参数为index，value。而each相反函数内 return true 相当于 continue，return false 相当于 break； 过滤器:even//选偶数$(“th:even”).css(“bacground-color”,”grey”)将所有偶数表头变为灰色背景:odd//选奇数 内容选择器:contains//按内容匹配 ,$(“div:contains(“hello”)”).css(“color”,”grey”)匹配div中文本包含hello的dom元素:has(selector)//参数为选择器，比如p,div,span等； 属性选择器[attribute]//$(“[class]”)匹配所有包含class属性的元素 [attribute=value]//$(“[class=’native’]”)匹配所有包含class属性为native的元素 [attribute!=value]//$(“[id！=4]”)匹配所有id不为4的元素 [attribute$=value]//$(“[id$=4]”)匹配所有id以4结尾的元素 [attribute=value]//$(“[id=4]”)匹配所有id包含4的元素 [attribute^=value]//$(“[id^=4]”)匹配所有id以4开始的元素 [selector1][selector2][selectorN]//$(“input[id][name$=’man’]”)匹配input元素包含id属性，并且name属性以man结尾的元素 toggleClass(class)//$(“#p1”).toggleClass(“blue”);如果该元素有blue这个类，则删除该类，如果没有，则添加该类；toggleClass(class,switch); 1234567891011121314151617181920212223<script type="text/javascript"> $(document).ready(function(){ var count=1; $("#div1").click(function(){ //单击id为p1的元素，如果后面表达式为true，删除前面的类，否则添加前面的类； //$(this).toggleClass("blue");//,count++%2==0 $(this).toggleClass(function(){ if(count++%2==0) { $(this).removeAttr("class","bgred") return "blue"; } else { $(this).removeAttr("class","bgred") return "bgred"; } });});})</script>","categories":[{"name":"create","slug":"create","permalink":"http://starfishing.github.io/categories/create/"}],"tags":[{"name":"jquery方法（一）","slug":"jquery方法（一）","permalink":"http://starfishing.github.io/tags/jquery方法（一）/"}]},{"title":"js常用数组操作方法","slug":"js常用数组操作方法","date":"2018-10-20T07:02:08.910Z","updated":"2018-10-20T07:02:08.912Z","comments":true,"path":"2018/10/20/js常用数组操作方法/","link":"","permalink":"http://starfishing.github.io/2018/10/20/js常用数组操作方法/","excerpt":"","text":"indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 stringObject.indexOf(searchvalue,fromindex)参数 描述searchvalue 必需。规定需检索的字符串值。 fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。 ​ 如省略该参数，则将从字符串的首字符开始检索。 charAt(i); 获取字符串中对应索引的字符 sort() 方法用于对数组的元素进行排序。arrayObject.sort(sortby),参数可选，规定排序顺序，必须是函数。 ​ 如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序 ​ 进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。如果想按照其他标准进行排序， 就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。 比较函数应该具有两个参数 a 和 b，其返回值如下： 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。 若 a 等于 b，则返回 0。 若 a 大于 b，则返回一个大于 0 的值。 Object.keys(obj)//obj要返回可枚举的属性的对象。返回值：一个字符串数组，表示给定对象的所有可枚举属性。 /**const object1 = { a: ‘somestring’, b: 42, c: false}; console.log(Object.keys(object1));// expected output: Array [“a”, “b”, “c”]**/ map()/forEach()/filter() map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。 map() 方法按照原始数组元素顺序依次处理元素。注意： map() 不会对空数组进行检测。注意： map() 不会改变原始数组。array.map(function(currentValue,index,arr), thisValue)function(currentValue, index,arr) 必须。函数，数组中的每个元素都会执行这个函数currentValue 必须。当前元素的值index 可选。当前元素的索引值arr 可选。当前元素属于的数组对象thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，”this” 的值为 “undefined” //数组去重方法//Set数据结构，它类似于数组，其成员的值都是唯一的，利用Array.from将Set结构转换成数组//方法一,可快速返回去重后的数组 123456function dedupe(arr){ return Array.from(new Set(arr))}var arr=[1,2,3,2,2,1,4]console.log(dedupe(arr));//[1,2,3,4] //方法二，可去重，也可用来返回删掉的数组 1234567891011121314151617Array.prototype.distinct=function(){ var arr=this, result=[], len=arr.length; arr.forEach(function(v,i,arr)//也可以利用map,filter方法 { var bool=arr.indexOf(v,i+1);//从传入参数的下一个索引值开始寻找是否存在重复 if(bool==-1){ result.push(v); }})return result;}var arr=[1,2,3,2,2,1,4]console.log(arr.distinct());//[1,2,3,4] //查找字符串中出现次数最多的字符 12345678910111213141516171819202122232425262728293031var str = "nininihaoa";var obj= {};//定义一个存储键值对的对象，存储每个字符和其对应的次数for (var i = 0, length = str.length; i < length; i++) {//获取每个下标对应的字符，charAt函数用来返回索引为i对应的字符 var char = str.charAt(i);//判断对象中是否已经存在该字符属性if (obj[char]) { obj[char]++; //次数加1} else { obj[char] = 1; //若第一次出现，将该字符作为属性添加进对象，并且设置属性值即次数记为1}}console.log(obj); //输出的是完整的对象，记录着每一个字符及其出现的次数//遍历对象，找到出现次数最多的字符的次数var max = 0;for (var key in obj) {if (max < obj[key]) {max = obj[key]; //max始终储存次数最大的那个}}for (var key in obj) {if (obj[key] == max) {//console.log(key);console.log("最多的字符是" + key);console.log("出现的次数是" + max);}}","categories":[{"name":"js","slug":"js","permalink":"http://starfishing.github.io/categories/js/"}],"tags":[{"name":"js数组操作方法","slug":"js数组操作方法","permalink":"http://starfishing.github.io/tags/js数组操作方法/"}]},{"title":"vue2.0 过渡效果（transition）","slug":"vue-tansition过渡","date":"2018-10-16T08:36:53.701Z","updated":"2018-10-16T10:03:56.977Z","comments":true,"path":"2018/10/16/vue-tansition过渡/","link":"","permalink":"http://starfishing.github.io/2018/10/16/vue-tansition过渡/","excerpt":"","text":"vue2.0 过渡效果（transition）在进入/离开的过渡中，会有 6 个 class 切换。1、v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 2、v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 3、v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。 4、v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 5、v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 6、v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。 1234567891011121314151617/**声明$取父元素的类，即要过渡的元素需要父元素的包裹，也就是transition标签；*/&.fade-enter-to/*过渡完成后的状态，在过渡效果持续时间结束后下一帧移除*/ opacity: 1 background: rgba(7, 17, 27, .8) &.fade-enter, &.fade-leave-to/*过渡开始进入以及离开后的状态*/ opacity: 0 background: rgba(7, 17, 27, 0) &.fade-leave/*过渡从当前开始离开的状态，一般与fade-enter-to保持一致*/ opacity: 1 background: rgba(7, 17, 27, .8) &.fade-enter-active/*定义过渡从开始到完全进入的持续时间*/ transition: all .7s ease &.fade-leave-active/*定义过渡从开始离开到完全离开的持续时间*/ transition: all .7s ease background-color: rgba(7, 17, 27, .8) 12345<transition name="fade"><div v-if="show"><p>你好啊</p></div></transition>","categories":[{"name":"vue","slug":"vue","permalink":"http://starfishing.github.io/categories/vue/"}],"tags":[{"name":"vue transition","slug":"vue-transition","permalink":"http://starfishing.github.io/tags/vue-transition/"}]},{"title":"vue项目开发-前期了解","slug":"Vue项目开发","date":"2018-10-15T14:02:44.963Z","updated":"2018-10-16T10:36:47.989Z","comments":true,"path":"2018/10/15/Vue项目开发/","link":"","permalink":"http://starfishing.github.io/2018/10/15/Vue项目开发/","excerpt":"","text":"Vue.js 后端：vue-resource; 前端：vue-router; 功能分析：第三方js库better-scroll、最大程度组件化，html5的localstorage、图标字体的使用、移动端1像素边框、css sticky footer布局、flex弹性布局； MVVM框架 ​ MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。 ​ 在视图（View）部分，通常也就是一个Aspx页面。在以前设计模式中由于没有清晰的职责划分，UI 层经常成为逻辑层的全能代理，而后者实际上属于应用程序的其他层。MVP 里的M 其实和MVC里的M是一个，都是封装了核心数据、逻辑和功能的计算关系的模型，而V是视图（窗体），P就是封装了窗体中的所有操作、响应用户的输入输出、事件等，与MVC里的C差不多，区别是MVC是系统级架构的，而MVP是用在某个特定页面上的，也就是说MVP的灵活性要远远大于MVC，实现起来也极为简单。 View ViewModel Model 视图（DOM） 通讯（观察者） 数据（js对象） 针对具有复杂交互逻辑的前端应用； 提供基础的架构对象； 通过Ajax数据持久化，保证前端用户体验 MVVM优点MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点 1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。 2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。 3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。 4. 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。 组件化扩展HTML元素，封装可重用代码； 组件设计原则页面上每个独立的可视化/可交互区域视为一个组件； 每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护； 页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面；","categories":[{"name":"vue","slug":"vue","permalink":"http://starfishing.github.io/categories/vue/"}],"tags":[{"name":"vue项目开发","slug":"vue项目开发","permalink":"http://starfishing.github.io/tags/vue项目开发/"}]},{"title":"vue2.0用法分析","slug":"vue2.0用法分析","date":"2018-10-15T13:58:26.588Z","updated":"2018-10-16T05:21:37.378Z","comments":true,"path":"2018/10/15/vue2.0用法分析/","link":"","permalink":"http://starfishing.github.io/2018/10/15/vue2.0用法分析/","excerpt":"","text":"vue2.0用法分析 HTML 1234<body> <div id="app"></div> <!-- built files will be auto injected --> </body> js 1234567/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: '<App/>'});/*不需要使用$mount('#app')*/ 路由注册 12345678910111213141516171819202122var router = new Router({ routes: [ { path: '/goods', component: goods }, { path: '/ratings', component: ratings }, { path: '/seller', component: seller } ], linkActiveClass: 'Active'});//routes也可以单独写出来var routes={path: '/goods', component: goods};var router = new Router({ routes//等同于routes: routes}) <router-link to="/goods">商品</router-link> vue2.0用法，更改了1.0版本中的a标签包裹的写法，router-link会被解析成a标签； vue中 stylus文件引入npm install stylus stylus-loader --save-dev 或者在package.json文件中写好依赖(百度写法，很简单)，然后在执行npm install 代码规范问题 引入后空格和tab键问题报错 由于这个原因引起的错误需要在编辑器修改配置，以sublime为例，打开设置->用户设置 123456789101112{ "color_scheme": "Packages/Boxy Theme/schemes/Boxy Tomorrow.tmTheme", "font_size": 14, "ignored_packages": [ "Vintage" ], "theme": "Boxy Tomorrow.sublime-theme", "translate_tabs_to_spaces": true, "tab_size": 4, "expand_tabs_on_save": true} 图标字体制作文件导入问题由于制作好的图标字体分开放在了两个文件夹，所以要多css文件中引用的相关路径进行更改，否则找不到相关资源文件； 路由链接设置1234567891011<router-link to="home">Home</router-link> /*渲染的标签会默认加上exact-active-class类，也可以通过以下方式修改默认项*/exact-active-class - type: string - default: "router-link-exact-active" Configure the active CSS class applied when the link is active with exact match. Notethe default value can also be configured globally via the linkExactActiveClass router constructor option.方法演示var router = new Router({ linkExactActiveClass : Active/*Active为你自定义的样式*/}) Vue-ResourceVue.js的插件提供了使用XMLHttpRequest或JSONP 发出Web请求和处理响应的服务 ; 支持Promise API和URI模板 支持请求和响应的拦截器 支持最新的Firefox，Chrome，Safari，Opera和IE9 + 支持Vue 1.0和Vue 2.0 紧凑的大小14KB（压缩5.3KB） 使用方式1234567891011{ // GET /someUrl this.$http.get('/someUrl').then(response => { // get body data this.someData = response.body; }, response => { // error callback });} Documentation Configuration HTTP Requests/Response Creating Resources Code Recipes API Reference Response（常用函数返回值类型）A request resolves to a response object with the following properties and methods: Property Type Description url string Response URL origin body Object, Blob, string Response body headers Header Response Headers object ok boolean HTTP status code between 200 and 299 status number HTTP status code of the response statusText string HTTP status text of the response Method Type Description text() Promise Resolves the body as string json() Promise Resolves the body as parsed JSON object blob() Promise Resolves the body as Blob object","categories":[{"name":"vue","slug":"vue","permalink":"http://starfishing.github.io/categories/vue/"}],"tags":[{"name":"vue2.0用法分析","slug":"vue2-0用法分析","permalink":"http://starfishing.github.io/tags/vue2-0用法分析/"}]},{"title":"CSS Sticky footer完美底部布局","slug":"CSS Sticky footer完美底部布局","date":"2018-10-15T13:58:26.533Z","updated":"2018-10-16T05:20:42.777Z","comments":true,"path":"2018/10/15/CSS Sticky footer完美底部布局/","link":"","permalink":"http://starfishing.github.io/2018/10/15/CSS Sticky footer完美底部布局/","excerpt":"","text":"CSS Sticky footer完美底部布局html 结构：12345678<div class="container"> <div class="content-wrapper> <div class="content">内容区域，可随机长度</div> </div> <div class="close"><div><div class ="close">关闭图标</div>始终再底部. css代码：123456789101112131415161718192021222324.container{//总容器为全屏，所以高度为100％ positon: fiexd;//固定窗口，显示在最前 top:0; left:0; height:100%; width:100%; overflow: auto;//如果内容太长，会显示滚动条查看其余内容。 }.content-wrapper{ min-height: 100%;//如果内容不够长时，也保证内容有全屏长度}.content{ margin-top: 50px;//向上和屏幕顶部保持50px间距 padding-bottom: 50px;//保证内容content区域的底部有50px的空白}.close{ position: relative width: 32px; height: 32px; margin: -50px auto 0 auto; //让关闭按钮向content－wrapper里面伸入50px，正好把内容区的50px空白补上 clear: both; font-size: 32px;} 最终效果:","categories":[{"name":"CSS","slug":"CSS","permalink":"http://starfishing.github.io/categories/CSS/"}],"tags":[{"name":"CSS Sticky footer","slug":"CSS-Sticky-footer","permalink":"http://starfishing.github.io/tags/CSS-Sticky-footer/"}]},{"title":"Vue.js中data,props和computed数据","slug":"Vue.js中data,props和computed数据","date":"2018-10-15T03:20:03.397Z","updated":"2018-10-16T05:20:52.409Z","comments":true,"path":"2018/10/15/Vue.js中data,props和computed数据/","link":"","permalink":"http://starfishing.github.io/2018/10/15/Vue.js中data,props和computed数据/","excerpt":"","text":"Vue.js中data,props和computed数据data 是Vue实例的数据对象。Vue将会将data 的属性转换为 getter/setter, 也就是用Object.defineProperty方法(在官网里面有深入响应式原理里面具体的介绍)。对象必须是纯粹的对象(含有零个或多个的key/value对)。因为这里面的数据都是被监控的，所以说这里面的数据最好都是在视图层显示的数据。如果说不是在视图层展示的变量。可以定义在外面或者放在vm对象上。 data 类型：Object | Function 限制：组件的定义只接受 function。 详细： Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。 一旦观察过，不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。 实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a。 以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。 当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。 如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。 示例： 123456789101112131415var data = { a: 1 }// 直接创建一个实例var vm = new Vue({ data: data})vm.a // => 1vm.$data === data // => true// Vue.extend() 中 data 必须是函数var Component = Vue.extend({ data: function () { return { a: 1 } }}) 注意，如果你为 data 属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。 1data: vm => ({ a: vm.myProp }) propsprops 是props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代， 对象允许配置高级选项，如类型检测、自定义校验和设置默认值。 类型：Array<string> | Object 详细： props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。 示例： 123456789101112131415161718192021// 简单语法Vue.component('props-demo-simple', { props: ['size', 'myMessage']})// 对象语法，提供校验Vue.component('props-demo-advanced', { props: { // 检测类型 height: Number, // 检测类型 + 其他验证 age: { type: Number, default: 0, required: true, validator: function (value) { return value >= 0 } } }}) computed计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。不过计算属性也用 函数来替代。 类型：{ [key: string]: Function | { get: Function, set: Function } } 详细： 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。 123computed: { aDouble: vm => vm.a * 2} 计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。 示例： 12345678910111213141516171819202122var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // 读取和设置 aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } } }})vm.aPlus // => 2vm.aPlus = 3vm.a // => 2vm.aDouble // => 4 注意： 父组件改变props，子组件如果直接使用props，会触发子组件更新 父组件改变props，子组件如果将props放进data中再使用，不会触发子组件更新 父组件改变props，子组件如果将props放进computed中再使用，会触发子组件更新 data，props和computed的变化都会触发组件更新","categories":[{"name":"vue","slug":"vue","permalink":"http://starfishing.github.io/categories/vue/"}],"tags":[{"name":"vue.js","slug":"vue-js","permalink":"http://starfishing.github.io/tags/vue-js/"}]},{"title":"js笔记","slug":"js笔记","date":"2018-09-07T12:30:55.948Z","updated":"2018-09-12T13:01:30.199Z","comments":true,"path":"2018/09/07/js笔记/","link":"","permalink":"http://starfishing.github.io/2018/09/07/js笔记/","excerpt":"","text":"####null和undefined两者数值相等，类型不同 1if（null==undefined）返回true；if（null===undefined）返回false,两者不同类型； 123var test="2e3";test=parseFloat(test);//test=parseInt(test);alert(test)；2000（转换为float时会用科学计数法，结果为2000）//2（转换为int型结果为2） null支持自增自减（–、++）switch、case语句：若语句中没有break（在匹配到其中一个case的情况下），条件语句将会顺序执行，不会考虑下面case的情况,直到遇到break；若没有匹配的case，将会执行default，也会执行default下面的case（没有break的情况下）；1234567891011121314151617181920/*执行结果为 01case 02case 03case*/var i=1;switch (i){ case 1:document.write("01case"); case 2:document.write("02case"); case 3:document.write("03case");}/*执行结果为nofit 03case （当有brake时，执行结果为nofit）*/var i=5;switch (i){ case 1: document.write("01case"); case 2: document.write("02case"); default： document.write("nofit"); //break； case 3: document.write("03case");} continue语句跳过当前花括号内的语句；打印九九乘法表123456789101112document.write('<table border="1" cellpading="0" width="800">');for(var i=1;i<=9;i++)//for(var i=9;i>=1;i--)注释内容用来打印倒得乘法表 { document.write('<tr>'); for(var j=1;j<=i;j++)//for(var j=i;j>=1;j--) { document.write('<td bgcolor="grey">'+j+'x'+i+'='+i*j+'</td>') } document.write('</tr>'); } document.write('</table>'); 百钱买百鸡问题1234567891011121314var x,y,z;//x为公鸡数量，y为母鸡数量，z为小鸡数量 var cost;//费用 for(x=0;x<=20;x++){/*公鸡最多20只*/ for(y=0;y<=33;y++){/*母鸡最多33只*/ z=100-x-y; if(z%3==0){/*刚好满足小鸡数为整数，且刚好一百只鸡*/ cost=5*x+3*y+z/3; if(cost==100){ document.write("公鸡"+x+"只\\n"+"母鸡"+y+"只\\n"+"小鸡"+z+"只<br>"); } } } } 函数参数问题1234567function calc1(num1,num2){ num1=num1||1;/*当函数调用不给参数时，num会取值为1，当有参数时，使用原来的参数*/ num2=num2||2;/*同理*/ return (num1+num2); }calc1(); 可以通过arguments对象实现可变参数的函数，也可以实现默认值的效果；12345678910111213141516171819202122232425262728/*可变参数形式的函数*/function test(){ var paramsNum=arguments.length;/*得到传入参数的个数*/ var sum=0; for(var i=0;i<paramsNum;i++) { sum+=arguments[i]; } return sum; }function test1(){ //var x=arguments[0]||2; var x=arguments[0]?arguments[0]:2; /*同上一句话等价，但是三元运算符只对arguments对象生效*/ var y=arguments[1]||3; return (x+y);}document.write(test(1,3,6,7,9)+"</br>");//26document.write(test1(3,5)+"</br>");//8document.write(test1());//5 通过 isFinite()检测是否为无穷值（函数含义等同于判断这个数值是否有穷）；12var x=Infinity;/-Infinity,0/0alert(isFinite(x));//false 创建一个普通的空对象；12var obj=Object.create(Object.prototype);或者var obj=Object.create(null); hasOwnPropertype 检测某个对象是否含有指定的自身属性(不包括从Object继承而来的属性。var obj=Object.create({x:1})) 属性值中的get和set方法12345678910111213141516171819var obj={ x:1, y:2, z:3, get zhouchang() { return this.x+this.y+this.z; }, set doublecircle(val) { this.x*=val; this.y*=val; this.z*=val; }}document.write(obj.zhouchang);//没有该属性时调用get方法，返回结果6obj.doublecircle=3;//赋值时没有该属性，调用set方法document.write(obj.zhouchang);//18document.write(obj.x);//3，此时属性值被改变 获取对象属性值的三种方式12345for(var p in obj)Object.keys(obj)Object.getOwnPropertyNames(obj) 正则匹配。exec（string）函数1234567891011var str="this is a test hello maIzi hello world";var patt=/i/g;var arr;/*下次执行时会从已经匹配到的元素的下一个位置开始继续查找，但是每次只匹配一个，所以数组arr中只存在一个元素*/while((arr=patt.exec(str))!==null) { var msg='Find '+arr[0]+'!'; msg+='the next position is '+patt.lastIndex; console.log(msg); } unshift 向数组头部添加元素 。shift将素组元素从头部压出。123456/*声明新数组*/var arr=[]; /*向数组头部添加元素* 代码注释部分为从尾部向数组假如元素，也从尾部删除*/arr.unshift(1,2,3,'test',null);//arr.push('c','f',1,4,undefinde);/*从头部删除元素*/arr.shift();//arr.pop(); 对浏览器适配以及监听等方法的封装12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061var EventUtil={addHandle:function(element,type,handle){if(element.addEventListener){/*添加监听*/ element.addEventListener(type,handle,false);}else if(element.attachEvent){ element.attachEvent('on'+type,handle);}else{ element['on'+type]=handle;}},removeHandler:function(element,type,handle){/*移除监听*/ if(element.removeEventListener){ element.removeEventListener(type,handle,false); } else if(element.datachEvent){ element.datachEvent('on'+type,handle); } else{ element['on'+type]=null; }}，getTarget:function(event){ return event.target||event.srcElement;},getEvent:function(event){ /*获取事件对象*/ return event?event:window.event;},preventDefault:function(event){//*取消默认事件*/if(event.preventDefault){ event.preventDefault();}else { event.returnValue=false;}},stopPropagation:function(event){ /*取消冒泡*/ if(event.stopPropagation){ event.stopPropagation(); } else { event.cancelBubble=true; }}}; 对封装的函数进行测试123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778<!DOCTYPE html><html><head> <script type="text/javascript" src="EventUtil.js"></script> <meta charset="utf-8"> <title>事件</title></head><body><input type="button" id="btn1" value="按钮一" /><input type="button" id="btn2" value="按钮二" /><input type="button" id="btn3" value="按钮三" /><script type="text/javascript">var btn1=document.getElementById("btn1");var btn3=document.getElementById("btn3");var btn2=document.getElementById("btn2");/*var count=0;btn1.onclick=function(){ alert("按钮点击事件"+count++); if(count==2) { btn1.onclick=null; }}*//*false表明按冒泡顺序弹出，true为捕获截断，即从外往里，先是document，然后HTML....*//*var count=0;var handle2=function(){ alert("成功移除");}var handle1=function(){alert("按钮点击事件次数"+count++); if(count==2) { btn1.removeEventListener('click',handle1,false); }}//btn1.addEventListener('click',handle1,false);EventUtil.addHandle(btn1,'click',handle1);*/ /*var e=e||window.event; if(typeof e.cancelBubble=='undefinded') { e.stopPropagation(); } else { e.cancelBubble=true; }*/ /*btn1.onclick=function(){ alert("按钮点击事件");}*//*function test() { alert("按钮点击事件")；}*/var test2=function(){ alert("按钮点击事件");};EventUtil.addHandle(btn2,'click',test2);var test3=function(){alert('事件移除');EventUtil.removeHandler(btn2,'click',test2);};EventUtil.addHandle(btn3,'click',test3);</script></body></html> 关于自调用函数及闭包问题12345678910111213141516171819202122/*将函数指定给变量的形式*/var g=function(){ console.log("excel g"); }/*自调用函数*/(function(){ var a=6; var b=5; function f() { alert(a); } window.f=f;})();f(); 首先我们看自调用函数部分，指定window.f=f；（如果需要的函数比较多，都可以按同样的方式指定，以便在外部调用）目的是在自调用函数外部可以直接使用f（）来调用我们需要的函数，之所以要用这种方式是因为可以减少全局变量的声明，并且不会再函数执行完销毁变量，可以让声明的变量一直在系统中占有一定内存，不会销毁，也实现了js的闭包。 其次上面两块代码存在问题，在按上述方式写后，系统会执行并没有调用的g()函数，而不会再往下执行自调用函数，也就是说按上面方式生命的函数g（）,不可以与自调用函数共存，需要用字面量形式或者函数名的形式声明函数，避免程序出现错误。 闭包的理解12345678910111213function f(){ var a=2; var b=23; return function f2() { alert(a+b); } }var res=f();res();在跳出f()函数外面。里面的函数f2()仍然可以调用f()的词法环境，内部函数的scope保存了f()的词法环境，这也是闭包的特性；","categories":[{"name":"javascript","slug":"javascript","permalink":"http://starfishing.github.io/categories/javascript/"}],"tags":[{"name":"js","slug":"js","permalink":"http://starfishing.github.io/tags/js/"}]},{"title":"常用工具网站","slug":"01","date":"2018-08-06T14:56:04.380Z","updated":"2018-08-07T01:45:16.056Z","comments":true,"path":"2018/08/06/01/","link":"","permalink":"http://starfishing.github.io/2018/08/06/01/","excerpt":"这里包含了许多的创意网站，一些使用指导，和有趣的软件；","text":"这里包含了许多的创意网站，一些使用指导，和有趣的软件； 一、HTML&&CSS常用网站这部分包含了一些实用的网站，包括网页加载时的等待图标（跟进度条效果类似），以及让CSS样式对各个浏览器适配的网站。 1.按钮效果；这是一个包含了多种按钮效果的网站，里面是用HTML+CSS实现动态效果，你可以查看这个网址CreativeLinkEffects； 2.网页加载进度条这里拥有你所需要的绝大多数样式，你可以选择样式，将CSS文件复制到你的工程，这里提供两个网站preloaders和 loading； 3.CSS在线格式转换去掉繁琐的步骤，直接将你的CSS文件进行浏览器文件适配，你可以将转换好的文件拷贝会你的工程，请点击一下网址 Autoprefixer进行查看使用； 二、教程指导&&实用网址这里包含了搭建博客的教程网站以及一些用到的第三方数据存储端，还有一些平时会用到的小的实用网站； 1.视频解析网站利用这个网站可以省去你开会员的money，只需要将视频网址复制到这里 视频解析 就可以查看你需要的视频； 2.常用教程指导 windows下安装MySQL； 快速搭建属于自己的博客； 用hexo搭建自己的博客； nodejs安装及环境配置； 本博客主题； SQLyog破解； 3.在线图片瘦身 将你的图片在保持不破损的情况下进行压缩，减小图片大小，提高加载速度; 4.七牛七牛是一个很好用的图床，将你的图片上传到这里； 5.创意网站创造狮； 6.数据管理 LeanCloud 为开发者提供一流的工具、平台和服务，为应用开发加速。为移动开发提供强有力的后端支持。可以很方便的对你的博客文章访问量进行统计。 7.二维码生成器这是一个方便快捷生成自己想要的 二维码 的网站。你可以将网址、文本、或者生成自己名片二维码。","categories":[{"name":"工具","slug":"工具","permalink":"http://starfishing.github.io/categories/工具/"}],"tags":[{"name":"HTML，CSS，HEXO，Node.js","slug":"HTML，CSS，HEXO，Node-js","permalink":"http://starfishing.github.io/tags/HTML，CSS，HEXO，Node-js/"}]}]}