{"action":"created","issue":{"url":"https://api.github.com/repos/fuchao2012/blog/issues/17","repository_url":"https://api.github.com/repos/fuchao2012/blog","labels_url":"https://api.github.com/repos/fuchao2012/blog/issues/17/labels{/name}","comments_url":"https://api.github.com/repos/fuchao2012/blog/issues/17/comments","events_url":"https://api.github.com/repos/fuchao2012/blog/issues/17/events","html_url":"https://github.com/fuchao2012/blog/issues/17","id":187567269,"number":17,"title":"[读]Vue@2 官方文档","user":{"login":"fuchao2012","id":5637185,"avatar_url":"https://avatars.githubusercontent.com/u/5637185?v=3","gravatar_id":"","url":"https://api.github.com/users/fuchao2012","html_url":"https://github.com/fuchao2012","followers_url":"https://api.github.com/users/fuchao2012/followers","following_url":"https://api.github.com/users/fuchao2012/following{/other_user}","gists_url":"https://api.github.com/users/fuchao2012/gists{/gist_id}","starred_url":"https://api.github.com/users/fuchao2012/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fuchao2012/subscriptions","organizations_url":"https://api.github.com/users/fuchao2012/orgs","repos_url":"https://api.github.com/users/fuchao2012/repos","events_url":"https://api.github.com/users/fuchao2012/events{/privacy}","received_events_url":"https://api.github.com/users/fuchao2012/received_events","type":"User","site_admin":false},"labels":[{"id":327494537,"url":"https://api.github.com/repos/fuchao2012/blog/labels/Vue","name":"Vue","color":"ffffff","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/fuchao2012/blog/milestones/2","html_url":"https://github.com/fuchao2012/blog/milestones/2016.11","labels_url":"https://api.github.com/repos/fuchao2012/blog/milestones/2/labels","id":2061556,"number":2,"title":"2016.11","description":"十一月份的博客\r\n精彩博客选：\r\n1. 占位\r\n2. 占位\r\n3. 占位\r\n","creator":{"login":"fuchao2012","id":5637185,"avatar_url":"https://avatars.githubusercontent.com/u/5637185?v=3","gravatar_id":"","url":"https://api.github.com/users/fuchao2012","html_url":"https://github.com/fuchao2012","followers_url":"https://api.github.com/users/fuchao2012/followers","following_url":"https://api.github.com/users/fuchao2012/following{/other_user}","gists_url":"https://api.github.com/users/fuchao2012/gists{/gist_id}","starred_url":"https://api.github.com/users/fuchao2012/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fuchao2012/subscriptions","organizations_url":"https://api.github.com/users/fuchao2012/orgs","repos_url":"https://api.github.com/users/fuchao2012/repos","events_url":"https://api.github.com/users/fuchao2012/events{/privacy}","received_events_url":"https://api.github.com/users/fuchao2012/received_events","type":"User","site_admin":false},"open_issues":2,"closed_issues":0,"state":"open","created_at":"2016-10-11T08:40:51Z","updated_at":"2016-11-07T07:22:02Z","due_on":null,"closed_at":null},"comments":9,"created_at":"2016-11-06T15:16:33Z","updated_at":"2016-11-08T10:17:06Z","closed_at":null,"body":"# 除了做搬运工作，还对文稿进行了一遍审核和标注，[原文在这里](http://vue.sike.io)\r\n\r\n## 兼容性\r\n\r\n由于 Vue 的实现基于 ES2015,所以不支持 IE8及以下版本。\r\n\r\n### 更新日志\r\n\r\n每个版本的更新日志见 [GitHub](https://github.com/vuejs/vue/releases)。\r\n\r\n## 独立版本\r\n\r\n直接下载并用 `<script>` 标签引入，Vue 会被注册为一个全局变量。重要提示：在开发时请用开发版本，遇到常见错误它会给出友好的警告。\r\n\r\n_开发环境不要用最小压缩版，不然就失去了错误提示和警告!_\r\n\r\n> 开发版本:  包含完整的警告和调试模式\r\n\r\n> 生产版本:\t删除了警告，**22.58kb** min+gzip\r\n## CDN\r\n\r\n推荐：unpkg, 会保持和 npm 发布的最新的版本一致。可以在 unpkg.com/vue/ 浏览 npm 包资源。\r\n\r\n也可以从 jsdelivr 或 cdnjs 获取，不过这两个服务版本更新可能略滞后。\r\n\r\n## NPM\r\n\r\n在用 Vue.js 构建大型应用时推荐使用 NPM 安装， NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。 Vue.js 也提供配套工具来开发单文件组件。\r\n\r\n### 最新稳定版\r\n\r\n```\r\n$ npm install vue\r\n```\r\n## 独立构建 vs. 运行时构建（vue-cli 会问你这个问题）\r\n\r\n有两种构建方式，独立构建和运行构建。\r\n\r\n* 独立构建包括编译和支持 template 选项。 它也依赖于浏览器的接口的存在，所以你 _不能使用它来为服务器端渲染_ 。\r\n\r\n* 运行时构建不包括模板编译，不支持 template 选项。运行时构建，可以用 render 选项，但它只在单文件组件中起作用，因为单文件组件的模板是在构建时预编译到 render 函数中，运行时构建只有独立构建大小的30%，只有 16Kb min+gzip大小。\r\n\r\n默认 NPM 包导出的是 运行时 构建。为了使用独立构建，在 webpack 配置中添加下面的别名：\r\n\r\n\r\n```\r\nresolve: {\r\n  alias: {\r\n    vue: 'vue/dist/vue.js'\r\n  }\r\n}\r\n```\r\n对于Browserify，可以用 aliasify\r\n\r\n_不要用 import Vue from 'vue/dist/vue.js' - 用一些工具或第三方库引入 Vue ，这可能会导致应用程序在同一时间加载运行时和独立构建并造成错误。_\r\n\r\n## CSP 环境\r\n\r\n有些环境，如 Google Chrome Apps ，强制应用内容安全策略 (CSP) ，不能使用 new Function() 对表达式求值。这时可以用 CSP 兼容版本。独立的构建取决于该功能编译模板，所以无法使用这些环境。\r\n\r\n另一方面，运行时构建的是完全兼容 CSP 的。当通过 Webpack + vue-loader 或者 Browserify + vueify 构建时，在 CSP 环境中模板将被完美预编译到 render 函数中。\r\n\r\n## 命令行工具\r\n\r\nVue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：\r\n\r\n```\r\n# 全局安装 vue-cli\r\n$ npm install --global vue-cli\r\n# 创建一个基于 webpack 模板的新项目\r\n$  vue init webpack my-project\r\n# 安装依赖，走你\r\n$ cd my-project\r\n$ cnpm i\r\n$ npm run dev\r\n```\r\n## 开发版本\r\n\r\n重要: 在发布后构建的文件在 Github 仓库的 /dist 文件夹。为了使用 Github 上 Vue 最新的资源，你得自己构建。\r\n\r\n```\r\ngit clone https://github.com/vuejs/vue.git node_modules/vue\r\ncd node_modules/vue\r\nnpm install\r\nnpm run build\r\n```\r\n## Bower\r\n\r\n```\r\n# 最新稳定版本\r\n$ bower install vue\r\n\r\n```\r\n### AMD 模块加载器\r\n\r\n独立下载版本或通过 Bower 安装的版本已用 UMD 包装，因此它们可以直接用作 AMD 模块。\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/fuchao2012/blog/issues/comments/259098406","html_url":"https://github.com/fuchao2012/blog/issues/17#issuecomment-259098406","issue_url":"https://api.github.com/repos/fuchao2012/blog/issues/17","id":259098406,"user":{"login":"fuchao2012","id":5637185,"avatar_url":"https://avatars.githubusercontent.com/u/5637185?v=3","gravatar_id":"","url":"https://api.github.com/users/fuchao2012","html_url":"https://github.com/fuchao2012","followers_url":"https://api.github.com/users/fuchao2012/followers","following_url":"https://api.github.com/users/fuchao2012/following{/other_user}","gists_url":"https://api.github.com/users/fuchao2012/gists{/gist_id}","starred_url":"https://api.github.com/users/fuchao2012/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fuchao2012/subscriptions","organizations_url":"https://api.github.com/users/fuchao2012/orgs","repos_url":"https://api.github.com/users/fuchao2012/repos","events_url":"https://api.github.com/users/fuchao2012/events{/privacy}","received_events_url":"https://api.github.com/users/fuchao2012/received_events","type":"User","site_admin":false},"created_at":"2016-11-08T10:17:06Z","updated_at":"2016-11-08T10:17:06Z","body":"# 表单控件绑定\r\n\r\n## 基础用法\r\n\r\n你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。\r\n\r\nv-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。\r\n\r\n### 文本 ipt:text\r\n\r\n```\r\n<input v-model=\"message\" placeholder=\"edit me\">\r\n<p>Message is: {{ message }}</p>\r\n```\r\n### 多行文本 textarea\r\n\r\n```\r\n<span>Multiline message is:</span>\r\n<p>{{ message }}</p>\r\n<br>\r\n<textarea v-model=\"message\" placeholder=\"add multiple lines\"></textarea>\r\n```\r\n\r\n在文本区域插值( `<textarea></textarea>`) 并不会生效，应用 v-model 来代替\r\n\r\n### 复选框 ipt:checkbox\r\n\r\n单个勾选框，逻辑值：\r\n\r\n```\r\n<input type=\"checkbox\" id=\"checkbox\" v-model=\"checked\">\r\n<label for=\"checkbox\">{{ checked }}</label>\r\n```\r\n\r\n多个勾选框，**绑定到同一个数组**：\r\n\r\n```\r\n<input type=\"checkbox\" id=\"jack\" value=\"Jack\" v-model=\"checkedNames\">\r\n<label for=\"jack\">Jack</label>\r\n<input type=\"checkbox\" id=\"john\" value=\"John\" v-model=\"checkedNames\">\r\n<label for=\"john\">John</label>\r\n<input type=\"checkbox\" id=\"mike\" value=\"Mike\" v-model=\"checkedNames\">\r\n<label for=\"mike\">Mike</label>\r\n<br>\r\n<span>Checked names: {{ checkedNames }}</span>\r\nnew Vue({\r\n  el: '...',\r\n  data: {\r\n    checkedNames: []\r\n  }\r\n})\r\n```\r\n\r\n### 单选按钮 ipt:radio\r\n\r\n```\r\n<input type=\"radio\" id=\"one\" value=\"One\" v-model=\"picked\">\r\n<label for=\"one\">One</label>\r\n<br>\r\n<input type=\"radio\" id=\"two\" value=\"Two\" v-model=\"picked\">\r\n<label for=\"two\">Two</label>\r\n<br>\r\n<span>Picked: {{ picked }}</span>\r\n```\r\n\r\n### 选择列表\r\n\r\n单选列表:\r\n\r\n```\r\n<select v-model=\"selected\">\r\n  <option>A</option>\r\n  <option>B</option>\r\n  <option>C</option>\r\n</select>\r\n<span>Selected: {{ selected }}</span>\r\n\r\n``` \r\n\r\n多选列表（绑定到一个数组）：\r\n\r\n```\r\n<select v-model=\"selected\" multiple>\r\n  <option>A</option>\r\n  <option>B</option>\r\n  <option>C</option>\r\n</select>\r\n<br>\r\n<span>Selected: {{ selected }}</span>\r\n```\r\n\r\n动态选项，用 v-for 渲染：\r\n\r\n```\r\n<select v-model=\"selected\">\r\n  <option v-for=\"option in options\" :value=\"option.value\">\r\n    {{ option.text }}\r\n  </option>\r\n</select>\r\n<span>Selected: {{ selected }}</span>\r\nnew Vue({\r\n  el: '...',\r\n  data: {\r\n    selected: 'A',\r\n    options: [\r\n      { text: 'One', value: 'A' },\r\n      { text: 'Two', value: 'B' },\r\n      { text: 'Three', value: 'C' }\r\n    ]\r\n  }\r\n})\r\n\r\n``` \r\n## 绑定 value\r\n\r\n对于单选按钮，勾选框及选择列表选项， v-model 绑定的 **value 通常是静态字符串**（对于勾选框是逻辑值）：\r\n\r\n```\r\n<!-- 当选中时，`picked` 为字符串 \"a\" -->\r\n<input type=\"radio\" v-model=\"picked\" value=\"a\">\r\n<!-- `toggle` 为 true 或 false -->\r\n<input type=\"checkbox\" v-model=\"toggle\">\r\n<!-- 当选中时，`selected` 为字符串 \"abc\" -->\r\n<select v-model=\"selected\">\r\n  <option value=\"abc\">ABC</option>\r\n</select>\r\n```\r\n但是有时我们想绑定 value 到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。\r\n\r\n### 复选框\r\n\r\n```\r\n<input\r\n  type=\"checkbox\"\r\n  v-model=\"toggle\"\r\n  :true-value=\"a\"\r\n  :false-value=\"b\">\r\n// 当选中时\r\nvm.toggle === vm.a\r\n// 当没有选中时\r\nvm.toggle === vm.b\r\n\r\n```\r\n### 单选按钮\r\n\r\n```\r\n<input type=\"radio\" v-model=\"pick\" :value=\"a\">\r\n// 当选中时\r\nvm.pick === vm.a\r\n```\r\n### 选择列表设置\r\n\r\n```\r\n<select v-model=\"selected\">\r\n    <!-- 内联对象字面量 -->\r\n  <option :value=\"{ number: 123 }\">123</option>\r\n</select>\r\n// 当选中时\r\ntypeof vm.selected // -> 'object'\r\nvm.selected.number // -> 123\r\n\r\n```\r\n## 修饰符 （跟事件的修饰符一样用）\r\n\r\n### .lazy\r\n\r\n在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：\r\n\r\n```\r\n<!-- 在 \"change\" 而不是 \"input\" 事件中更新 -->\r\n<input v-model.lazy=\"msg\" >\r\n```\r\n### .number\r\n\r\n如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：\r\n\r\n```\r\n<input v-model.number=\"age\" type=\"number\">\r\n```\r\n这通常很有用，因为在 type=\"number\" 时 HTML 中输入的值也总是会返回字符串类型。\r\n\r\n### .trim\r\n\r\n如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：\r\n\r\n```\r\n<input v-model.trim=\"msg\">\r\n```\r\n\r\n"}}
{"actor":{"display_login":"fuchao2012"}}