{"action":"opened","issue":{"url":"https://api.github.com/repos/dinglittle/vue.js-start/issues/10","repository_url":"https://api.github.com/repos/dinglittle/vue.js-start","labels_url":"https://api.github.com/repos/dinglittle/vue.js-start/issues/10/labels{/name}","comments_url":"https://api.github.com/repos/dinglittle/vue.js-start/issues/10/comments","events_url":"https://api.github.com/repos/dinglittle/vue.js-start/issues/10/events","html_url":"https://github.com/dinglittle/vue.js-start/issues/10","id":272166062,"number":10,"title":"vue-txt  20171108","user":{"login":"dinglittle","id":17232138,"avatar_url":"https://avatars2.githubusercontent.com/u/17232138?v=4","gravatar_id":"","url":"https://api.github.com/users/dinglittle","html_url":"https://github.com/dinglittle","followers_url":"https://api.github.com/users/dinglittle/followers","following_url":"https://api.github.com/users/dinglittle/following{/other_user}","gists_url":"https://api.github.com/users/dinglittle/gists{/gist_id}","starred_url":"https://api.github.com/users/dinglittle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dinglittle/subscriptions","organizations_url":"https://api.github.com/users/dinglittle/orgs","repos_url":"https://api.github.com/users/dinglittle/repos","events_url":"https://api.github.com/users/dinglittle/events{/privacy}","received_events_url":"https://api.github.com/users/dinglittle/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-11-08T11:32:37Z","updated_at":"2017-11-08T11:32:37Z","closed_at":null,"author_association":"OWNER","body":"判断用户登录\r\n\r\n路由 beforeEach 拦截, 判断用户状态 如果登录, 就正常跳转, 非登录 , 跳到登录页\r\n\r\nvm.$el\r\nvm.$data\r\nvm.$watch\r\n\r\n\r\n页面\r\ninput v-model=\"answer\"\r\n{{ question }}\r\n\r\nwatch\r\nquesiotn:funciton(){\r\n\tthis.answer = 'waitting stop write\"\r\n\tvar vm = this;\r\n\tsetTimeout(funciton(){\r\n\t\tvm.getAnswer;\r\n\t},2000)\r\n}\r\n\r\nmethods\r\ngetAnswer:function(){\r\n\tif(this.quesion.indexOf('?') == -1){\r\n\t\tthis.answer = \"请以?结尾\"\r\n\t\treturn;\r\n\t}\r\n\tthis.answer = \"watting...\"\r\n}\r\n\r\n\r\nv-text  取消页面数据绑定, 在无值的时候  显示 {{}}\r\n<div v-text=\"msg\"></div>\r\n\r\n\r\nvue中computed计算属性,基于依赖进行缓存\r\n计算属性只有在它的相关依赖发生改变时,才会重新求值.\r\n多次访问同一个计算属性,结果不会变\r\n\r\nvue通过v-if配合key来判断用户or邮件输入\r\n<template v-if=\"loginType=='username'\">\r\n\t<label>Username</label>\r\n\t<input placeholder=\"Enter your username\" key=\"username-input\">\r\n</template>\r\n<template v-else>\r\n\t<label>Email</labe>\r\n\t<input placeholder=\"Enter your email address\" key=\"email-input\">\r\n</template>\r\n\r\n\r\n\r\nv-for和v-if配合使用\r\n<li v-for=\"todo in todos\" v-if=\"!todo.isComplete\">\r\n\t{{ todo }}\r\n</li>\r\n上面代码只传递了未 complete 的 todos\r\n\r\nv-for可以遍历 computed 处理过的数据\r\n<li v-for=\"n in eventNumbers\">{{n}}</li>\r\n\r\ncomputed:{\r\n\tevenNumbers: function(){\r\n\t\treturn this.numbers.filter(function(number){\r\n\t\t\treturn number % 2 == 0\r\n\t\t})\r\n\t}\r\n}\r\n\r\nv-for与组件的使用\r\n<input \r\n\tv-model=\"nextTodoText\" \r\n\tv-on:keyup.enter=\"addNewTodo\"\r\n\tplaceholder=\"Add a todo\"\r\n>\r\n<ul>\r\n\t<li \r\n\t\tis=\"toto-item\"\r\n\t\tv-for=\"(toto,index) in todos\"\r\n\t\tv-bind:title=\"todo.title\"\r\n\t\tv-on:remove=\"todos.splice(index,1)\"\r\n\t>{{todo.title}}</li>\r\n</ul>\r\n\r\n\r\ncomponent\r\ntemplate:'\\\r\n\t<li>\\\r\n\t\t{{ title }}\\\r\n\t\t<button @click=\"$emit(\\'remove\\')\")>X</button>\\\r\n\t</li>\r\n',\r\nprops:['title']\r\n\r\n\r\n自定义的 组件会被当作无效的内容,因此会导致错误的渲染结果\r\n解决方案: 使用特殊的 is 特性\r\n\r\n\r\n组件中\r\nprop是单向绑定的,当父组件的属性变化时,将传导给子组件,但是反过来不会\r\n这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解\r\n\r\n每次父组件更新时,子组件的所有prop都会更新为最新值,这意味着不应该在子组件内部改变prop\r\n否则,vue会在控制台给出警告\r\n\r\n两种情况,修改prop中数据:\r\n\r\n1.prop作为初始值传入后,子组件想把它当作局部数据来用\r\n\r\n2.prop作为原始数据传入,由子组件处理成其它数据输出\r\n\r\n解决方法:\r\n1.定义一个局部变量,并用prop的值初始化它\r\n\r\nprops:['initialCounter'],\r\ndata:function(){\r\n\treturn { counter: this.initialCounter }\r\n}\r\n\r\n2.定义一个计算属性,处理prop的值并返回\r\n\r\nprops:['size'],\r\ncomputed:{\r\n\tnormalizedSize:function(){\r\n\t\treturn this.size.trim().toLowerCase()\r\n\t}\r\n}\r\n\r\n组件不能是单独的字符串,必须有元素承载\r\n\r\n\r\n组件中的 props 参数不区分大小写(通常小写) 且必须是定义的, \r\n当通过 传参验证时,规则定义 也是小写, 不符合规则的传参会警告\r\n组件定义规则的时候,需要以对象的形式返回\r\n\r\nhtml:\r\n<li \r\n\tis=\"prop-reg\"\r\n\tv-for=\"item for [1,2,3]\"\r\n\tv-bind:prop=item\r\n></li>\r\n\r\ncomponent:\r\n\"prop-reg\":{\r\n\ttemplate:'</li>{{ propa }}-{{ propb }}-{{ propc }}-{{ propd }}-{{ prope }}-{{ propf }}',\r\n\tprops:{\r\n\t\r\n\t}\r\n}\r\n\r\n注意 prop 会在组件实例创建之前进行校验,所以在 default 或 validator 函数里,\r\n诸如 data computd 或 methods 等实例属性还无法使用.\r\n\r\n\r\nv-on自定义事件\r\n1.自定义组件,该组件 绑定一个自定义事件\r\n\r\n\r\ncomponent\r\n\r\n'button-counter':{\r\n\ttemplate:'<button v-on:click=\"incrementCounter\">{{ counter }}</button>',\r\n\tdata: function(){\r\n\t\treturn {\r\n\t\t\tcoutner: 0\r\n\t\t}\r\n\t},\r\n\tmethods: {\r\n\t\tincrementCounter: function(){\r\n\t\t\tthis.counter +=1\r\n\t\t\t// 广播 increment 事件\r\n\t\t\tthis.$emit('increment')\r\n\t\t}\r\n\t}\r\n}\r\n\r\nhtml\r\n页面监听到的方法是组件 emit 出来的 increment 自定义方法,这具方法 指向 全局方法\r\n<button-counter v-on:increment=\"incrementTotal\"></button-counter>\r\n\r\n全局方法\r\nmethods:{\r\n\tincrementTotal:function(){\r\n\t\tthis.total +=1\r\n\t}\r\n}\r\n\r\n该例子中,子组件已经和它外部完全解耦了,它所做的只是报告自己的内部事件,\r\n因为父组件可能会关心这些事件 "}}
{"actor":{"display_login":"dinglittle"}}