├── src ├── CNAME ├── index.md ├── images │ ├── hn.png │ ├── data.png │ ├── mvvm.png │ ├── state.png │ ├── components.png │ ├── lifecycle.png │ ├── props-events.png │ ├── vue-component.png │ ├── hn-architecture.png │ └── vue-component-with-preprocessors.png ├── v2 │ ├── examples │ │ ├── elastic-header.md │ │ ├── index.md │ │ ├── grid-component.md │ │ ├── tree-view.md │ │ ├── svg.md │ │ ├── modal.md │ │ ├── select2.md │ │ ├── commits.md │ │ ├── firebase.md │ │ ├── todomvc.md │ │ └── hackernews.md │ ├── guide │ │ ├── ssr.md │ │ ├── routing.md │ │ ├── deployment.md │ │ ├── plugins.md │ │ ├── join.md │ │ ├── state-management.md │ │ ├── migration-vuex.md │ │ ├── instance.md │ │ ├── single-file-components.md │ │ ├── mixins.md │ │ ├── unit-testing.md │ │ ├── installation.md │ │ ├── reactivity.md │ │ ├── class-and-style.md │ │ ├── custom-directive.md │ │ ├── syntax.md │ │ ├── conditional.md │ │ └── events.md │ └── cookbook │ │ ├── index.md │ │ └── adding-instance-properties.md ├── _posts │ ├── vue-011-release.md │ ├── vue-next.md │ ├── 011-component.md │ ├── why-no-template-url.md │ ├── vue-cli.md │ ├── common-gotchas.md │ ├── 1.0.0-release.md │ ├── vuejs-010-release.md │ ├── march-update.md │ ├── announcing-2.0.md │ └── 012-release.md ├── about │ ├── guide.md │ └── index.md └── support-vuejs │ └── index.md ├── themes └── vue │ ├── layout │ ├── partials │ │ ├── ad.ejs │ │ ├── ga.ejs │ │ ├── header.ejs │ │ ├── community_dropdown.ejs │ │ ├── language_dropdown.ejs │ │ ├── main_menu.ejs │ │ ├── ecosystem_dropdown.ejs │ │ ├── sponsors.ejs │ │ ├── sidebar.ejs │ │ └── contributors.ejs │ ├── post.ejs │ ├── page.ejs │ ├── index.ejs │ └── layout.ejs │ ├── source │ ├── images │ │ ├── down.png │ │ ├── feed.png │ │ ├── logo.png │ │ ├── menu.png │ │ ├── tde.png │ │ ├── 2mhost.png │ │ ├── check.png │ │ ├── icons.png │ │ ├── juejin.png │ │ ├── paypal.png │ │ ├── search.png │ │ ├── stdlib.png │ │ ├── actualize.png │ │ ├── chaitin.png │ │ ├── fancygrid.png │ │ ├── itunescn.png │ │ ├── jsfiddle.png │ │ ├── laravel.png │ │ ├── monterail.png │ │ ├── patreon.png │ │ ├── someline.png │ │ ├── tmvuejs2.png │ │ ├── trisoft.png │ │ ├── vuejobs.png │ │ ├── deepstream.png │ │ ├── famebroker.png │ │ ├── htmlburger.png │ │ ├── strikingly.png │ │ ├── transition.png │ │ ├── upyun-large.png │ │ ├── upyun-main.jpg │ │ ├── upyun-small.png │ │ ├── component_io.png │ │ ├── upyun-main-2.jpg │ │ ├── upyun-main-3.jpg │ │ └── vuejobs.svg │ ├── fonts │ │ ├── Roboto_Mono │ │ │ └── RobotoMono-Regular.ttf │ │ └── Source_Sans_Pro │ │ │ ├── SourceSansPro-Light.ttf │ │ │ ├── SourceSansPro-Regular.ttf │ │ │ ├── SourceSansPro-Semibold.ttf │ │ │ └── OFL.txt │ ├── css │ │ ├── _sponsor.styl │ │ ├── _migration.styl │ │ ├── _fonts.styl │ │ ├── benchmark.styl │ │ ├── _settings.styl │ │ ├── search.styl │ │ ├── _syntax.styl │ │ ├── _demo.styl │ │ ├── _header.styl │ │ ├── _sidebar.styl │ │ ├── index.styl │ │ ├── _common.styl │ │ └── page.styl │ └── js │ │ └── smooth-scroll.min.js │ └── _config.yml ├── assets ├── logo.ai ├── state.ai ├── icons.psd └── lifecycle.ai ├── README.md ├── .gitignore ├── Makefile ├── server.js ├── package.json ├── LICENSE ├── update.js └── _config.yml /src/CNAME: -------------------------------------------------------------------------------- 1 | cn.vuejs.org -------------------------------------------------------------------------------- /themes/vue/layout/partials/ad.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/ga.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.md: -------------------------------------------------------------------------------- 1 | index: true 2 | --- 3 | -------------------------------------------------------------------------------- /assets/logo.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/assets/logo.ai -------------------------------------------------------------------------------- /assets/state.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/assets/state.ai -------------------------------------------------------------------------------- /assets/icons.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/assets/icons.psd -------------------------------------------------------------------------------- /src/images/hn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/src/images/hn.png -------------------------------------------------------------------------------- /assets/lifecycle.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/assets/lifecycle.ai -------------------------------------------------------------------------------- /src/images/data.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/src/images/data.png -------------------------------------------------------------------------------- /src/images/mvvm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/src/images/mvvm.png -------------------------------------------------------------------------------- /src/images/state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/src/images/state.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## vue.js 2.0 中文文档 https://cn.vuejs.org 2 | 3 | > 欢迎大家一起参与校对工作 4 | 5 | ### 感谢所有参与翻译的朋友们！ -------------------------------------------------------------------------------- /src/images/components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/src/images/components.png -------------------------------------------------------------------------------- /src/images/lifecycle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/src/images/lifecycle.png -------------------------------------------------------------------------------- /src/images/props-events.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/src/images/props-events.png -------------------------------------------------------------------------------- /src/images/vue-component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/src/images/vue-component.png -------------------------------------------------------------------------------- /src/images/hn-architecture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/src/images/hn-architecture.png -------------------------------------------------------------------------------- /themes/vue/source/images/down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/down.png -------------------------------------------------------------------------------- /themes/vue/source/images/feed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/feed.png -------------------------------------------------------------------------------- /themes/vue/source/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/logo.png -------------------------------------------------------------------------------- /themes/vue/source/images/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/menu.png -------------------------------------------------------------------------------- /themes/vue/source/images/tde.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/tde.png -------------------------------------------------------------------------------- /themes/vue/source/images/2mhost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/2mhost.png -------------------------------------------------------------------------------- /themes/vue/source/images/check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/check.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/icons.png -------------------------------------------------------------------------------- /themes/vue/source/images/juejin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/juejin.png -------------------------------------------------------------------------------- /themes/vue/source/images/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/paypal.png -------------------------------------------------------------------------------- /themes/vue/source/images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/search.png -------------------------------------------------------------------------------- /themes/vue/source/images/stdlib.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/stdlib.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Thumbs.db 3 | db.json 4 | *.log 5 | node_modules/ 6 | public/ 7 | .deploy*/ 8 | src/_drafts 9 | .avoscloud/ -------------------------------------------------------------------------------- /themes/vue/source/images/actualize.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/actualize.png -------------------------------------------------------------------------------- /themes/vue/source/images/chaitin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/chaitin.png -------------------------------------------------------------------------------- /themes/vue/source/images/fancygrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/fancygrid.png -------------------------------------------------------------------------------- /themes/vue/source/images/itunescn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/itunescn.png -------------------------------------------------------------------------------- /themes/vue/source/images/jsfiddle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/jsfiddle.png -------------------------------------------------------------------------------- /themes/vue/source/images/laravel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/laravel.png -------------------------------------------------------------------------------- /themes/vue/source/images/monterail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/monterail.png -------------------------------------------------------------------------------- /themes/vue/source/images/patreon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/patreon.png -------------------------------------------------------------------------------- /themes/vue/source/images/someline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/someline.png -------------------------------------------------------------------------------- /themes/vue/source/images/tmvuejs2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/tmvuejs2.png -------------------------------------------------------------------------------- /themes/vue/source/images/trisoft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/trisoft.png -------------------------------------------------------------------------------- /themes/vue/source/images/vuejobs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/vuejobs.png -------------------------------------------------------------------------------- /themes/vue/source/images/deepstream.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/deepstream.png -------------------------------------------------------------------------------- /themes/vue/source/images/famebroker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/famebroker.png -------------------------------------------------------------------------------- /themes/vue/source/images/htmlburger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/htmlburger.png -------------------------------------------------------------------------------- /themes/vue/source/images/strikingly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/strikingly.png -------------------------------------------------------------------------------- /themes/vue/source/images/transition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/transition.png -------------------------------------------------------------------------------- /themes/vue/source/images/upyun-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/upyun-large.png -------------------------------------------------------------------------------- /themes/vue/source/images/upyun-main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/upyun-main.jpg -------------------------------------------------------------------------------- /themes/vue/source/images/upyun-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/upyun-small.png -------------------------------------------------------------------------------- /themes/vue/source/images/component_io.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/component_io.png -------------------------------------------------------------------------------- /themes/vue/source/images/upyun-main-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/upyun-main-2.jpg -------------------------------------------------------------------------------- /themes/vue/source/images/upyun-main-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/images/upyun-main-3.jpg -------------------------------------------------------------------------------- /src/images/vue-component-with-preprocessors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/src/images/vue-component-with-preprocessors.png -------------------------------------------------------------------------------- /themes/vue/source/fonts/Roboto_Mono/RobotoMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/fonts/Roboto_Mono/RobotoMono-Regular.ttf -------------------------------------------------------------------------------- /themes/vue/source/css/_sponsor.styl: -------------------------------------------------------------------------------- 1 | .sponsors-page 2 | a, img 3 | width 120px 4 | display inline-block 5 | vertical-align middle 6 | a 7 | margin 10px 20px 8 | -------------------------------------------------------------------------------- /themes/vue/source/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf -------------------------------------------------------------------------------- /themes/vue/source/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf -------------------------------------------------------------------------------- /themes/vue/source/fonts/Source_Sans_Pro/SourceSansPro-Semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IFmiss/cn.vuejs.org/master/themes/vue/source/fonts/Source_Sans_Pro/SourceSansPro-Semibold.ttf -------------------------------------------------------------------------------- /themes/vue/_config.yml: -------------------------------------------------------------------------------- 1 | site_description: "Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces." 2 | google_analytics: UA-46852172-1 3 | root_domain: cn.vuejs.org 4 | vue_version: 2.1.4 -------------------------------------------------------------------------------- /src/v2/examples/elastic-header.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 具有伸缩性的 Header 3 | type: examples 4 | order: 7 5 | --- 6 | 7 | 8 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/header.ejs: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /src/v2/examples/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown 编辑器 3 | type: examples 4 | order: 0 5 | --- 6 | 7 | > 蠢萌的 Markdown 编辑器。 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/v2/examples/grid-component.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 网格组件 3 | type: examples 4 | order: 3 5 | --- 6 | 7 | > 本示例创建了一个可复用组件，可结合外部数据来使用它。 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/v2/examples/tree-view.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 树形视图 3 | type: examples 4 | order: 4 5 | --- 6 | 7 | > 本示例是一个简单的树形视图实现，它展现了组件的递归使用。 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/v2/examples/svg.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: SVG 图表 3 | type: examples 4 | order: 5 5 | --- 6 | 7 | > 本示例展示了一个结合体，它由常用组件、计算属性、2 种绑定方式和 SVG 的支持组成。 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/v2/examples/modal.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 模式组件 3 | type: examples 4 | order: 6 5 | --- 6 | 7 | > 使用到的特性：组件，prop 传递，内容插入(content insertion)，过渡（transitions）。 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/v2/examples/select2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 内嵌组件 3 | type: examples 4 | order: 8 5 | --- 6 | 7 | > 在本例中，我们整合了第三方 jQuery 插件（select2）,怎么做到的呢？就是把它内嵌在一个常用组件中== 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/v2/examples/commits.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: GitHub 提交 3 | type: examples 4 | order: 1 5 | --- 6 | 7 | > 这个例子从 Github 的 API 中获取了最新的 Vue.js 提交数据，并且以列表形式将它们展示了出来。你可以轻松地切换 master 和 dev 分支。 8 | 9 | 10 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | all: update deploy 2 | 3 | deploy: 4 | rm -rf public db.json 5 | hexo generate 6 | hexo deploy 7 | 8 | update: 9 | cd ../vue && \ 10 | git checkout -- dist && \ 11 | git checkout dev && \ 12 | npm run build 13 | cp ../vue/dist/vue.min.js themes/vue/source/js/vue.min.js 14 | cp ../vue/dist/vue.js themes/vue/source/js/vue.js 15 | node update.js 16 | -------------------------------------------------------------------------------- /src/v2/examples/firebase.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Firebase + 验证 3 | type: examples 4 | order: 2 5 | --- 6 | 7 | > 本示例使用 [Firebase](https://firebase.google.com/) 作为数据存储后端，同时在客户端进行数据实时同步（你可以在多个浏览器窗口去打开它来验证）。另外，它通过计算属性实时验证，并且添加／移除选项时触发 CSS 过渡。 8 | 9 | -------------------------------------------------------------------------------- /themes/vue/source/css/_migration.styl: -------------------------------------------------------------------------------- 1 | .content.guide[class*="migration"] 2 | h2, h3 3 | > sup 4 | margin-left: .3em 5 | color: #b9465c 6 | .upgrade-path 7 | padding: 2em 8 | background: rgba(73, 195, 140, .1) 9 | border-radius: 2px 10 | > h4 11 | margin-top: 0 12 | > p:last-child 13 | margin-bottom: 0 14 | 15 | -------------------------------------------------------------------------------- /src/v2/guide/ssr.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 服务端渲染 3 | type: guide 4 | order: 24 5 | --- 6 | 7 | ## SSR 完全指南 8 | 9 | 在 2.3 发布后我们发布了一份完整的构建 Vue 服务端渲染应用的指南。这份指南非常深入，适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读。请移步 [ssr.vuejs.org](https://ssr.vuejs.org)。（目前只有英文版，社区正在进行中文版的翻译） 10 | 11 | ## Nuxt.js 12 | 13 | 从头搭建一个服务端渲染的应用是相当复杂的。幸运的是，我们有一个优秀的社区项目 [Nuxt.js](https://nuxtjs.org/) 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。推荐尝试。 14 | 15 | *** 16 | 17 | > 原文: http://vuejs.org/guide/ssr.html 18 | 19 | *** 20 | -------------------------------------------------------------------------------- /src/v2/examples/todomvc.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: TodoMVC 3 | type: examples 4 | order: 9 5 | --- 6 | 7 | > 本例是一个完全和规范一致的 TodoMVC 实现，只用了 120 行有效的 JavaScript（不包含注释和空行）。 8 | 9 |

Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the `localStorage` data will fail to be saved from JSFiddle. You'll have to click on `Edit in JSFiddle` to see the live result.

10 | 11 | 12 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var AV = require('leanengine'); 3 | var path = require('path'); 4 | var app = express(); 5 | 6 | var port = process.env.LEANCLOUD_APP_PORT || 3000; 7 | 8 | AV.init({ 9 | appId: process.env.LEANCLOUD_APP_ID, 10 | appKey: process.env.LEANCLOUD_APP_KEY, 11 | masterKey: process.env.LEANCLOUD_APP_MASTER_KEY 12 | }); 13 | app.enable('trust proxy'); 14 | app.use(AV.express()); 15 | app.use(AV.Cloud.HttpsRedirect()); 16 | app.use(express.static(__dirname + '/public')); 17 | app.get('/', function(req, res) { 18 | res.sendFile(path.resolve('./public/index.html')) 19 | }); 20 | 21 | app.listen(port); -------------------------------------------------------------------------------- /themes/vue/layout/partials/community_dropdown.ejs: -------------------------------------------------------------------------------- 1 |
  • 2 | 社区 3 | 10 |
    • 11 | -------------------------------------------------------------------------------- /themes/vue/source/css/_fonts.styl: -------------------------------------------------------------------------------- 1 | @font-face 2 | font-family "Source Sans Pro" 3 | src local("Source Sans Pro"), 4 | url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) 5 | 6 | @font-face 7 | font-family "Source Sans Pro" 8 | src local("Source Sans Pro Light"), 9 | url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) 10 | font-weight 300 11 | 12 | @font-face 13 | font-family "Source Sans Pro" 14 | src local("Source Sans Pro Semibold"), 15 | url(/fonts/Source_Sans_Pro/SourceSansPro-Semibold.ttf) 16 | font-weight 600 17 | 18 | @font-face 19 | font-family "Roboto Mono" 20 | src local("Roboto Mono"), 21 | url(/fonts/Roboto_Mono/RobotoMono-Regular.ttf) 22 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/language_dropdown.ejs: -------------------------------------------------------------------------------- 1 |
  • 2 | 多语言 3 | 11 |
    • 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cn.vuejs.org", 3 | "version": "1.0.18", 4 | "private": true, 5 | "hexo": { 6 | "version": "3.2.2" 7 | }, 8 | "dependencies": { 9 | "hexo": "^3.2.2", 10 | "hexo-browsersync": "^0.2.0", 11 | "hexo-deployer-git": "0.2.0", 12 | "hexo-generator-alias": "git+https://github.com/chrisvfritz/vuejs.org-hexo-generator-alias.git", 13 | "hexo-generator-archive": "^0.1.4", 14 | "hexo-generator-category": "^0.1.3", 15 | "hexo-generator-feed": "^1.1.0", 16 | "hexo-generator-index": "^0.2.0", 17 | "hexo-generator-tag": "^0.2.0", 18 | "hexo-renderer-ejs": "^0.2.0", 19 | "hexo-renderer-marked": "^0.2.10", 20 | "hexo-renderer-stylus": "^0.3.1", 21 | "hexo-server": "^0.2.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/main_menu.ejs: -------------------------------------------------------------------------------- 1 |
  • 2 |
    3 | 4 |
    5 |
    • 6 |
  • 教程
    • 7 |
  • API
    • 8 |
  • 示例
    • 9 |
  • 参与贡献
    • 10 | <%- partial('partials/community_dropdown') %> 11 | <%- partial('partials/ecosystem_dropdown') %> 12 | <%- partial('partials/language_dropdown') %> -------------------------------------------------------------------------------- /themes/vue/source/css/benchmark.styl: -------------------------------------------------------------------------------- 1 | #benchmark-results 2 | margin-bottom 2em 3 | ul 4 | list-style-type none 5 | padding 0 6 | margin-left 0 7 | 8 | .framework, .time, .bar, .inner 9 | display inline-block 10 | 11 | .framework 12 | width 4.2em 13 | //text-align right 14 | margin-right 1em 15 | font-weight 600 16 | 17 | .time 18 | width 4.2em 19 | margin-right 1em 20 | 21 | .bar 22 | width 60% 23 | &.min .inner 24 | background-color #e74c3c 25 | 26 | .inner 27 | height 3px 28 | vertical-align middle 29 | background-color #3498db 30 | 31 | @media screen and (max-width: 600px) 32 | #benchmark-results 33 | .bar 34 | width 45% -------------------------------------------------------------------------------- /src/v2/examples/hackernews.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HackerNews 克隆 3 | type: examples 4 | order: 10 5 | --- 6 | 7 | > HackerNews 克隆是基于 HN 的官方 firebase API 、Vue 2.0 、vue-router 和 vuex 来构建的，使用服务器端渲染。 8 | 9 | {% raw %} 10 |
    11 | 12 | 13 | 14 |
    15 | {% endraw %} 16 | 17 | > [Live Demo](https://vue-hn.now.sh/) 18 | > 注：如果在一段时间内没有人访问过该网站，则需要一些加载时间。 19 | > 20 | > [[Source](https://github.com/vuejs/vue-hackernews-2.0)] 21 | 22 | ## 特性 23 | 24 | - 服务器端渲染 25 | - Vue + vue-router + vuex 26 | - 服务端数据提前获取 27 | - 客户端状态 & DOM 合并 28 | - 单文件 Vue 组件 29 | - 开发时进行热加载 30 | - 生产时抽出 CSS 31 | - 使用 FLIP 动画进行实时列表更新 32 | 33 | ## 结构概览 34 | 35 | Hackernew clone architecture overview 36 | -------------------------------------------------------------------------------- /themes/vue/source/css/_settings.styl: -------------------------------------------------------------------------------- 1 | // font faces 2 | $body-font = 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif 3 | $logo-font = 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif 4 | $code-font = 'Roboto Mono', Monaco, courier, monospace 5 | 6 | // font sizes 7 | $body-font-size = 15px 8 | $code-font-size = .8em 9 | 10 | // colors 11 | $dark = #2c3e50 12 | $medium = #34495e 13 | $light = #7f8c8d 14 | $green = #42b983 15 | $border = #dddddd 16 | $codebg = #f8f8f8 17 | $red = #ff6666 18 | 19 | $radius = 2px 20 | $content-padding-top = 30px 21 | $header-inner-height = 41px 22 | $heading-padding-vertical = 10px 23 | $header-height = $header-inner-height + $heading-padding-vertical * 2 24 | $mobile-header-height = 40px 25 | $heading-link-padding-top = $header-height + $content-padding-top 26 | $mobile-heading-link-padding-top = $mobile-header-height + $content-padding-top 27 | $h2-margin-top = 45px 28 | $h3-margin-top = 52px 29 | -------------------------------------------------------------------------------- /themes/vue/source/css/search.styl: -------------------------------------------------------------------------------- 1 | @import '_settings' 2 | 3 | $border = #ddd 4 | 5 | .algolia-autocomplete 6 | line-height normal 7 | 8 | .aa-dropdown-menu 9 | width 100% 10 | border-color #999 11 | font-size 0.9rem 12 | 13 | @media (min-width: 768px) 14 | .aa-dropdown-menu 15 | min-width: 515px 16 | 17 | .algolia-docsearch-suggestion 18 | border-color $border 19 | 20 | .algolia-docsearch-suggestion--content 21 | color $dark 22 | 23 | .algolia-docsearch-suggestion--subcategory-column 24 | border-color $border 25 | 26 | .algolia-docsearch-suggestion--category-header 27 | background: $green 28 | 29 | .algolia-docsearch-footer 30 | border-color $border 31 | 32 | .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight 33 | background rgba(255, 255, 255, 0.6) 34 | 35 | .algolia-docsearch-suggestion--highlight 36 | color: #2c815b 37 | 38 | .aa-cursor .algolia-docsearch-suggestion--content 39 | color: $dark 40 | -------------------------------------------------------------------------------- /src/_posts/vue-011-release.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vue.js 0.11 released! 3 | date: 2014-11-09 09:23:40 4 | --- 5 | 6 | After the long wait, [Vue.js 0.11 **Cowboy Bebop**](https://github.com/yyx990803/vue/releases/tag/0.11.0) is finally here! Thanks to everyone who tried out the release candidate versions and provided feedback / bug reports along the way. 7 | 8 | 9 | 10 | The 0.11 release introduced many new features and also a fair number of breaking changes, so please carefully read through the [0.11 Change List](https://github.com/yyx990803/vue/blob/master/changes.md) before upgrading. Aside from the API changes, 0.11 also ships with better [code quality](https://codeclimate.com/github/yyx990803/vue) and [test coverage](https://coveralls.io/r/yyx990803/vue), and is considerably more robust in almost every aspect. 11 | 12 | This documentation site has been fully upgraded to match the new 0.11 API. For the now legacy 0.10.6 version, you can still find documentations for it at [legacy.vuejs.org](http://legacy.vuejs.org). 13 | -------------------------------------------------------------------------------- /themes/vue/layout/post.ejs: -------------------------------------------------------------------------------- 1 |
    2 | 5 |
    6 |

    7 | Recent Posts 8 | 9 | 10 | 11 |

    12 | 19 |
    20 |
    21 |
    22 | <%- partial('partials/ad') %> 23 |

    <%- page.title %>

    24 |

    <%- page.date.format('MMM D[,] YYYY') %>

    25 | <%- page.content %> 26 |
    27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013-2015 Yuxi Evan You 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/v2/guide/routing.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 路由 3 | type: guide 4 | order: 21 5 | --- 6 | 7 | ## 官方路由 8 | 9 | 对于大多数单页面应用，都推荐使用官方支持的[vue-router库](https://github.com/vuejs/vue-router)。更多细节可以看[vue-router文档](http://vuejs.github.io/vue-router/)。 10 | 11 | ## 从零开始简单的路由 12 | 13 | 如果只需要非常简单的路由而不需要引入整个路由库，可以动态渲染一个页面级的组件像这样： 14 | 15 | ``` js 16 | const NotFound = { template: '

    Page not found

    ' } 17 | const Home = { template: '

    home page

    ' } 18 | const About = { template: '

    about page

    ' } 19 | 20 | const routes = { 21 | '/': Home, 22 | '/about': About 23 | } 24 | 25 | new Vue({ 26 | el: '#app', 27 | data: { 28 | currentRoute: window.location.pathname 29 | }, 30 | computed: { 31 | ViewComponent () { 32 | return routes[this.currentRoute] || NotFound 33 | } 34 | }, 35 | render (h) { return h(this.ViewComponent) } 36 | }) 37 | ``` 38 | 结合HTML5 History API，你可以建立一个非常基本但功能齐全的客户端路由器。可以直接看[实例应用](https://github.com/chrisvfritz/vue-2.0-simple-routing-example) 39 | 40 | ## 整合第三方路由 41 | 42 | 如果有非常喜欢的第三方路由，如[Page.js](https://github.com/visionmedia/page.js)或者 [Director](https://github.com/flatiron/director), 整合[很简单](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/compare/master...pagejs)。 这有个用了Page.js的[复杂示例](https://github.com/chrisvfritz/vue-2.0-simple-routing-example/tree/pagejs) 。 43 | 44 | *** 45 | 46 | > 原文： http://vuejs.org/guide/routing.html 47 | 48 | *** 49 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/ecosystem_dropdown.ejs: -------------------------------------------------------------------------------- 1 |
  • 2 | 生态系统 3 | 27 |
    • -------------------------------------------------------------------------------- /themes/vue/layout/page.ejs: -------------------------------------------------------------------------------- 1 | <% if (page.type) { %> 2 | <%- partial('partials/sidebar', { type: page.type, index: page.index }) %> 3 | <% } else { %> 4 |
    5 | 8 |
    9 | <% } %> 10 |
    11 | <% if (page.title.trim()) { %> 12 |

    <%- page.title %><%- page.type === 'examples' ? ' Example' : '' %>

    13 | <% } %> 14 | <% if (page.type === 'about') { %> 15 | <%- partial('partials/contributors') %> 16 | <% } %> 17 | <%- page.content %> 18 | <% if (page.type === 'guide') { %> 19 |
    20 | <% site.pages.find({ type: page.type, order: page.order - 1 }).each(function (page) { %> 21 | ← <%- page.title %> 22 | <% }) %> 23 | <% site.pages.find({ type: page.type, order: page.order + 1 }).each(function (page) { %> 24 | <%- page.title %> → 25 | <% }) %> 26 |
    27 | <% } %> 28 |
    29 | 发现错误？想参与编辑？ 30 | 31 | 在 Github 上编辑此页！ 32 | 33 |
    34 |
    35 | -------------------------------------------------------------------------------- /themes/vue/source/css/_syntax.styl: -------------------------------------------------------------------------------- 1 | .gutter pre 2 | color #999 3 | 4 | pre 5 | color: #525252 6 | .function .keyword, 7 | .constant 8 | color: #0092db 9 | .keyword, 10 | .attribute 11 | color: #e96900 12 | .number, 13 | .literal 14 | color: #AE81FF 15 | .tag, 16 | .tag .title, 17 | .change, 18 | .winutils, 19 | .flow, 20 | .lisp .title, 21 | .clojure .built_in, 22 | .nginx .title, 23 | .tex .special 24 | color: #2973b7 25 | .class .title 26 | color: white 27 | .symbol, 28 | .symbol .string, 29 | .value, 30 | .regexp 31 | color: $green 32 | .title 33 | color: #A6E22E 34 | .tag .value, 35 | .string, 36 | .subst, 37 | .haskell .type, 38 | .preprocessor, 39 | .ruby .class .parent, 40 | .built_in, 41 | .sql .aggregate, 42 | .django .template_tag, 43 | .django .variable, 44 | .smalltalk .class, 45 | .javadoc, 46 | .django .filter .argument, 47 | .smalltalk .localvars, 48 | .smalltalk .array, 49 | .attr_selector, 50 | .pseudo, 51 | .addition, 52 | .stream, 53 | .envvar, 54 | .apache .tag, 55 | .apache .cbracket, 56 | .tex .command, 57 | .prompt 58 | color: $green 59 | .comment, 60 | .java .annotation, 61 | .python .decorator, 62 | .template_comment, 63 | .pi, 64 | .doctype, 65 | .deletion, 66 | .shebang, 67 | .apache .sqbracket, 68 | .tex .formula 69 | color: #b3b3b3 70 | .coffeescript .javascript, 71 | .javascript .xml, 72 | .tex .formula, 73 | .xml .javascript, 74 | .xml .vbscript, 75 | .xml .css, 76 | .xml .cdata 77 | opacity: 0.5 -------------------------------------------------------------------------------- /themes/vue/source/css/_demo.styl: -------------------------------------------------------------------------------- 1 | #demo, .demo 2 | border 1px solid #eee 3 | border-radius $radius 4 | padding 25px 35px 5 | margin-top 1em 6 | margin-bottom 40px 7 | font-size 1.2em 8 | line-height 1.5em 9 | -webkit-user-select none 10 | -moz-user-select none 11 | -ms-user-select none 12 | user-select none 13 | overflow-x auto 14 | h1 15 | margin 0 0 .5em 16 | font-size 1.8em 17 | ul, ol 18 | padding-left 1.5em 19 | padding-bottom .2em !important 20 | &:first-child 21 | margin-top 0 22 | &:last-child 23 | margin-bottom 0 24 | li 25 | color $medium 26 | // !!TODO: Check to make sure this isn't here for a good reason. 27 | // cursor pointer 28 | // -ms-user-select none 29 | // -moz-user-select none 30 | // -webkit-user-select none 31 | &.done 32 | color $light 33 | text-decoration line-through 34 | p 35 | margin 0 !important 36 | padding 0 !important 37 | &:first-child 38 | margin-top 0 39 | &:last-child 40 | margin-bottom 0 41 | textarea 42 | width 100% 43 | resize vertical 44 | 45 | 46 | 47 | ul#demo, ul.demo 48 | li 49 | margin-left 1.5em 50 | 51 | @media screen and (max-width: 900px) 52 | #demo, .demo 53 | margin-left 0 54 | 55 | .benchmark-table 56 | margin: 0 auto 57 | text-align center 58 | 59 | tbody > tr > th 60 | text-align right 61 | 62 | th, td 63 | padding: 3px 7px -------------------------------------------------------------------------------- /update.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs') 2 | var zlib = require('zlib') 3 | var version = require('../vue/package.json').version 4 | var themeconfPath = 'themes/vue/_config.yml' 5 | var installPath = 'src/v2/guide/installation.md' 6 | var themeconfig = fs.readFileSync(themeconfPath, 'utf-8') 7 | var installation = fs.readFileSync(installPath, 'utf-8') 8 | 9 | fs.writeFileSync( 10 | themeconfPath, 11 | themeconfig.replace(/vue_version: .*/, 'vue_version: ' + version) 12 | ) 13 | 14 | var sizes = { 15 | dev: 'vue.js', 16 | min: 'vue.min.js', 17 | gz: 'vue.min.js', 18 | ro_gz: 'vue.runtime.min.js' 19 | } 20 | 21 | var pending = [] 22 | Object.keys(sizes).forEach(file => { 23 | var filesize = fs.statSync('../vue/dist/' + sizes[file], 'utf-8').size 24 | if (!/gz$/.test(file)) { 25 | sizes[file] = (filesize / 1024).toFixed(2) 26 | } else { 27 | pending.push(new Promise((resolve, reject) => { 28 | fs.readFile('../vue/dist/' + sizes[file], (err, buf) => { 29 | if (err) return reject(err) 30 | zlib.gzip(buf, (err, buf) => { 31 | if (err) return reject(err) 32 | sizes[file] = (buf.length / 1024).toFixed(2) 33 | resolve() 34 | }) 35 | }) 36 | })) 37 | } 38 | }) 39 | 40 | Promise.all(pending).then(() => { 41 | fs.writeFileSync( 42 | installPath, 43 | installation 44 | .replace(/vue_version: .*/, 'vue_version: ' + version) 45 | .replace(/(\w+)_size:.*/g, function (m, p1) { 46 | return p1 + '_size: "' + sizes[p1] + '"' 47 | }) 48 | ) 49 | console.log(sizes) 50 | }).catch(err => { 51 | console.error(err) 52 | }) 53 | -------------------------------------------------------------------------------- /src/v2/guide/deployment.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 生产环境部署 3 | type: guide 4 | order: 20 5 | --- 6 | 7 | ## 删除警告 8 | 9 | 为了减少文件大小，Vue 精简独立版本已经删除了所有警告，但是当你使用 Webpack 或 Browserify 等工具时，你需要一些额外的配置实现这点。 10 | 11 | ### Webpack 12 | 13 | 使用 Webpack 的 [DefinePlugin](http://webpack.github.io/docs/list-of-plugins.html#defineplugin) 来指定生产环境，以便在压缩时可以让 UglifyJS 自动删除代码块内的警告语句。例如配置： 14 | 15 | ``` js 16 | var webpack = require('webpack') 17 | 18 | module.exports = { 19 | // ... 20 | plugins: [ 21 | // ... 22 | new webpack.DefinePlugin({ 23 | 'process.env': { 24 | NODE_ENV: '"production"' 25 | } 26 | }), 27 | new webpack.optimize.UglifyJsPlugin({ 28 | compress: { 29 | warnings: false 30 | } 31 | }) 32 | ] 33 | } 34 | ``` 35 | 36 | ### Browserify 37 | 38 | - 运行打包命令，设置 `NODE_ENV` 为 `"production"`。等于告诉 `vueify` 避免引入热重载和开发相关代码。 39 | - 使用一个全局 [envify](https://github.com/hughsk/envify) 转换你的 bundle 文件。这可以精简掉包含在 Vue 源码中所有环境变量条件相关代码块内的警告语句。例如： 40 | 41 | 42 | ``` bash 43 | NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js 44 | ``` 45 | 46 | - 使用 vueify 中包含的 extract-css 插件，提取样式到单独的css文件。 47 | 48 | ``` bash 49 | NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o build.css ] -e main.js | uglifyjs -c -m > build.js 50 | ``` 51 | 52 | ## 跟踪运行时错误 53 | 54 | 如果在组件渲染时出现运行错误，错误将会被传递至全局 `Vue.config.errorHandler` 配置函数（如果已设置）。利用这个钩子函数和错误跟踪服务（如 [Sentry](https://sentry.io)，它为 Vue 提供[官方集成](https://sentry.io/for/vue/)），可能是个不错的主意。 55 | 56 | ## 提取 CSS 57 | 58 | 使用[单文件组件](./single-file-components.html)时，` 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/_posts/march-update.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: March 2016 Update 3 | date: 2016-03-14 18:45:00 4 | --- 5 | 6 | ## Growing Community 7 | 8 | Vue's growth in the past year has been nothing short of amazing. As of today we are at over 15,000 stars on GitHub, over 500k downloads from npm, and over 2,000 users in the Gitter channel. What's more exciting though, is that the community successfully organized the first [London Vue.js Meetup](http://www.meetup.com/London-Vue-js-Meetup/) and the first [Paris Vue.js Meetup](http://www.meetup.com/Vuejs-Paris/?scroll=true)! A big shoutout to the awesome organizers: [Jack](https://twitter.com/JackBarham), [James](https://twitter.com/onejamesbrowne/) and [Eduardo](https://twitter.com/posva/). 9 | 10 | 11 | 12 | If you are interested in connecting with Vue.js users near you and share your experiences in using Vue.js, joining a local Meetup is a great idea - even better, maybe you can organize one :) 13 | 14 | ## Cool Things Being Built 15 | 16 | More and more amazing things are being built with Vue. There are products like [PageKit](https://pagekit.com/), Laravel Spark (coming soon) and [Statamic](https://v2.statamic.com/), sleek apps like [Koel](http://koel.phanan.net/) and [Gokotta](https://github.com/Zhangdroid/Gokotta), UI components like [VueStrap](http://yuche.github.io/vue-strap/) and [Vue-MDL](http://posva.net/vue-mdl/), and smooth, interactive experiences like [YouTube Adblitz](https://adblitz.withyoutube.com) and even the [Facebook NewsFeed Marketing Site](https://newsfeed.fb.com/)! 17 | 18 | There are many other great projects - too many to be listed here - but you can check them all out in [awesome-vue](https://github.com/vuejs/awesome-vue). If you've built great things with Vue, you should also add them to the list! 19 | 20 | ## A New Vision For the Project 21 | 22 | Some of you may have noticed that the development on the Vue.js core repo has slowed down lately - in the meanwhile, a lot of efforts went into other sub projects, namely [Vuex](https://github.com/vuejs/vuex), [vue-devtools](https://github.com/vuejs/vue-devtools) and the official [Webpack project boilerplate](https://github.com/vuejs-templates/webpack). The next step is a new release for [vue-router](https://github.com/vuejs/vue-router), and better documentation/examples demonstrating how Vue.js core, Vuex and vue-router work together in a large single page application. 23 | 24 | All this adds together towards a new vision for the Vue.js project: a progressive framework that can adapt to different complexity levels. Vue.js core will remain "just the view layer" - you can still drop it on whatever existing page to replace jQuery, but the Vue.js project also includes other pieces like vue-router, Vuex, vue-loader/vueify and vue-cli that works together as a more complete, opinionated framework for single page applications. More on this in a later post. 25 | 26 | ## Vue.js needs your help! 27 | 28 | Open source is awesome, and I'm proud that Vue.js is helping people build real products all over the world. However, as the scope of the project grows, pushing new features while maintaining everything becomes a very demanding job. The good news is you can help! 29 | 30 | ### Looking for collaborators 31 | 32 | There are already users who frequently helps out in various ways, but this is an invitation to make things official. I'm looking for contributors to join the "team", which is currently mostly just me. If that sounds interesting to you, take a look at the application [here](https://docs.google.com/forms/d/1SgDgKZqyivEf5xl0EOWNfs68Xy3f4oBzLXIlwlS0BIs/viewform). 33 | 34 | ### Looking for sponsors 35 | 36 | Another way to help making Vue development sustainable is providing direct financial support. The more financial support I receive, the more time I get to spend on making Vue even better. 37 | 38 | If you run a business and is using Vue in a revenue-generating product, it would make business sense to sponsor Vue development: it ensures the project that your product relies on stays healthy and actively maintained. It can also help your exposure in the Vue community and makes it easier to attract Vue developers. 39 | 40 | If you are an individual user and have enjoyed the productivity of using Vue, consider donating as a sign of appreciation - like buying me coffee once in a while :) 41 | 42 | In either case, you can provide recurring funding through Vue's [Patreon campaign](https://www.patreon.com/evanyou), or provide one-time donations via [PayPal](https://www.paypal.me/evanyou). There are many ideas for Vue that I have lined up but haven't had the time to embark on, and I would love to be able to work on them full time - I hope you can help me make that happen! 43 | -------------------------------------------------------------------------------- /src/v2/guide/custom-directive.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 自定义指令 3 | type: guide 4 | order: 16 5 | --- 6 | 7 | ## 简介 8 | 9 | 除了默认设置的核心指令( `v-model` 和 `v-show` ),Vue 也允许注册自定义指令。注意，在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。下面这个例子将聚焦一个 input 元素，像这样： 10 | 11 | {% raw %} 12 |
    13 | 14 |
    15 | 25 | {% endraw %} 26 | 27 | 当页面加载时，元素将获得焦点。事实上，你访问后还没点击任何内容，input 就获得了焦点。现在让我们完善这个指令： 28 | 29 | ``` js 30 | // 注册一个全局自定义指令 v-focus 31 | Vue.directive('focus', { 32 | // 当绑定元素插入到 DOM 中。 33 | inserted: function (el) { 34 | // 聚焦元素 35 | el.focus() 36 | } 37 | }) 38 | ``` 39 | 40 | 也可以注册局部指令，组件中接受一个 `directives` 的选项： 41 | 42 | ``` js 43 | directives: { 44 | focus: { 45 | // 指令的定义--- 46 | 47 | } 48 | } 49 | ``` 50 | 51 | 然后你可以在模板中任何元素上使用新的 `v-focus` 属性： 52 | 53 | ``` html 54 | 55 | ``` 56 | 57 | ## 钩子函数 58 | 59 | 指令定义函数提供了几个钩子函数（可选）： 60 | 61 | - `bind`: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 62 | 63 | - `inserted`: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。 64 | 65 | - `update`: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。 66 | 67 | - `componentUpdated`: 被绑定元素所在模板完成一次更新周期时调用。 68 | 69 | - `unbind`: 只调用一次， 指令与元素解绑时调用。 70 | 71 | 接下来我们来看一下钩子函数的参数 (包括 `el`，`binding`，`vnode`，`oldVnode`) 。 72 | 73 | ## 钩子函数参数 74 | 75 | 钩子函数被赋予了以下参数： 76 | 77 | - **el**: 指令所绑定的元素，可以用来直接操作 DOM 。 78 | - **binding**: 一个对象，包含以下属性： 79 | - **name**: 指令名，不包括 `v-` 前缀。 80 | - **value**: 指令的绑定值， 例如： `v-my-directive="1 + 1"`, value 的值是 `2`。 81 | - **oldValue**: 指令绑定的前一个值，仅在 `update` 和 `componentUpdated` 钩子中可用。无论值是否改变都可用。 82 | - **expression**: 绑定值的字符串形式。 例如 `v-my-directive="1 + 1"` ， expression 的值是 `"1 + 1"`。 83 | - **arg**: 传给指令的参数。例如 `v-my-directive:foo`， arg 的值是 `"foo"`。 84 | - **modifiers**: 一个包含修饰符的对象。 例如： `v-my-directive.foo.bar`, 修饰符对象 modifiers 的值是 `{ foo: true, bar: true }`。 85 | - **vnode**: Vue 编译生成的虚拟节点，查阅 [VNode API](../api/#VNode接口) 了解更多详情。 86 | - **oldVnode**: 上一个虚拟节点，仅在 `update` 和 `componentUpdated` 钩子中可用。 87 | 88 |

    除了 `el` 之外，其它参数都应该是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) 来进行。

    89 | 90 | 一个使用了这些参数的自定义钩子样例： 91 | 92 | ``` html 93 |
    94 | ``` 95 | 96 | ``` js 97 | Vue.directive('demo', { 98 | bind: function (el, binding, vnode) { 99 | var s = JSON.stringify 100 | el.innerHTML = 101 | 'name: ' + s(binding.name) + '
    ' + 102 | 'value: ' + s(binding.value) + '
    ' + 103 | 'expression: ' + s(binding.expression) + '
    ' + 104 | 'argument: ' + s(binding.arg) + '
    ' + 105 | 'modifiers: ' + s(binding.modifiers) + '
    ' + 106 | 'vnode keys: ' + Object.keys(vnode).join(', ') 107 | } 108 | }) 109 | 110 | new Vue({ 111 | el: '#hook-arguments-example', 112 | data: { 113 | message: 'hello!' 114 | } 115 | }) 116 | ``` 117 | 118 | {% raw %} 119 |
    120 | 140 | {% endraw %} 141 | 142 | ## 函数简写 143 | 144 | 大多数情况下，我们可能想在 `bind` 和 `update` 钩子上做重复动作，并且不想关心其它的钩子函数。可以这样写: 145 | 146 | ``` js 147 | Vue.directive('color-swatch', function (el, binding) { 148 | el.style.backgroundColor = binding.value 149 | }) 150 | ``` 151 | ## 对象字面量 152 | 153 | 如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法类型的 JavaScript 表达式。 154 | 155 | ``` html 156 |
    157 | ``` 158 | 159 | ``` js 160 | Vue.directive('demo', function (el, binding) { 161 | console.log(binding.value.color) // => "white" 162 | console.log(binding.value.text) // => "hello!" 163 | }) 164 | ``` 165 | 166 | *** 167 | 168 | > 原文：http://vuejs.org/guide/custom-directive.html 169 | 170 | *** 171 | -------------------------------------------------------------------------------- /themes/vue/source/js/smooth-scroll.min.js: -------------------------------------------------------------------------------- 1 | /*! smooth-scroll v10.2.1 | (c) 2016 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/smooth-scroll */ 2 | !(function(e,t){"function"==typeof define&&define.amd?define([],t(e)):"object"==typeof exports?module.exports=t(e):e.smoothScroll=t(e)})("undefined"!=typeof global?global:this.window||this.global,(function(e){"use strict";var t,n,o,r,a,c,l,i={},u="querySelector"in document&&"addEventListener"in e,s={selector:"[data-scroll]",selectorHeader:null,speed:500,easing:"easeInOutCubic",offset:0,callback:function(){}},d=function(){var e={},t=!1,n=0,o=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(t=arguments[0],n++);for(var r=function(n){for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t&&"[object Object]"===Object.prototype.toString.call(n[o])?e[o]=d(!0,e[o],n[o]):e[o]=n[o])};n=0&&t.item(n)!==this;);return n>-1});e&&e!==document;e=e.parentNode)if(e.matches(t))return e;return null},m=function(e){"#"===e.charAt(0)&&(e=e.substr(1));for(var t,n=String(e),o=n.length,r=-1,a="",c=n.charCodeAt(0);++r=1&&t<=31||127==t||0===r&&t>=48&&t<=57||1===r&&t>=48&&t<=57&&45===c?"\\"+t.toString(16)+" ":t>=128||45===t||95===t||t>=48&&t<=57||t>=65&&t<=90||t>=97&&t<=122?n.charAt(r):"\\"+n.charAt(r)}return"#"+a},p=function(e,t){var n;return"easeInQuad"===e&&(n=t*t),"easeOutQuad"===e&&(n=t*(2-t)),"easeInOutQuad"===e&&(n=t<.5?2*t*t:-1+(4-2*t)*t),"easeInCubic"===e&&(n=t*t*t),"easeOutCubic"===e&&(n=--t*t*t+1),"easeInOutCubic"===e&&(n=t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1),"easeInQuart"===e&&(n=t*t*t*t),"easeOutQuart"===e&&(n=1- --t*t*t*t),"easeInOutQuart"===e&&(n=t<.5?8*t*t*t*t:1-8*--t*t*t*t),"easeInQuint"===e&&(n=t*t*t*t*t),"easeOutQuint"===e&&(n=1+--t*t*t*t*t),"easeInOutQuint"===e&&(n=t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t),n||t},g=function(e,t,n){var o=0;if(e.offsetParent)do o+=e.offsetTop,e=e.offsetParent;while(e);return o=Math.max(o-t-n,0),Math.min(o,v()-b())},b=function(){return Math.max(document.documentElement.clientHeight,e.innerHeight||0)},v=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},y=function(e){return e&&"object"==typeof JSON&&"function"==typeof JSON.parse?JSON.parse(e):{}},O=function(e){return e?f(e)+e.offsetTop:0},S=function(t,n,o){o||(t.focus(),document.activeElement.id!==t.id&&(t.setAttribute("tabindex","-1"),t.focus(),t.style.outline="none"),e.scrollTo(0,n))};i.animateScroll=function(n,o,c){var i=y(o?o.getAttribute("data-options"):null),u=d(t||s,c||{},i),f="[object Number]"===Object.prototype.toString.call(n),h=f||!n.tagName?null:n;if(f||h){var m=e.pageYOffset;u.selectorHeader&&!r&&(r=document.querySelector(u.selectorHeader)),a||(a=O(r));var b,E,I=f?n:g(h,a,parseInt(u.offset,10)),H=I-m,A=v(),j=0,C=function(t,r,a){var c=e.pageYOffset;(t==r||c==r||e.innerHeight+c>=A)&&(clearInterval(a),S(n,r,f),u.callback(n,o))},M=function(){j+=16,b=j/parseInt(u.speed,10),b=b>1?1:b,E=m+H*p(u.easing,b),e.scrollTo(0,Math.floor(E)),C(E,I,l)},w=function(){clearInterval(l),l=setInterval(M,16)};0===e.pageYOffset&&e.scrollTo(0,0),w()}};var E=function(t){var r;try{r=m(decodeURIComponent(e.location.hash))}catch(t){r=m(e.location.hash)}n&&(n.id=n.getAttribute("data-scroll-id"),i.animateScroll(n,o),n=null,o=null)},I=function(r){if(0===r.button&&!r.metaKey&&!r.ctrlKey&&(o=h(r.target,t.selector),o&&"a"===o.tagName.toLowerCase()&&o.hostname===e.location.hostname&&o.pathname===e.location.pathname&&/#/.test(o.href))){var a;try{a=m(decodeURIComponent(o.hash))}catch(e){a=m(o.hash)}if("#"===a){r.preventDefault(),n=document.body;var c=n.id?n.id:"smooth-scroll-top";return n.setAttribute("data-scroll-id",c),n.id="",void(e.location.hash.substring(1)===c?E():e.location.hash=c)}n=document.querySelector(a),n&&(n.setAttribute("data-scroll-id",n.id),n.id="",o.hash===e.location.hash&&(r.preventDefault(),E()))}},H=function(e){c||(c=setTimeout((function(){c=null,a=O(r)}),66))};return i.destroy=function(){t&&(document.removeEventListener("click",I,!1),e.removeEventListener("resize",H,!1),t=null,n=null,o=null,r=null,a=null,c=null,l=null)},i.init=function(n){u&&(i.destroy(),t=d(s,n||{}),r=t.selectorHeader?document.querySelector(t.selectorHeader):null,a=O(r),document.addEventListener("click",I,!1),e.addEventListener("hashchange",E,!1),r&&e.addEventListener("resize",H,!1))},i})); 3 | -------------------------------------------------------------------------------- /themes/vue/source/fonts/Source_Sans_Pro/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. 2 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 3 | This license is copied below, and is also available with a FAQ at: 4 | http://scripts.sil.org/OFL 5 | 6 | 7 | ----------------------------------------------------------- 8 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 9 | ----------------------------------------------------------- 10 | 11 | PREAMBLE 12 | The goals of the Open Font License (OFL) are to stimulate worldwide 13 | development of collaborative font projects, to support the font creation 14 | efforts of academic and linguistic communities, and to provide a free and 15 | open framework in which fonts may be shared and improved in partnership 16 | with others. 17 | 18 | The OFL allows the licensed fonts to be used, studied, modified and 19 | redistributed freely as long as they are not sold by themselves. The 20 | fonts, including any derivative works, can be bundled, embedded, 21 | redistributed and/or sold with any software provided that any reserved 22 | names are not used by derivative works. The fonts and derivatives, 23 | however, cannot be released under any other type of license. The 24 | requirement for fonts to remain under this license does not apply 25 | to any document created using the fonts or their derivatives. 26 | 27 | DEFINITIONS 28 | "Font Software" refers to the set of files released by the Copyright 29 | Holder(s) under this license and clearly marked as such. This may 30 | include source files, build scripts and documentation. 31 | 32 | "Reserved Font Name" refers to any names specified as such after the 33 | copyright statement(s). 34 | 35 | "Original Version" refers to the collection of Font Software components as 36 | distributed by the Copyright Holder(s). 37 | 38 | "Modified Version" refers to any derivative made by adding to, deleting, 39 | or substituting -- in part or in whole -- any of the components of the 40 | Original Version, by changing formats or by porting the Font Software to a 41 | new environment. 42 | 43 | "Author" refers to any designer, engineer, programmer, technical 44 | writer or other person who contributed to the Font Software. 45 | 46 | PERMISSION & CONDITIONS 47 | Permission is hereby granted, free of charge, to any person obtaining 48 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 49 | redistribute, and sell modified and unmodified copies of the Font 50 | Software, subject to the following conditions: 51 | 52 | 1) Neither the Font Software nor any of its individual components, 53 | in Original or Modified Versions, may be sold by itself. 54 | 55 | 2) Original or Modified Versions of the Font Software may be bundled, 56 | redistributed and/or sold with any software, provided that each copy 57 | contains the above copyright notice and this license. These can be 58 | included either as stand-alone text files, human-readable headers or 59 | in the appropriate machine-readable metadata fields within text or 60 | binary files as long as those fields can be easily viewed by the user. 61 | 62 | 3) No Modified Version of the Font Software may use the Reserved Font 63 | Name(s) unless explicit written permission is granted by the corresponding 64 | Copyright Holder. This restriction only applies to the primary font name as 65 | presented to the users. 66 | 67 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 68 | Software shall not be used to promote, endorse or advertise any 69 | Modified Version, except to acknowledge the contribution(s) of the 70 | Copyright Holder(s) and the Author(s) or with their explicit written 71 | permission. 72 | 73 | 5) The Font Software, modified or unmodified, in part or in whole, 74 | must be distributed entirely under this license, and must not be 75 | distributed under any other license. The requirement for fonts to 76 | remain under this license does not apply to any document created 77 | using the Font Software. 78 | 79 | TERMINATION 80 | This license becomes null and void if any of the above conditions are 81 | not met. 82 | 83 | DISCLAIMER 84 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 85 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 86 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 87 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 88 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 89 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 90 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 91 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 92 | OTHER DEALINGS IN THE FONT SOFTWARE. 93 | -------------------------------------------------------------------------------- /src/v2/guide/syntax.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 模板语法 3 | type: guide 4 | order: 4 5 | --- 6 | 7 | Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。 8 | 9 | 在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 10 | 11 | 如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，[直接写渲染（render）函数](render-function.html)，使用可选的 JSX 语法。 12 | 13 | ## 插值 14 | 15 | ### 文本 16 | 17 | 数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值： 18 | 19 | ``` html 20 | Message: {{ msg }} 21 | ``` 22 | 23 | Mustache 标签将会被替代为对应数据对象上 `msg` 属性的值。无论何时，绑定的数据对象上 `msg` 属性发生了改变，插值处的内容都会更新。 24 | 25 | 通过使用 [v-once 指令](../api/#v-once)，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定： 26 | 27 | ``` html 28 | This will never change: {{ msg }} 29 | ``` 30 | 31 | ### 纯 HTML 32 | 33 | 双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 `v-html` 指令： 34 | 35 | ``` html 36 |
    37 | ``` 38 | 39 | 被插入的内容都会被当做 HTML —— 数据绑定会被忽略。注意，你不能使用 `v-html` 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元。 40 | 41 |

    你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。请只对可信内容使用 HTML 插值，**绝不要**对用户提供的内容插值。

    42 | 43 | ### 属性 44 | 45 | Mustache 不能在 HTML 属性中使用，应使用 [v-bind 指令](../api/#v-bind)： 46 | 47 | ``` html 48 |
    49 | ``` 50 | 51 | 这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除： 52 | 53 | ``` html 54 | 55 | ``` 56 | 57 | ### 使用 JavaScript 表达式 58 | 59 | 迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。 60 | 61 | ``` html 62 | {{ number + 1 }} 63 | 64 | {{ ok ? 'YES' : 'NO' }} 65 | 66 | {{ message.split('').reverse().join('') }} 67 | 68 |
    69 | ``` 70 | 71 | 这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含**单个表达式**，所以下面的例子都**不会**生效。 72 | 73 | ``` html 74 | 75 | {{ var a = 1 }} 76 | 77 | 78 | {{ if (ok) { return message } }} 79 | ``` 80 | 81 |

    模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 `Math` 和 `Date` 。你不应该在模板表达式中试图访问用户定义的全局变量。

    82 | 83 | 84 | ## 指令 85 | 86 | 指令（Directives）是带有 `v-` 前缀的特殊属性。指令属性的值预期是**单一 JavaScript 表达式**（除了 `v-for`，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。让我们回顾一下在介绍里的例子： 87 | 88 | ``` html 89 |

    Now you see me

    90 | ``` 91 | 92 | 这里， `v-if` 指令将根据表达式 `seen` 的值的真假来移除/插入 `

    ` 元素。 93 | 94 | ### 参数 95 | 96 | 一些指令能接受一个“参数”，在指令后以冒号指明。例如， `v-bind` 指令被用来响应地更新 HTML 属性： 97 | 98 | ``` html 99 | 100 | ``` 101 | 102 | 在这里 `href` 是参数，告知 `v-bind` 指令将该元素的 `href` 属性与表达式 `url` 的值绑定。 103 | 104 | 另一个例子是 `v-on` 指令，它用于监听 DOM 事件： 105 | 106 | ``` html 107 | 108 | ``` 109 | 110 | 在这里参数是监听的事件名。我们也会更详细地讨论事件处理。 111 | 112 | ### 修饰符 113 | 114 | 修饰符（Modifiers）是以半角句号 `.` 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，`.prevent` 修饰符告诉 `v-on` 指令对于触发的事件调用 `event.preventDefault()`： 115 | 116 | ``` html 117 |

    118 | ``` 119 | 120 | 之后当我们更深入地了解 `v-on` 与 `v-model`时，会看到更多修饰符的使用。 121 | 122 | ## 过滤器 123 | 124 | Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：**mustache 插值和 `v-bind` 表达式**。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示： 125 | 126 | ``` html 127 | 128 | {{ message | capitalize }} 129 | 130 | 131 |
    132 | ``` 133 | 134 |

    Vue 2.x 中，过滤器只能在 mustache 绑定和 `v-bind` 表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换，你应该使用[计算属性](computed.html)。

    135 | 136 | 过滤器函数总接受表达式的值作为第一个参数。 137 | 138 | 139 | ``` js 140 | new Vue({ 141 | // ... 142 | filters: { 143 | capitalize: function (value) { 144 | if (!value) return '' 145 | value = value.toString() 146 | return value.charAt(0).toUpperCase() + value.slice(1) 147 | } 148 | } 149 | }) 150 | ``` 151 | 152 | 过滤器可以串联： 153 | 154 | ``` html 155 | {{ message | filterA | filterB }} 156 | ``` 157 | 158 | 过滤器是 JavaScript 函数，因此可以接受参数： 159 | 160 | ``` html 161 | {{ message | filterA('arg1', arg2) }} 162 | ``` 163 | 164 | 165 | 这里，字符串 `'arg1'` 将传给过滤器作为第二个参数， `arg2` 表达式的值将被求值然后传给过滤器作为第三个参数。 166 | 167 | ## 缩写 168 | 169 | `v-` 前缀在模板中是作为一个标示 Vue 特殊属性的明显标识。当你使用 Vue.js 为现有的标记添加动态行为时，它会很有用，但对于一些经常使用的指令来说有点繁琐。同时，当搭建 Vue.js 管理所有模板的 [SPA](https://en.wikipedia.org/wiki/Single-page_application) 时，`v-` 前缀也变得没那么重要了。因此，Vue.js 为两个最为常用的指令提供了特别的缩写： 170 | 171 | ### `v-bind` 缩写 172 | 173 | ``` html 174 | 175 |     176 | 177 | 178 | 179 | ``` 180 | 181 | ### `v-on` 缩写 182 | 183 | ``` html 184 | 185 | 186 | 187 | 188 | 189 | ``` 190 | 191 | 它们看起来可能与普通的 HTML 略有不同，但 `:` 与 `@` 对于属性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。 192 | 193 | *** 194 | 195 | > 原文： http://vuejs.org/guide/syntax.html 196 | 197 | *** 198 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Hexo Configuration 2 | ## Docs: http://zespia.tw/hexo/docs/configuration.html 3 | ## Source: https://github.com/tommy351/hexo/ 4 | 5 | # Site 6 | title: Vue.js 7 | subtitle: 8 | description: "The Progressive JavaScript Framework" 9 | author: Evan You 10 | email: 11 | language: zh-CN 12 | 13 | # URL 14 | ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' 15 | url: https://cn.vuejs.org 16 | root: / 17 | permalink: :year/:month/:day/:title/ 18 | tag_dir: tags 19 | archive_dir: archives 20 | category_dir: categories 21 | code_dir: downloads/code 22 | 23 | # Directory 24 | source_dir: src 25 | public_dir: public 26 | 27 | # Writing 28 | new_post_name: :title.md # File name of new posts 29 | default_layout: post 30 | auto_spacing: false # Add spaces between asian characters and western characters 31 | titlecase: false # Transform title into titlecase 32 | external_link: true # Open external links in new tab 33 | max_open_file: 100 34 | multi_thread: true 35 | filename_case: 0 36 | render_drafts: false 37 | post_asset_folder: false 38 | highlight: 39 | enable: true 40 | line_number: false 41 | tab_replace: 42 | 43 | # Category & Tag 44 | default_category: uncategorized 45 | category_map: 46 | tag_map: 47 | 48 | # Archives 49 | ## 2: Enable pagination 50 | ## 1: Disable pagination 51 | ## 0: Fully Disable 52 | archive: 0 53 | category: 0 54 | tag: 0 55 | 56 | # Server 57 | ## Hexo uses Connect as a server 58 | ## You can customize the logger format as defined in 59 | ## http://www.senchalabs.org/connect/logger.html 60 | port: 4000 61 | logger: false 62 | logger_format: 63 | 64 | # Date / Time format 65 | ## Hexo uses Moment.js to parse and display date 66 | ## You can customize the date format as defined in 67 | ## http://momentjs.com/docs/#/displaying/format/ 68 | date_format: MMM D YYYY 69 | time_format: H:mm:ss 70 | 71 | # Pagination 72 | ## Set per_page to 0 to disable pagination 73 | per_page: 10 74 | pagination_dir: page 75 | 76 | # Disqus 77 | disqus_shortname: 78 | 79 | # Extensions 80 | ## Plugins: https://github.com/tommy351/hexo/wiki/Plugins 81 | ## Themes: https://github.com/tommy351/hexo/wiki/Themes 82 | theme: vue 83 | exclude_generator: 84 | 85 | # Markdown 86 | ## https://github.com/chjj/marked 87 | markdown: 88 | gfm: true 89 | pedantic: false 90 | sanitize: false 91 | tables: true 92 | breaks: true 93 | smartLists: true 94 | smartypants: true 95 | 96 | # Deployment 97 | ## Docs: http://zespia.tw/hexo/docs/deployment.html 98 | deploy: 99 | type: git 100 | repository: git@github.com:vuejs/cn.vuejs.org.git 101 | branch: gh-pages 102 | 103 | feed: 104 | type: atom 105 | path: atom.xml 106 | limit: 20 107 | 108 | alias: 109 | api/index.html: v2/api/index.html 110 | guide/class-and-style.html: v2/guide/class-and-style.html 111 | guide/comparison.html: v2/guide/comparison.html 112 | guide/components.html: v2/guide/components.html 113 | guide/computed.html: v2/guide/computed.html 114 | guide/conditional.html: v2/guide/conditional.html 115 | guide/custom-directive.html: v2/guide/custom-directive.html 116 | guide/deployment.html: v2/guide/deployment.html 117 | guide/events.html: v2/guide/events.html 118 | guide/forms.html: v2/guide/forms.html 119 | guide/index.html: v2/guide/index.html 120 | guide/installation.html: v2/guide/installation.html 121 | guide/instance.html: v2/guide/instance.html 122 | guide/join.html: v2/guide/join.html 123 | guide/list.html: v2/guide/list.html 124 | guide/migration-vue-router.html: v2/guide/migration-vue-router.html 125 | guide/migration-vuex.html: v2/guide/migration-vuex.html 126 | guide/migration.html: v2/guide/migration.html 127 | guide/mixins.html: v2/guide/mixins.html 128 | guide/plugins.html: v2/guide/plugins.html 129 | guide/reactivity.html: v2/guide/reactivity.html 130 | guide/render-function.html: v2/guide/render-function.html 131 | guide/routing.html: v2/guide/routing.html 132 | guide/single-file-components.html: v2/guide/single-file-components.html 133 | guide/ssr.html: v2/guide/ssr.html 134 | guide/state-management.html: v2/guide/state-management.html 135 | guide/syntax.html: v2/guide/syntax.html 136 | guide/transitioning-state.html: v2/guide/transitioning-state.html 137 | guide/transitions.html: v2/guide/transitions.html 138 | guide/unit-testing.html: v2/guide/unit-testing.html 139 | examples/commits.html: v2/examples/commits.html 140 | examples/elastic-header.html: v2/examples/elastic-header.html 141 | examples/firebase.html: v2/examples/firebase.html 142 | examples/grid-component.html: v2/examples/grid-component.html 143 | examples/hackernews.html: v2/examples/hackernews.html 144 | examples/index.html: v2/examples/index.html 145 | examples/modal.html: v2/examples/modal.html 146 | examples/select2.html: v2/examples/select2.html 147 | examples/svg.html: v2/examples/svg.html 148 | examples/todomvc.html: v2/examples/todomvc.html 149 | examples/tree-view.html: v2/examples/tree-view.html 150 | 151 | -------------------------------------------------------------------------------- /src/v2/guide/conditional.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 条件渲染 3 | type: guide 4 | order: 7 5 | --- 6 | 7 | ## `v-if` 8 | 9 | 在字符串模板中，如 Handlebars ，我们得像这样写一个条件块： 10 | 11 | ``` html 12 | 13 | {{#if ok}} 14 |

    Yes

    15 | {{/if}} 16 | ``` 17 | 18 | 在 Vue.js ，我们使用 `v-if` 指令实现同样的功能： 19 | 20 | ``` html 21 |

    Yes

    22 | ``` 23 | 24 | 也可以用 `v-else` 添加一个 "else" 块： 25 | 26 | ``` html 27 |

    Yes

    28 |

    No

    29 | ``` 30 | 31 | ### `