├── .ci ├── deploy.sh └── deploy_key.enc ├── .editorconfig ├── .gitignore ├── .nvmrc ├── .travis.yml ├── LICENSE ├── README.md ├── UPDATE.md ├── _config.yml ├── assets ├── data.ai ├── hn-architecture.ai ├── icons.psd ├── lifecycle.ai ├── logo.ai ├── mvvm.ai ├── props_and_events.ai ├── state.ai └── why-vue │ ├── chinese.js.srt │ ├── english.js.srt │ └── french.js.srt ├── package-lock.json ├── package.json ├── pre-deploy.js ├── src ├── _posts │ ├── 011-component.md │ ├── 012-release.md │ ├── 1.0.0-release.md │ ├── announcing-2.0.md │ ├── common-gotchas.md │ ├── march-update.md │ ├── vue-011-release.md │ ├── vue-cli.md │ ├── vue-next.md │ ├── vuejs-010-release.md │ └── why-no-template-url.md ├── about │ └── index.md ├── images │ ├── breakpoint_hit.png │ ├── breakpoint_set.png │ ├── components.png │ ├── config_add.png │ ├── data.png │ ├── devtools-storage-chrome.png │ ├── devtools-storage-edge.png │ ├── devtools-storage.png │ ├── devtools-timetravel.gif │ ├── dom-tree.png │ ├── hn-architecture.png │ ├── hn.png │ ├── lifecycle.png │ ├── logged-proxied-data.png │ ├── memory-leak-example.png │ ├── mvvm.png │ ├── props-events.png │ ├── search-by-algolia.png │ ├── state.png │ ├── transition.png │ ├── typescript-type-error.png │ ├── umoon.png │ ├── vue-component-with-preprocessors.png │ ├── vue-component.png │ └── vuetron-heirarchy.gif ├── index.md ├── menu │ └── index.md ├── perf │ └── index.md ├── support-vuejs │ └── index.md └── v2 │ ├── api │ └── index.md │ ├── cookbook │ ├── adding-instance-properties.md │ ├── avoiding-memory-leaks.md │ ├── client-side-storage.md │ ├── creating-custom-scroll-directives.md │ ├── debugging-in-vscode.md │ ├── dockerize-vuejs-app.md │ ├── editable-svg-icons.md │ ├── form-validation.md │ ├── index.md │ ├── packaging-sfc-for-npm.md │ ├── serverless-blog.md │ ├── unit-testing-vue-components.md │ └── using-axios-to-consume-apis.md │ ├── examples │ ├── commits.md │ ├── deepstream.md │ ├── elastic-header.md │ ├── firebase.md │ ├── grid-component.md │ ├── hackernews.md │ ├── index.md │ ├── modal.md │ ├── select2.md │ ├── svg.md │ ├── todomvc.md │ └── tree-view.md │ ├── guide │ ├── class-and-style.md │ ├── comparison.md │ ├── components-custom-events.md │ ├── components-dynamic-async.md │ ├── components-edge-cases.md │ ├── components-props.md │ ├── components-registration.md │ ├── components-slots.md │ ├── components.md │ ├── computed.md │ ├── conditional.md │ ├── custom-directive.md │ ├── deployment.md │ ├── events.md │ ├── filters.md │ ├── forms.md │ ├── index.md │ ├── installation.md │ ├── instance.md │ ├── join.md │ ├── list.md │ ├── migration-vue-router.md │ ├── migration-vuex.md │ ├── migration.md │ ├── mixins.md │ ├── plugins.md │ ├── reactivity.md │ ├── render-function.md │ ├── routing.md │ ├── single-file-components.md │ ├── ssr.md │ ├── state-management.md │ ├── syntax.md │ ├── team.md │ ├── transitioning-state.md │ ├── transitions.md │ ├── typescript.md │ └── unit-testing.md │ ├── search │ └── index.md │ └── style-guide │ └── index.md ├── themes └── vue │ ├── _config.yml │ ├── layout │ ├── icons │ │ ├── bch.ejs │ │ ├── btc.ejs │ │ ├── eth.ejs │ │ ├── github-dark.ejs │ │ ├── github.ejs │ │ ├── ltc.ejs │ │ ├── medium.ejs │ │ ├── play.ejs │ │ └── twitter.ejs │ ├── index.ejs │ ├── layout.ejs │ ├── page.ejs │ ├── partials │ │ ├── about_dropdown.ejs │ │ ├── ad-text.ejs │ │ ├── ad.ejs │ │ ├── conf.ejs │ │ ├── ecosystem_dropdown.ejs │ │ ├── header.ejs │ │ ├── language_dropdown.ejs │ │ ├── learn_dropdown.ejs │ │ ├── main_menu.ejs │ │ ├── platinum_sponsors.ejs │ │ ├── sidebar.ejs │ │ ├── sponsors.ejs │ │ ├── sponsors_sidebar.ejs │ │ ├── support_vue_dropdown.ejs │ │ └── toc.ejs │ ├── post.ejs │ ├── search-page.ejs │ └── sponsors-page.ejs │ └── source │ ├── browserconfig.xml │ ├── css │ ├── _ad.styl │ ├── _animations.styl │ ├── _api.styl │ ├── _common.styl │ ├── _demo.styl │ ├── _fonts.styl │ ├── _header.styl │ ├── _migration.styl │ ├── _modal.styl │ ├── _offline-menu.styl │ ├── _scrimba.styl │ ├── _search-page.styl │ ├── _settings.styl │ ├── _sidebar.styl │ ├── _sponsors-index.styl │ ├── _sponsors-page.styl │ ├── _sponsors-sidebar.styl │ ├── _style-guide.styl │ ├── _syntax.styl │ ├── _team.styl │ ├── benchmark.styl │ ├── index.styl │ ├── page.styl │ └── search.styl │ ├── fonts │ ├── Dosis │ │ ├── Dosis-Medium.ttf │ │ └── OFL.txt │ ├── Roboto_Mono │ │ ├── LICENSE.txt │ │ └── RobotoMono-Regular.ttf │ └── Source_Sans_Pro │ │ ├── OFL.txt │ │ ├── SourceSansPro-Light.ttf │ │ ├── SourceSansPro-Regular.ttf │ │ └── SourceSansPro-Semibold.ttf │ ├── images │ ├── 100offer.png │ ├── 2mhost.png │ ├── aaha.png │ ├── actualize.png │ ├── anymod.png │ ├── bit-wide.png │ ├── bit.png │ ├── bmqb.png │ ├── chaitin.png │ ├── check.png │ ├── codepilot.png │ ├── coin-bch.png │ ├── coin-btc.png │ ├── coin-eth.png │ ├── coin-ltc.png │ ├── conf.png │ ├── coreui.png │ ├── datacamp.png │ ├── dopamine.png │ ├── down.png │ ├── famebroker.png │ ├── feed.png │ ├── frontend-love.png │ ├── frontend-meetups.png │ ├── hackr-io.png │ ├── htmlburger.png │ ├── icons.png │ ├── icons │ │ ├── android-icon-144x144.png │ │ ├── android-icon-192x192.png │ │ ├── android-icon-36x36.png │ │ ├── android-icon-48x48.png │ │ ├── android-icon-72x72.png │ │ ├── android-icon-96x96.png │ │ ├── apple-icon-114x114.png │ │ ├── apple-icon-120x120.png │ │ ├── apple-icon-144x144.png │ │ ├── apple-icon-152x152.png │ │ ├── apple-icon-180x180.png │ │ ├── apple-icon-57x57.png │ │ ├── apple-icon-60x60.png │ │ ├── apple-icon-72x72.png │ │ ├── apple-icon-76x76.png │ │ ├── apple-icon-precomposed.png │ │ ├── apple-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon-96x96.png │ │ ├── favicon.ico │ │ ├── ms-icon-144x144.png │ │ ├── ms-icon-150x150.png │ │ ├── ms-icon-310x310.png │ │ └── ms-icon-70x70.png │ ├── icons8.png │ ├── infinitynewtab.png │ ├── itunescn.png │ ├── jsfiddle.png │ ├── jsguru.png │ ├── juejin.png │ ├── laravel.png │ ├── logo.png │ ├── menu.png │ ├── monterail.png │ ├── nativescript.png │ ├── neds.png │ ├── nsoft.png │ ├── onsen-ui.png │ ├── patreon.png │ ├── paypal.png │ ├── piio.png │ ├── pubnub.png │ ├── search.png │ ├── someline.png │ ├── special-sponsor-spot.png │ ├── stdlib.png │ ├── strikingly.png │ ├── tde.png │ ├── teamextension.png │ ├── tidelift.png │ ├── tmvuejs2.png │ ├── tooltwist.png │ ├── upyun-large.png │ ├── upyun-main-2.jpg │ ├── upyun-main-3.jpg │ ├── upyun-main.jpg │ ├── upyun-small.png │ ├── valuecoders.png │ ├── vehikl.png │ ├── vuejobs.png │ ├── vuejobs.svg │ ├── vuejsadmin.png │ ├── vuemastery.png │ ├── vueschool.png │ ├── vuetify.png │ └── xfive.png │ ├── js │ ├── common.js │ ├── css.escape.js │ ├── smooth-scroll.min.js │ ├── vue.js │ └── vue.min.js │ └── manifest.json └── yarn.lock /.ci/deploy.sh: -------------------------------------------------------------------------------- 1 | SOURCE_BRANCH="cn" 2 | 3 | if [ "$TRAVIS_PULL_REQUEST" != "false" -o "$TRAVIS_BRANCH" != "$SOURCE_BRANCH" ]; then 4 | echo "Skipping deploy; just doing a build and linting links/prose/js." 5 | # skip fetching loaders/plugins in cn version 6 | # npm run fetch 7 | npm run build 8 | # npm run lint:prose 9 | # npm run lint:links 10 | # npm test 11 | exit 0 12 | fi 13 | 14 | npm run build 15 | 16 | git config --global user.name "Travis CI" 17 | git config --global user.email "ci@travis-ci.org" 18 | git remote set-url origin git@github.com:docschina/vuejs.org.git 19 | 20 | openssl aes-256-cbc -K $encrypted_7933be997dd9_key -iv $encrypted_7933be997dd9_iv -in .ci/deploy_key.enc -out .ci/deploy_key -d 21 | chmod 600 .ci/deploy_key 22 | eval `ssh-agent -s` 23 | ssh-add .ci/deploy_key 24 | 25 | npm run deploy -------------------------------------------------------------------------------- /.ci/deploy_key.enc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/.ci/deploy_key.enc -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*] 2 | charset = utf-8 3 | indent_style = space 4 | indent_size = 2 5 | end_of_line = lf 6 | insert_final_newline = true 7 | trim_trailing_whitespace = true 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Thumbs.db 3 | db.json 4 | *.log 5 | node_modules/ 6 | public/ 7 | .deploy*/ 8 | src/_drafts 9 | .avoscloud/ 10 | .idea 11 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v8.9.4 -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | branches: 2 | only: 3 | - cn 4 | language: node_js 5 | node_js: 6 | - "8" 7 | script: 8 | - bash ./.ci/deploy.sh 9 | sudo: required 10 | install: 11 | - npm install -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue 中文文档(@印记中文) https://docschina.org/ 2 | [![Travis CI](https://travis-ci.org/docschina/vuejs.org.svg?branch=cn)](https://travis-ci.org/docschina/vuejs.org/) 3 | 4 | 本网站使用 [hexo](http://hexo.io/) 构建。网站内容是由 `src` 中的 Markdown 格式编写的。欢迎各位 pull request！ 5 | 6 | ## Developing 7 | 8 | ``` bash 9 | $ npm install 10 | $ npm start # 访问 http://localhost:4000 11 | ``` 12 | 13 | > 公告说明：https://vue.docschina.org/about/ 14 | -------------------------------------------------------------------------------- /UPDATE.md: -------------------------------------------------------------------------------- 1 | ## 更新记录 2 | 3 | ### 2017.06.15 4 | * 【重新校对】`介绍` 5 | * 【重新校对】`Vue 实例` 6 | * 【记录】https://github.com/docschina/vuejs.org/pull/350 7 | 8 | ### 2017.06.29 9 | * 【重新翻译】`安装` 10 | * 【重新校对】`状态间的过渡` 11 | * 【记录】https://github.com/docschina/vuejs.org/pull/357 12 | 13 | ### 2017.07.05 14 | * 【部分校对】`render 函数 & jsx` 15 | * 【记录】https://github.com/docschina/vuejs.org/pull/359 16 | 17 | ### 2017.07.07 18 | * 【重新校对】`列表渲染` 19 | * 【记录】https://github.com/docschina/vuejs.org/pull/360 20 | 21 | ### 2017.07.11 22 | * 【重新校对】`自定义指令` 23 | * 【记录】https://github.com/docschina/vuejs.org/pull/361 24 | 25 | ### 2017.07.30 26 | * 【重新校对】`组件` 27 | * 【记录】https://github.com/docschina/vuejs.org/pull/361 28 | 29 | ### 2017.08.01 30 | * 【更新】合并 vuejs.org 的 master 分支 31 | * 【记录】https://github.com/docschina/vuejs.org/pull/366 32 | 33 | ### 2017.08.04 34 | * 【重新校对】`Mixin` 35 | * 【重新校对】`编写插件` 36 | * 【更新】合并 cn.vuejs.org 的 API 文档 37 | * 【记录】https://github.com/docschina/vuejs.org/pull/367 38 | * 【记录】https://github.com/docschina/vuejs.org/pull/368 39 | 40 | ### 2017.08.09 41 | * 【重新校对】`模板语法` 42 | * 【记录】https://github.com/docschina/vuejs.org/pull/369 43 | 44 | ### 2017.08.23 45 | * 【重新校对】`computed 属性和 watcher` 46 | * 【记录】https://github.com/docschina/vuejs.org/pull/371 47 | 48 | ### 2017.08.23 49 | * 【重新校对】`class 和 style 绑定` 50 | * 【记录】https://github.com/docschina/vuejs.org/pull/373 51 | 52 | ### 2017.09.06 53 | * 【更新】合并 vuejs.org 的 master 分支 54 | * 【记录】https://github.com/docschina/vuejs.org/pull/375 55 | 56 | ### 2017.09.15 57 | * 【更新】合并 vuejs.org 的 master 分支 58 | * 【记录】https://github.com/docschina/vuejs.org/pull/376 59 | 60 | ### 2017.12.29 61 | * 【更新】将文档服务迁移至腾讯云企业级服务器 62 | 63 | ### 2017.12.31 64 | * 【更新】合并 vuejs.org 的 master 分支 65 | * 【翻译】新增的 `.passive` 修饰符。 66 | * 【重新校对】`事件处理器`事件修饰符(Event Modifiers)以下的部分。 67 | * 【记录】https://github.com/docschina/vuejs.org/pull/379 68 | 69 | ### 2017.12.28 70 | * 【更新】添加 algolia DocSearch，提供文档搜索 71 | * 【记录】https://github.com/docschina/vuejs.org/commit/6c5e9e6513819b03341dfa66115ac8879c841a1d 72 | 73 | ### 2018.01.09 74 | * 【更新】修复 v1 & v0.12 & v0.11 的中文文档链接 75 | * 【记录】https://github.com/docschina/vuejs.org/pull/380 76 | 77 | ### 2018.01.16 78 | * 【更新】合并 cn.vuejs.org 的风格指南文档 79 | * 【重新校对】`根据条件进行渲染`。 80 | * 【记录】https://github.com/docschina/vuejs.org/pull/386 81 | 82 | ### 2018.01.22 83 | * 【更新】合并 vuejs.org 的 master 分支 84 | * 【记录】https://github.com/docschina/vuejs.org/commit/83b9abbfb32c6ad47ce6e8cc8ce5ad8153bad4c3 85 | * 【重新校对】`事件处理器`事件修饰符(Event Modifiers)以上的部分。 86 | * 【重新校对】`表单 input 绑定`。 87 | * 【记录】https://github.com/docschina/vuejs.org/pull/388 88 | 89 | ### 2018.01.24 90 | * 【翻译】API 新增的 `errorCaptured` 部分。 91 | 92 | ### 2018.03.18 93 | * 【更新】合并 vuejs.org 的 master 分支 94 | * 【记录】https://github.com/docschina/vuejs.org/commit/cf9591a4a8c15d9075d8ee309d6244ef3db22dc6 95 | 96 | ### 2018.03.19 97 | * 【更新】合并 vuejs.org 的 master 分支，更新 cookbook。 98 | * 【记录】https://github.com/docschina/vuejs.org/commit/f1273c046b1b321c698381a8a85c8a9d42e59b34 99 | 100 | ### 2018.03.20 101 | * 【翻译】cookbook 的 `单元测试 Vue 组件`。 102 | * 【记录】https://github.com/vuejs/vuejs.org/commit/0492d0c04d9ee3a01e1f4cbf20ec2230e2fee237 103 | 104 | ### 2018.04.01 105 | * 【更新】合并 vuejs.org 的 master 分支，更新 guide/components 部分。 106 | * 【重新翻译】官方重写的 src/v2/guide/components.md 107 | * 【记录】https://github.com/docschina/vuejs.org/pull/393 108 | 109 | ### 2018.08.11 110 | * 【更新】合并 vuejs.org 的 master 分支 111 | 112 | ## 重新校对情况 113 | 114 | -------------------------------------------------------------------------------- /assets/data.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/assets/data.ai -------------------------------------------------------------------------------- /assets/hn-architecture.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/assets/hn-architecture.ai -------------------------------------------------------------------------------- /assets/icons.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/assets/icons.psd -------------------------------------------------------------------------------- /assets/lifecycle.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/assets/lifecycle.ai -------------------------------------------------------------------------------- /assets/logo.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/assets/logo.ai -------------------------------------------------------------------------------- /assets/mvvm.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/assets/mvvm.ai -------------------------------------------------------------------------------- /assets/props_and_events.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/assets/props_and_events.ai -------------------------------------------------------------------------------- /assets/state.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/assets/state.ai -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuejs.org", 3 | "private": true, 4 | "hexo": { 5 | "version": "3.7.0" 6 | }, 7 | "scripts": { 8 | "start": "hexo server", 9 | "build": "node pre-deploy.js && hexo clean && hexo generate", 10 | "deploy": "npm run build && hexo deploy" 11 | }, 12 | "engines": { 13 | "node": ">=8.9.0" 14 | }, 15 | "dependencies": { 16 | "hexo": "^3.6.0", 17 | "hexo-deployer-git": "0.3.1", 18 | "hexo-generator-alias": "git+https://github.com/chrisvfritz/vuejs.org-hexo-generator-alias.git", 19 | "hexo-generator-archive": "^0.1.5", 20 | "hexo-generator-category": "^0.1.3", 21 | "hexo-generator-feed": "^1.2.2", 22 | "hexo-generator-index": "^0.2.1", 23 | "hexo-generator-tag": "^0.2.0", 24 | "hexo-offline": "^0.2.3", 25 | "hexo-renderer-ejs": "^0.3.1", 26 | "hexo-renderer-marked": "^0.3.0", 27 | "hexo-renderer-stylus": "^0.3.3", 28 | "hexo-server": "^0.3.1", 29 | "hoek": "^5.0.3", 30 | "request": "^2.85.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /pre-deploy.js: -------------------------------------------------------------------------------- 1 | // udpate to latest built files of Vue 2 | 3 | const fs = require('fs') 4 | const zlib = require('zlib') 5 | const request = require('request') 6 | const execSync = require('child_process').execSync 7 | 8 | const themeconfPath = 'themes/vue/_config.yml' 9 | const installPath = 'src/v2/guide/installation.md' 10 | const themeconfig = fs.readFileSync(themeconfPath, 'utf-8') 11 | const installation = fs.readFileSync(installPath, 'utf-8') 12 | 13 | // get latest Vue version 14 | console.log(`Checking latest Vue version...`) 15 | const localVersion = themeconfig.match(/vue_version: (.*)/)[1] 16 | const version = execSync('npm view vue version').toString().trim() 17 | 18 | if (localVersion === version) { 19 | console.log(`Version is up-to-date.`) 20 | process.exit(0) 21 | } 22 | 23 | console.log(`Latest version: ${version}. Downloading dist files...`) 24 | 25 | // replace version in theme config 26 | fs.writeFileSync( 27 | themeconfPath, 28 | themeconfig.replace(/vue_version: .*/, 'vue_version: ' + version) 29 | ) 30 | 31 | // grab it from unpkg 32 | Promise.all([ 33 | download(`vue.js`), 34 | download(`vue.min.js`) 35 | ]).then(([ devSize, prodSize ]) => { 36 | // replace installation page version and size 37 | fs.writeFileSync( 38 | installPath, 39 | installation 40 | .replace(/vue_version: .*/, 'vue_version: ' + version) 41 | .replace(/gz_size:.*/g, `gz_size: "${prodSize}"`) 42 | .replace(/\/vue@[\d\.]+\//g, `/vue@${version}/`) 43 | ) 44 | console.log(`\nSuccessfully updated Vue version and gzip file size.\n`) 45 | }).catch(err => { 46 | console.error(err) 47 | process.exit(1) 48 | }) 49 | 50 | function download (file) { 51 | return new Promise((resolve, reject) => { 52 | request({ 53 | url: `http://unpkg.com/vue@${version}/dist/${file}`, 54 | encoding: null 55 | }, (err, res, body) => { 56 | if (err) { 57 | return reject(err) 58 | } 59 | if (res.statusCode != 200) { 60 | return reject( 61 | `unexpected response code when downloading from unpkg: ${res.statusCode}` + 62 | `\n${body.toString()}` 63 | ) 64 | } 65 | fs.writeFile(`themes/vue/source/js/${file}`, body, err => { 66 | if (err) return reject(err) 67 | zlib.gzip(body, (err, zipped) => { 68 | if (err) return reject(err) 69 | resolve((zipped.length / 1024).toFixed(2)) 70 | }) 71 | }) 72 | }) 73 | }) 74 | } 75 | -------------------------------------------------------------------------------- /src/_posts/011-component.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 0.11 Component Tips 3 | date: 2014-12-08 15:02:14 4 | tags: 5 | --- 6 | 7 |

Note: this post contains information for the outdated 0.11 version. Please refer to the [0.12 release notes](https://github.com/yyx990803/vue/releases) for the changes in the API.

8 | 9 | The release of 0.11 introduced [many changes](https://github.com/yyx990803/vue/blob/master/changes.md), but the most important one is how the new component scope works. Previously in 0.10.x, components have inherited scope by default. That means in a child component template you can reference parent scope properties. This often leads to tightly-coupled components, where a child component assumes knowledge of what properties are present in the parent scope. It is also possible to accidentally refer to a parent scope property in a child component. 10 | 11 | 12 | 13 | ### Isolated Scope and Data Passing 14 | 15 | Starting in 0.11, all child components have isolated scope by default, and the recommended way to control component data access is via [Explicit Data Passing](/guide/components.html#Explicit_Data_Passing) using [`v-with`](/api/directives.html#v-with) or [`paramAttributes`](/api/options.html#paramAttributes). 16 | 17 | `paramAttributes` enables us to write Web Component style templates: 18 | 19 | ``` js 20 | Vue.component('my-component', { 21 | paramAttributes: ['params'], 22 | compiled: function () { 23 | console.log(this.params) // passed from parent 24 | } 25 | }) 26 | ``` 27 | 28 | ``` html 29 | 30 | ``` 31 | 32 | ### Where Does It Belong? 33 | 34 | Previously in 0.10, all directives on a component's container element are compiled in the child component's scope. Because it inherited parent scope, this worked in most situations. Starting in 0.11.1, we want to provide a cleaner separation between component scopes. The rule of thumbs is: if something appears in the parent template, it will be compiled in parent scope; if it appears in child template, it will be compiled in child scope. For example: 35 | 36 | ``` html 37 | 38 |
39 |

{{parentMessage}}

40 |
41 | ``` 42 | 43 | ``` html 44 | 45 |
46 |

{{childMessage}}

47 | 48 |
49 | ``` 50 | 51 | Everything in the parent template will be compiled in the parent's scope, including the content that's going to be inserted into the child component. 52 | 53 | The only exception to the rule is `v-with` (and `paramAttributes` which compiles down to `v-with`), which works in both places - so you don't need to worry about it too much. 54 | 55 | ### Cleaner Event Communication 56 | 57 | Previously the standard way for a child component to communicate to its parent is via dispatching events. However, with this approach, the event listeners on the parent component are not guaranteed to be listening on the desired child component only. It's also possible to trigger undesired listeners further up the chain if we do not cancel the event. 58 | 59 | The most common use case is for a parent to react to the events from a specific, direct child component. So in 0.11.4, [a new directive `v-events`](/api/directives.html#v-events) has been introduced to enable exactly this behavior. 60 | 61 | 0.11.4 has already been released, go try it out! 62 | -------------------------------------------------------------------------------- /src/_posts/1.0.0-release.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vue.js 1.0.0 Released 3 | date: 2015-10-26 10:00:00 4 | --- 5 | 6 | > Hi HN! If you are not familiar with Vue.js, you might want to read this [blog post](http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/) for a higher level overview. 7 | 8 | After 300+ commits, 8 alphas, 4 betas and 2 release candidates, today I am very proud to announce the release of [Vue.js 1.0.0 Evangelion](https://github.com/vuejs/vue/releases/tag/1.0.0)! Many thanks to all those who participated in the API re-design process - it would not have been possible without all the input from the community. 9 | 10 | 11 | 12 | ### Improved Template Syntax 13 | 14 | The 1.0 template syntax resolves a lot of subtle consistency issues and makes Vue templates more concise and more readable in general. The most notable new feature is the shorthand syntax for `v-on` and `v-bind`: 15 | 16 | ``` html 17 | 18 | 19 | 20 | 21 | 22 | ``` 23 | 24 | When used on a child component, `v-on` listens for custom events and `v-bind` can be used to bind props. The shorthands using child components very succinct: 25 | 26 | ``` html 27 | 31 | 32 | ``` 33 | 34 | ### API Cleanup 35 | 36 | The overall goal for Vue.js 1.0 is to make it suitable for larger projects. This is why there are many API deprecations. Except for ones that are barely used, the most common reason for a deprecation is that the feature leads to patterns that damages maintainability. Specifically, we are deprecating features that make it hard to maintain and refactor a component in isolation without affecting the rest of the project. 37 | 38 | For example, the default asset resolution in 0.12 has implicit fallbacks to parents in the component tree. This makes the assets available to a component non-deterministic and subject how it is used at runtime. In 1.0, all assets are now resolved in strict mode and there are no longer implicit fallbacks to parent. The `inherit` option is also removed, because it too often leads to tightly coupled components that are hard to refactor. 39 | 40 | ### Faster Initial Rendering 41 | 42 | 1.0 replaces the old `v-repeat` directive with `v-for`. In addition to providing the same functionality and more intuitive scoping, `v-for` provides up to **100%** initial render performance boost when rendering large lists and tables! 43 | 44 | ### More Powerful Tooling 45 | 46 | There are also exciting things going on outside of Vue.js core - [vue-loader](https://github.com/vuejs/vue-loader) and [vueify](https://github.com/vuejs/vueify) have received major upgrades including: 47 | 48 | - Hot component reloading. When a `*.vue` component is edited, all of its active instances are hot swapped without reloading the page. This means when making small changes, e.g. tweaking the styles or the template, your app doesn't need to fully reload; the state of the app the swapped component can be preserved, drastically improving the development experience. 49 | 50 | - Scoped CSS. By simply adding a `scoped` attribute to your `*.vue` component style tags, the component's template and final generated CSS are magically re-written to ensure a component's styles are only applied to its own elements. Most importantly, the styles specified in a parent component **does not** leak down to child components nested within it. 51 | 52 | - ES2015 by default. JavaScript is evolving. You can write much cleaner and expressive code using the latest syntax. `vue-loader` and `vueify` now transpiles the JavaScript in your `*.vue` components out of the box, without the need for extra setup. Write future JavaScript today! 53 | 54 | Combined with [vue-router](https://github.com/vuejs/vue-router), Vue.js is now more than a library - it provides a solid foundation for building complex SPAs. 55 | 56 | ### What's Next? 57 | 58 | As what 1.0.0 usually suggests, the core API will stay stable for the foreseeable future and the library is ready for production use. Future development will focus on: 59 | 60 | 1. Improving `vue-router` and make it production ready. 61 | 62 | 2. Streamlining the developer experience, e.g. a better devtool and a CLI for scaffolding Vue.js projects and components. 63 | 64 | 3. Providing more learning resources such as tutorials and examples. 65 | -------------------------------------------------------------------------------- /src/_posts/common-gotchas.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Common Beginner Gotchas 3 | date: 2016-02-06 10:00:00 4 | --- 5 | 6 | There are few types of questions that we frequently see from users who are new to Vue.js. Although they are all mentioned somewhere in the guide, they are easy to miss and can be hard to find when you do get bitten by the gotchas. Therefore we are aggregating them in this post and hopefully it can save you some time! 7 | 8 | 9 | 10 | ### Why isn't the DOM updating? 11 | 12 | Most of the time, when you change a Vue instance's data, the view updates. But there are two edge cases: 13 | 14 | 1. When you are **adding a new property** that wasn't present when the data was observed. Due to the limitation of ES5 and to ensure consistent behavior across browsers, Vue.js cannot detect property addition/deletions. The best practice is to always declare properties that need to be reactive upfront. In cases where you absolutely need to add or delete properties at runtime, use the global [`Vue.set`](/api/#Vue-set) or [`Vue.delete`](/api/#Vue-delete) methods. 15 | 16 | 2. When you modify an Array by directly setting an index (e.g. `arr[0] = val`) or modifying its `length` property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method `arr.$set(index, value)` which is syntax sugar for `arr.splice(index, 1, value)`. 17 | 18 | Further reading: [Reactivity in Depth](/guide/reactivity.html) and [Array Change Detection](http://vuejs.org/guide/list.html#Array-Change-Detection). 19 | 20 | ### When is the DOM updated? 21 | 22 | Vue.js uses an asynchronous queue to batch DOM updates. This means when you modify some data, the DOM updates do not happen instantly: they are applied asynchronously when the queue is flushed. So how do you know when the DOM has been updated? Use `Vue.nextTick` right after you modify the data. The callback function you pass to it will be called once the queue has been flushed. 23 | 24 | Further reading: [Async Update Queue](/guide/reactivity.html#Async-Update-Queue). 25 | 26 | ### Why does `data` need to be a function? 27 | 28 | In the basic examples, we declare the `data` directly as a plain object. This is because we are creating only a single instance with `new Vue()`. However, when defining a **component**, `data` must be declared as a function that returns the initial data object. Why? Because there will be many instances created using the same definition. If we still use a plain object for `data`, that same object will be **shared by reference** across all instance created! By providing a `data` function, every time a new instance is created we can call it to return a fresh copy of the initial data. 29 | 30 | Further reading: [Component Option Caveats](/guide/components.html#Component-Option-Caveats). 31 | 32 | ### HTML case insensitivity 33 | 34 | All Vue.js templates are valid, parsable HTML markup, and Vue.js relies on spec-compliant parsers to process its templates. However, as specified in the standard, HTML is case-insensitive when matching tag and attribute names. This means camelCase attributes like `:myProp="123"` will be matched as `:myprop="123"`. As a rule of thumb, you should use camelCase in JavaScript and kebab-case in templates. For example a prop defined in JavaScript as `myProp` should be bound in templates as `:my-prop`. 35 | 36 | Further reading: [camelCase vs. kebab-case](http://vuejs.org/guide/components.html#camelCase-vs-kebab-case). 37 | 38 | We are also discussing the possibility of eliminating this inconsistency by resolving props and components in a case-insensitive manner. Join the conversation [here](https://github.com/vuejs/vue/issues/2308). 39 | -------------------------------------------------------------------------------- /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/_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 | -------------------------------------------------------------------------------- /src/_posts/vue-cli.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Announcing vue-cli 3 | date: 2015-12-28 00:00:00 4 | --- 5 | 6 | Recently there has been a lot of [discussion around the tooling hurdle](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.chg95e5p6) when you start a React project. Luckily for Vue.js, all you need to do to start with a quick prototype is including it from a CDN via a ` 119 | ``` 120 | 121 | ## 致谢 122 | 123 | 这个案例是基于 [Kenneth Auchenberg](https://twitter.com/auchenberg) 贡献在[这里](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli)的文章而撰写的。 124 | -------------------------------------------------------------------------------- /src/v2/cookbook/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 介绍 3 | type: cookbook 4 | order: 0 5 | --- 6 | 7 | ## Cookbook vs 指南 8 | 9 | 这份 cookbook 和指南的不同之处在哪里？存在的意义是什么？ 10 | 11 | * **更专注**：在指南里，我们实际上是在讲一个故事。每个章节都以之前章节的知识进行构建和假设。而在 cookbook 里，每个案例都有各自的代表性。也就是说每个案例都专注于 Vue 的某个特定方面，而不是一个概览。 12 | 13 | * **更有深度**：为了避免指南写得太长，我们试着只包含了尽可能简单的示例来帮助你理解每个功能，然后就奔下一个话题了。在 cookbook 里，我们以更生动的形式包含了更复杂的示例并结合特性。每个案例都可以尽可能的翔实，以彻底探索这个领域。 14 | 15 | * **传授 JavaScript**：在指南里，我们假设你至少具有 ES5 JavaScript 的中级水平。例如，我们不会解释 `Array.prototype.filter` 在计算属性中是如何过滤一个列表的。然而在 cookbook 里，我们将对一些必要的 JavaScript 特性 (包括 ES6/2015+) 进行探索和解释，以帮助我们构建更好的 Vue 应用。 16 | 17 | * **探索生态系统**：对于高级特性，我们会假设你已经对生态系统有一定了解。例如，如果你想在 webpack 中使用单文件组件，我们不会解释如何在 webpack 中配置 Vue 以外的部分。在 cookbook 里，我们有空间去更深度探索这些生态系统中的库——至少能到对 Vue 开发者普遍使用的程度。 18 | 19 | ## 参与 Cookbook 贡献 20 | 21 | ### 我们的目标 22 | 23 | Cookbook 为开发者提供了一些示例，涵盖常见的或有趣的用例，并逐步解释更复杂的细节。我们的目标是超越一个简单的示例介绍，展现更广泛适用的概念及其注意事项。 24 | 25 | 如果你有兴趣参与贡献，请将您的想法填入 issue 并加上 **cookbook idea** 的标签作为起步，这样我们就可以帮助并引导您完成一个 pull request。在你的想法被认同之后，请尽可能遵循以下模板。有些小节是必须的，有些是可选的。我们强烈建议您遵循其顺序，但这也不是必须的。 26 | 27 | 通常情况下案例应该： 28 | 29 | > * 解决一个具体的普遍性问题 30 | > * 从尽可能简单的示例开始 31 | > * 一次只介绍一个复杂的点 32 | > * 链接到其它文档，而不是在这里重新解释概念 33 | > * 把问题描述清楚，而不是假设大家对这个问题很熟悉 34 | > * 解释过程，而不是只告诉你最终结果 35 | > * 解释策略的利弊，包括它不适用于什么场景 36 | > * 会提及相关的替代方案，但会放到一个单独的案例中细讲 37 | 38 | 我们需要您遵照下面的模板。当然我们也理解有的时候为了使内容更清晰或顺畅你是有必要做一些调整的。另外不论怎样，所有的案例都应该从某些点上讨论选择使用这个模式的细微差别，且我们倾向于它们以替代方案章节的形式出现。 39 | 40 | ### 基本的示例 41 | 42 | *必须的* 43 | 44 | 1. 用一两句话来说明问题。 45 | 2. 用一两句话解释最简单的可能的解决方案。 46 | 3. 显示一小段代码示例。 47 | 4. 用一句话解释它完成了什么。 48 | 49 | ### 关于其价值的细节 50 | 51 | *必须的* 52 | 53 | 1. 解决人们在看例子时可能遇到的常见问题。(最好以块引用格式呈现) 54 | 2. 显示常见错误的例子，以及如何避免它们。 55 | 3. 用非常简单的代码示例展示好模式和坏模式。 56 | 4. 讨论这个模式令人信服的理由。参考链接不是必需的，但鼓励提供。 57 | 58 | ### 实际的例子 59 | 60 | *必须的* 61 | 62 | 通过以下方式演示能够为常见或有趣的用例提供支持的代码： 63 | 64 | 1. 通过几个简单的设置例子，或者 65 | 2. 嵌入一个 CodePen / JSFiddle 的例子 66 | 67 | 如果你选择稍后再提供，那么你仍应该表述它是什么和做什么。 68 | 69 | ### 额外的上下文 70 | 71 | *可选的* 72 | 73 | 为这个模式写点东西，描述在这个模式下，它会应用到什么地方，为什么它能正常工作；以及在此基础上运行一些代码、提供一些延伸阅读材料，都是非常有帮助的。 74 | 75 | ### 何时避免这个模式 76 | 77 | *可选的* 78 | 79 | 本节不是必需的，但强烈建议。你没有必要写一些特别简单易懂的事项，比如根据状态的改变开关 class，但是对于 mixin 这样的更高阶的模式来说是非常重要的。大多数高阶的问题的答案都是[“要看情况！”](https://codepen.io/rachsmith/pen/YweZbG)，该部分就包含了这一点。在此，我们要诚实地看待模式何时有用，何时应该避免，什么时候更有意义。 80 | 81 | ### 替代方案 82 | 83 | *可选的，除非这部分内容在之前已经提供过了* 84 | 85 | 如果你已经在上一节提供了避免使用的条件，那么这一节是必须的。探索其它方法非常重要，这样人们在遇到某些反模式的情形时不至于无所适从。这样做是因为考虑到 web 是一个不同人有着不同代码结构解决不同问题的大舞台。这个应用是大是小？它们要把 Vue 集成到一个现成的项目中还是从零起步构建新项目？它们的用户只是想达成一个目标还是多个？有很多异步数据吗？所有的这些担忧都会影响实现替代品。一篇好的 cookbook 会为开发者提供这些相关信息。 86 | 87 | ## 致谢 88 | 89 | 文档贡献是需要很多时间的，如果您花时间提交这部分的文档，我们将感激不尽。 90 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/v2/examples/deepstream.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Realtime with deepstreamHub 3 | type: examples 4 | order: 9 5 | --- 6 | 7 | > This example uses [deepstreamHub](https://deepstreamhub.com/) to synchronize realtime data, send events and make remote procedure calls between clients (you can try opening it in multiple browser windows). 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/v2/examples/elastic-header.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 具有伸缩性的 Header 3 | type: examples 4 | order: 7 5 | --- 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/v2/examples/firebase.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Firebase + 验证 3 | type: examples 4 | order: 10 5 | --- 6 | 7 | > 本示例使用 [Firebase](https://firebase.google.com/) 作为数据存储后端，同时在客户端进行数据实时同步（你可以在多个浏览器窗口去打开它来验证）。另外，它通过计算属性实时验证，并且添加／移除选项时触发 CSS 过渡。 8 | 9 | -------------------------------------------------------------------------------- /src/v2/examples/grid-component.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 网格组件 3 | type: examples 4 | order: 3 5 | --- 6 | 7 | > 本示例创建了一个可复用组件，可结合外部数据来使用它。 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/v2/examples/hackernews.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HackerNews 克隆 3 | type: examples 4 | order: 12 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 | -------------------------------------------------------------------------------- /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/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/svg.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: SVG 图表 3 | type: examples 4 | order: 5 5 | --- 6 | 7 | > 本示例展示了一个结合体，它由常用组件、计算属性、2 种绑定方式和 SVG 的支持组成。 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/v2/examples/todomvc.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: TodoMVC 3 | type: examples 4 | order: 11 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 | -------------------------------------------------------------------------------- /src/v2/examples/tree-view.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 树形视图 3 | type: examples 4 | order: 4 5 | --- 6 | 7 | > 本示例是一个简单的树形视图实现，它展现了组件的递归使用。 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/v2/guide/deployment.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 生产环境部署 3 | type: guide 4 | order: 401 5 | --- 6 | 7 | ## 开启生产环境模式 8 | 9 | 开发时，Vue 会提供很多警告来帮你解决常见的错误与陷阱。生产时，这些警告语句却没有用，反而会增加你的载荷量。再次，有些警告检查有小的运行时开销，生产环境模式下是可以避免的。 10 | 11 | ### 不用打包工具 12 | 13 | 如果用 Vue 完整独立版本（直接用 ` 67 | {% endraw %} 68 | 69 | 过滤器函数总是接收表达式的值（值的结果是，过滤器链中的上一个过滤器返回的值），作为第一个参数。在上面这个例子中 `capitalize` 过滤器函数，将 `message` 的值作为参数接收。 70 | 71 | 可以如下链式调用过滤器： 72 | 73 | ``` html 74 | {{ message | filterA | filterB }} 75 | ``` 76 | 77 | 在这个例子中，`filterA` 被定义为接收单个参数的过滤器函数，表达式 `message` 的值将作为参数传入到函数中，然后继续调用同样被定义为接收单个参数的过滤器函数 `filterB`，将 `filterA` 的结果传递到 `filterB` 中。 78 | 79 | 由于过滤器函数是 JavaScript 函数，也因此可以接收多个参数： 80 | 81 | ``` html 82 | {{ message | filterA('arg1', arg2) }} 83 | ``` 84 | 85 | 这里，`filterA` 被定义为接收三个参数的过滤器函数。其中 `message` 的值作为第一个参数，普通字符串 `'arg1'` 作为第二个参数，表达式 `arg2` 取值后的值作为第三个参数。 86 | -------------------------------------------------------------------------------- /src/v2/guide/instance.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vue 实例 3 | type: guide 4 | order: 3 5 | --- 6 | 7 | ## 创建一个 Vue 实例 8 | 9 | 每个 Vue 应用程序都是通过 `Vue` 函数创建出一个新的 **Vue 实例**开始的： 10 | 11 | ```js 12 | var vm = new Vue({ 13 | // 选项 14 | }) 15 | ``` 16 | 17 | 尽管没有完全遵循 [MVVM 模式](https://en.wikipedia.org/wiki/Model_View_ViewModel)，但是 Vue 的设计仍然受到了它的启发。作为约定，通常我们使用变量 `vm` (ViewModel 的简称) 来表示 Vue 实例。 18 | 19 | 在创建一个 Vue 实例时，你会传入一个**选项对象(options object)**。本指南的大部分内容描述了，如何使用选项来达成预期的行为。可以在 [API 参考文档](../api/#Options-Data)中浏览选项(options)的完整列表。 20 | 21 | Vue 应用程序由「一个使用 `new Vue` 创建的 **Vue 根实例**」、「嵌套的树结构（可选）」和「可复用的组件」组成。例如，一个 todo 应用程序的组件树可能如下所示： 22 | 23 | ``` 24 | 根实例(Root Instance) 25 | └─ TodoList 26 | ├─ TodoItem 27 | │ ├─ DeleteTodoButton 28 | │ └─ EditTodoButton 29 | └─ TodoListFooter 30 | ├─ ClearTodosButton 31 | └─ TodoListStatistics 32 | ``` 33 | 34 | 稍后，我们将详细介绍[组件系统](components.html)。现在，只需要知道，所有 Vue 组件，都是 Vue 实例，并且组件都接收相同的选项对象（除了一些根实例特有(root-specific)的选项）。 35 | 36 | ## data 和 methods 37 | 38 | 在创建 Vue 实例时，会将所有在 `data` 对象中找到的属性，都添加到 Vue 的**响应式系统**中。每当这些属性的值发生变化时，视图都会“及时响应”，并更新相应的新值。 39 | 40 | ```js 41 | // data 对象 42 | var data = { a: 1 } 43 | 44 | // 此对象将会添加到 Vue 实例上 45 | var vm = new Vue({ 46 | data: data 47 | }) 48 | 49 | // 在实例上获取属性 50 | // 将返回原始数据中的属性 51 | vm.a == data.a // => true 52 | 53 | // 设置实例上的属性， 54 | // 也会影响原始数据 55 | vm.a = 2 56 | data.a // => 2 57 | 58 | // ... 反之亦然 59 | data.a = 3 60 | vm.a // => 3 61 | ``` 62 | 63 | 每当 data 对象发生变化，都会触发视图重新渲染。值得注意的是，如果实例已经创建，那么只有那些 `data` 中的原本就已经存在的属性，才是**响应式**的。也就是说，如果在实例创建之后，添加一个新的属性，例如： 64 | 65 | ```js 66 | vm.b = 'hi' 67 | ``` 68 | 69 | 然后，修改 `b` 不会触发任何视图更新。如果你已经提前知道，之后将会用到一个开始是空的或不存在的属性，你需要预先设置一些初始值。例如： 70 | 71 | ```js 72 | data: { 73 | newTodoText: '', 74 | visitCount: 0, 75 | hideCompletedTodos: false, 76 | todos: [], 77 | error: null 78 | } 79 | ``` 80 | 81 | 这里唯一的例外是，使用 `Object.freeze()` 来防止已有属性被修改，这也意味着响应式系统无法_追踪_变化。 82 | 83 | ```js 84 | var obj = { 85 | foo: 'bar' 86 | } 87 | 88 | Object.freeze(obj) 89 | 90 | new Vue({ 91 | el: '#app', 92 | data: obj 93 | }) 94 | ``` 95 | 96 | ```html 97 |
98 |

{{ foo }}

99 | 100 | 101 |
102 | ``` 103 | 104 | 除了 data 属性， Vue 实例还暴露了一些有用的实例属性和方法。这些属性与方法都具有前缀 `$`，以便与用户定义(user-defined)的属性有所区分。例如： 105 | 106 | ```js 107 | var data = { a: 1 } 108 | var vm = new Vue({ 109 | el: '#example', 110 | data: data 111 | }) 112 | 113 | vm.$data === data // => true 114 | vm.$el === document.getElementById('example') // => true 115 | 116 | // $watch 是一个实例方法 117 | vm.$watch('a', function (newValue, oldValue) { 118 | // 此回调函数将在 `vm.a` 改变后调用 119 | }) 120 | ``` 121 | 122 | 稍后，可以查阅 [API 参考文档](../api/#Instance-Properties)，来获取实例属性(instance property)和方法(methods)的完整列表。 123 | 124 | ## 实例生命周期钩子函数 125 | 126 | 每个 Vue 实例在被创建之前，都要经过一系列的初始化过程 - 例如，Vue 实例需要设置数据观察(set up data observation)、编译模板(compile the template)、在 DOM 挂载实例(mount the instance to the DOM)，以及在数据变化时更新 DOM(update the DOM when data change)。在这个过程中，Vue 实例还会调用执行一些**生命周期钩子函数**，这样用户能够在特定阶段添加自己的代码。 127 | 128 | 例如，在实例创建后将调用 [`created`](../api/#created) 钩子函数： 129 | 130 | ```js 131 | new Vue({ 132 | data: { 133 | a: 1 134 | }, 135 | created: function () { 136 | // `this` 指向 vm 实例 137 | console.log('a is: ' + this.a) 138 | } 139 | }) 140 | // => "a is: 1" 141 | ``` 142 | 143 | 也有一些其它的钩子，会在实例生命周期的不同阶段调用，如 [`mounted`](../api/#mounted)、[`updated`](../api/#updated) 和 [`destroyed`](../api/#destroyed)。所有的钩子函数在调用时，其 `this` 上下文都会指向调用它的 Vue 实例。 144 | 145 |

不要在选项属性或者回调函数中使用[箭头函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)（例如，`created: () => console.log(this.a)` 或 `vm.$watch('a', newValue => this.myMethod())`）。因为箭头函数会绑定父级上下文，所以 `this` 不会按照预期指向 Vue 实例，经常会产生一些错误，例如 `Uncaught TypeError: Cannot read property of undefined` 或者 `Uncaught TypeError: this.myMethod is not a function`。

146 | 147 | ## 生命周期示意图 148 | 149 | 下面是实例生命周期示意图。你不需要现在就完全明白一切，但是，当你深入学习和组织架构的时候，这个示意图会是很有帮助的参考。 150 | 151 | ![Vue 实例的生命周期](/images/lifecycle.png) 152 | -------------------------------------------------------------------------------- /src/v2/guide/join.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 加入 Vue.js 社区 3 | type: guide 4 | order: 802 5 | --- 6 | 7 | Vue.js 的社区正在急速增长中，如果你正在阅读本文，这说明你大概已经准备好加入 Vue.js 社区了。欢迎！ 8 | 9 | 现在让我们来解答你能从社区中获得什么以及你能为社区做什么。 10 | 11 | ## 你将享有的资源 12 | 13 | ### 获取帮助 14 | 15 | - [论坛](https://forum.vuejs.org/)：咨询与 Vue 及其生态的相关问题的最佳地点。 16 | - [聊天室](https://chat.vuejs.org/)：一个 Vue 开发者们相互认识和交流的实时聊天室。 17 | - [Meetup](https://www.vuemeetups.org)：想在当地找到像你一样的 Vue.js 爱好者吗？有兴趣成为社区领袖吗？我们在这里为你提供所需的帮助和支持！ 18 | - [GitHub](https://github.com/vuejs)：如果你想报告 bug 或者提出新特性需求，欢迎来 GitHub 提交 issue。我们也非常欢迎 pull request！ 19 | 20 | ### 探索生态 21 | 22 | - [Awesome Vue](https://github.com/vuejs/awesome-vue)：一览其他牛人发布的优秀资源。 23 | - [“Show and Tell”子论坛](https://forum.vuejs.org/c/show-and-tell)：又一个好地方，可以看看他人借助 Vue 生态完成的作品，以及他人为不断壮大的 Vue 生态的贡献。 24 | 25 | ## 你可以参与的方式 26 | 27 | ### 贡献代码 28 | 29 | 和所有的项目一样，贡献代码需要遵循规范。为了保证我们能尽快地帮助你解决问题或者接受你的 pull request，请先阅读这份[贡献指南](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md)。 30 | 31 | 阅读之后，你应该已经准备好向 Vue 的核心仓库贡献代码了： 32 | 33 | - [vue](https://github.com/vuejs/vue)：核心库 34 | - [vuex](https://github.com/vuejs/vuex)：类 Flux 的状态管理 35 | - [vue-router](https://github.com/vuejs/vue-router)：为单页面应用提供的路由系统 36 | 37 | ……还有许多小型的官方[同伴库](https://github.com/vuejs)。 38 | 39 | ### 分享 (并积累) 你的经验 40 | 41 | 除了在论坛或聊天室回答问题、分享资源外，还有一些其它的方式可以分享并增长你的见识： 42 | 43 | - **开发学习资料。**我们常说，最好的学习方法就是教别人。如果你正在用 Vue 做一些有趣的事情，你可以写一篇博客、组织研讨会、甚至创建一个 gist 分享到社交平台上：这些都能加强你的专项知识。 44 | - **关注 (watch) 你关心的仓库。**这样无论何时该仓库有新的动静，你都会第一时间收到通知，得到关于正在进行的讨论以及即将到来的新特性的新鲜情报。这是超棒的积累专业知识的方法，你最终将会有能力来解决问题 (issue) 并提交 pull request。 45 | 46 | ### 翻译文档 47 | 48 | Vue 已经在全球范围内传播开来，核心团队成员甚至来自至少 6 个时区。[论坛](https://forum.vuejs.org/) 已有 7 种语言，数字还在持续增长。我们许多文档都有[积极维护的翻译](https://github.com/vuejs?utf8=%E2%9C%93&query=vuejs.org)。我们非常为 Vue 的国际影响力骄傲，但我们还能做得更好。 49 | 50 | 我希望现在你正在使用你的首选语言阅读这里。如果不是，你愿意帮我们实现它吗？ 51 | 52 | 如果你愿意的话，请随时 fork [这些文档](https://github.com/vuejs/vuejs.org/)或者官方维护的其他文档的仓库，然后开始翻译吧。只要你取得了进展，就请在主仓库开一个 issue 或者 pull request，我们将号召更多的贡献者来进行帮助。 53 | 54 | ### 成为社区领袖 55 | 56 | 在社区中，你可以做很多事情来帮助 Vue 发展： 57 | 58 | - **参加当地的 meetup。**不论是准备一个话题还是组织一个 workshop，你都可以通过帮助新老 Vue 开发者的发展，来为社区带来很多价值。 59 | - **自己组织 meetup。**如果你所在的地方没有人组织 Vue meetup，你可以自己组织起来！要善用 [vuemeetups.org 资源](https://www.vuemeetups.org/resources/#introduction)！ 60 | - **帮助 meetup 组织者。**在举办活动时，帮助永远不嫌多，所以请帮助当地组织者，成功举办每次活动。 61 | 62 | 对于如何参与当地的 Vue 社区，如果你有任何问题，请联系 [hello@vuemeetups.org](mailto:hello@vuemeetups.org) 或 [@VueMeetups](https://www.twitter.com/vuemeetups)！ 63 | -------------------------------------------------------------------------------- /src/v2/guide/migration-vuex.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 从 Vuex 0.6.x 迁移到 1.0 3 | type: guide 4 | order: 703 5 | --- 6 | 7 | > Vuex 2.0 已经发布了，但是这份指南只涵盖迁移到 1.0？这是打错了吗？此外，似乎 Vuex 1.0 和 2.0 也同时发布。这是怎么回事？我该用哪一个并且哪一个兼容 Vue 2.0呢？ 8 | 9 | Vuex 1.0 和 2.0 如下： 10 | 11 | - 都完全支持 Vue 1.0 和 2.0 12 | - 将在可预见的未来保留支持 13 | 14 | 然而它们的目标用户稍微有所不同。 15 | 16 | __Vuex 2.0__ 从根本上重新设计并且提供简洁的 API，用于帮助正在开始一个新项目的用户，或想要用客户端状态管理前沿技术的用户。__此迁移指南不涵盖 Vuex 2.0 相关内容__，因此如果你想了解更多，请查阅 [Vuex 2.0 文档](https://vuex.vuejs.org/en/index.html)。 17 | 18 | __Vuex 1.0__ 主要是向下兼容，所以升级只需要很小的改动。推荐拥有大量现存代码库的用户，或想要尽可能平滑升级 Vue 2.0 的用户。这份指南致力促进这一过程，但仅包括迁移说明。完整使用指南请查阅 [Vuex 1.0 文档](https://github.com/vuejs/vuex/tree/1.0/docs/en)。 19 | 20 | ## 使用字符串属性路径的 `store.watch` 替换 21 | 22 | `store.watch` 现在只接受函数。因此，下面例子你需要替换： 23 | 24 | ``` js 25 | store.watch('user.notifications', callback) 26 | ``` 27 | 28 | 为： 29 | 30 | ``` js 31 | store.watch( 32 | // 当返回结果改变... 33 | function (state) { 34 | return state.user.notifications 35 | }, 36 | // 执行回调函数 37 | callback 38 | ) 39 | ``` 40 | 41 | 这帮助你更加完善的控制那些需要监听的响应式属性。 42 | 43 | {% raw %} 44 |
45 |

升级方法

46 |

在代码库运行迁移工具，查找在 store.watch 中使用字符串作为第一个参数的事例。

47 |
48 | {% endraw %} 49 | 50 | ## Store 的事件触发器 移除 51 | 52 | store 实例不再暴露事件触发器(event emitter)接口(`on`, `off`, `emit`)。如果你之前使用 store 作为全局的 event bus，迁移说明相关内容请查阅[此章节](migration.html#dispatch-and-broadcast-removed)。 53 | 54 | 为了替换正在使用观察 store 自身触发事件的这些接口，（例如：`store.on('mutation', callback)`），我们引入新的方法 `store.subscribe`。在插件中的典型使用方式如下： 55 | 56 | ``` js 57 | var myPlugin = store => { 58 | store.subscribe(function (mutation, state) { 59 | // Do something... 60 | }) 61 | } 62 | 63 | ``` 64 | 65 | 更多信息请查阅[插件文档](https://github.com/vuejs/vuex/blob/1.0/docs/en/plugins.md)的示例。 66 | 67 | {% raw %} 68 |
69 |

升级方式

70 |

在代码库运行迁移工具，查找使用了 store.on, store.off, store.emit 的事例。

71 |
72 | {% endraw %} 73 | 74 | ## 中间件 替换 75 | 76 | 中间件被替换为插件。插件是接收 store 作为仅有参数的基本函数，能够监听 store 中的 mutation 事件： 77 | 78 | ``` js 79 | const myPlugins = store => { 80 | store.subscribe('mutation', (mutation, state) => { 81 | // Do something... 82 | }) 83 | } 84 | ``` 85 | 86 | 更多详情, 请查阅 [插件文档](https://github.com/vuejs/vuex/blob/1.0/docs/en/plugins.md)。 87 | 88 | {% raw %} 89 |
90 |

升级方法

91 |

在代码库运行迁移工具，查找使用了 middlewares 选项的事例。

92 |
93 | {% endraw %} 94 | -------------------------------------------------------------------------------- /src/v2/guide/mixins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: mixin 3 | type: guide 4 | order: 301 5 | --- 6 | 7 | ## 基础 8 | 9 | mixin 是分发 Vue 组件的可复用功能的一种非常灵活方式。每个 mixin 对象可以包含全部组件选项。当组件使用 mixin 对象时，mixin 对象中的全部选项，都会被“混入(mix)”到组件自身的选项当中。 10 | 11 | 例如： 12 | 13 | ``` js 14 | // 定义一个 mixin 对象 15 | var myMixin = { 16 | created: function () { 17 | this.hello() 18 | }, 19 | methods: { 20 | hello: function () { 21 | console.log('来自 mixin 对象的 hello！') 22 | } 23 | } 24 | } 25 | 26 | // 定义一个使用以上 mixin 对象的组件 27 | var Component = Vue.extend({ 28 | mixins: [myMixin] 29 | }) 30 | 31 | var component = new Component() // => "来自 mixin 对象的 hello！" 32 | ``` 33 | 34 | ## 选项合并(option merging) 35 | 36 | 当 mixin 对象和组件自身的选项对象，在二者选项名称相同时，Vue 会选取合适的“合并(merge)”策略。 37 | 38 | 例如，对 data 对象进行浅合并（单个属性深合并），在冲突情况下，优先使用组件的 data。 39 | 40 | ``` js 41 | var mixin = { 42 | data: function () { 43 | return { 44 | message: 'hello', 45 | foo: 'abc' 46 | } 47 | } 48 | } 49 | 50 | new Vue({ 51 | mixins: [mixin], 52 | data: function () { 53 | return { 54 | message: 'goodbye', 55 | bar: 'def' 56 | } 57 | }, 58 | created: function () { 59 | console.log(this.$data) 60 | // => { message: "goodbye", foo: "abc", bar: "def" } 61 | } 62 | }) 63 | ``` 64 | 65 | 具有相同名称的钩子函数，将合并到一个数组中，最终它们会被依次调用。此外，需要注意，mixin 对象中的同名钩子函数，会在组件自身的钩子函数**之前**调用。 66 | 67 | ``` js 68 | var mixin = { 69 | created: function () { 70 | console.log('mixin 对象的钩子函数被调用') 71 | } 72 | } 73 | 74 | new Vue({ 75 | mixins: [mixin], 76 | created: function () { 77 | console.log('组件的钩子函数被调用') 78 | } 79 | }) 80 | 81 | // => "mixin 对象的钩子函数被调用" 82 | // => "组件的钩子函数被调用" 83 | ``` 84 | 85 | 例如，`methods`, `components` 和 `directives`，这些值为对象的选项(option)，则会被合并到相应的选项对象上。但是，在二者的键名(key)发生冲突时，就会优先使用组件选项对象中键值对： 86 | 87 | ``` js 88 | var mixin = { 89 | methods: { 90 | foo: function () { 91 | console.log('foo') 92 | }, 93 | conflicting: function () { 94 | console.log('from mixin') 95 | } 96 | } 97 | } 98 | 99 | var vm = new Vue({ 100 | mixins: [mixin], 101 | methods: { 102 | bar: function () { 103 | console.log('bar') 104 | }, 105 | conflicting: function () { 106 | console.log('from self') 107 | } 108 | } 109 | }) 110 | 111 | vm.foo() // => "foo" 112 | vm.bar() // => "bar" 113 | vm.conflicting() // => "from self" 114 | ``` 115 | 116 | 注意，在 `Vue.extend()` 中，Vue 也使用了与此相同的合并策略。 117 | 118 | ## 全局 mixin(global mixin) 119 | 120 | 也可以在全局使用 mixin。请谨慎使用！一旦在全局中使用了 mixin，就会影响到之后创建的**每个**实例。在用法正确时，可以为自定义选项注入处理逻辑： 121 | 122 | ``` js 123 | // 为自定义选项 `myOption` 注入一个处理函数 124 | Vue.mixin({ 125 | created: function () { 126 | var myOption = this.$options.myOption 127 | if (myOption) { 128 | console.log(myOption) 129 | } 130 | } 131 | }) 132 | 133 | new Vue({ 134 | myOption: 'hello!' 135 | }) 136 | // => "hello!" 137 | ``` 138 | 139 |

请少量且小心谨慎地使用全局 mixin，因为这会影响到之后创建的每个 Vue 实例，包括第三方组件也会受到影响。在多数情况下，如同以上示例中所演示的，你应该只将全局 mixin，用于自定义选项的处理逻辑。还有一个比较不错的做法，就是在[插件](plugins.html)中使用全局 mixin，然后通过调用插件来复用组件功能，以避免应用程序中的重复部分。

140 | 141 | ## 自定义选项的合并策略(custom option merge strategies) 142 | 143 | 在合并自定义选项(custom option)时，Vue 会使用默认策略，即覆盖已有值。如果想要定制自定义选项的合并逻辑，则需要向 `Vue.config.optionMergeStrategies` 添加一个函数： 144 | 145 | ``` js 146 | Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { 147 | // return mergedVal 148 | } 149 | ``` 150 | 151 | 对于大多数基于对象(object-based)的选项，可以使用 `methods` 的合并策略： 152 | 153 | ``` js 154 | var strategies = Vue.config.optionMergeStrategies 155 | strategies.myOption = strategies.methods 156 | ``` 157 | 158 | 可以在 [Vuex](https://github.com/vuejs/vuex) 1.x 的合并策略里，找到一个高级用法示例： 159 | 160 | ``` js 161 | const merge = Vue.config.optionMergeStrategies.computed 162 | Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) { 163 | if (!toVal) return fromVal 164 | if (!fromVal) return toVal 165 | return { 166 | getters: merge(toVal.getters, fromVal.getters), 167 | state: merge(toVal.state, fromVal.state), 168 | actions: merge(toVal.actions, fromVal.actions) 169 | } 170 | } 171 | ``` 172 | -------------------------------------------------------------------------------- /src/v2/guide/plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 插件 3 | type: guide 4 | order: 304 5 | --- 6 | 7 | ## 编写插件 8 | 9 | 插件通常用于为 Vue 添加全局级别的功能。然而对于插件，并没有严格限定其使用范围 - 下面是常见的几种插件类型： 10 | 11 | 1. 添加一些全局方法或属性。例如 [vue-custom-element](https://github.com/karol-f/vue-custom-element) 12 | 13 | 2. 添加一个或多个全局资源(asset)：指令(directives)/过滤器(filters)/过渡(transitions) 等。例如 [vue-touch](https://github.com/vuejs/vue-touch) 14 | 15 | 3. 通过全局 mixin，添加一些组件选项。例如 [vue-router](https://github.com/vuejs/vue-router) 16 | 17 | 4. 添加一些 Vue 实例方法，通过把这些方法添加到 Vue.prototype 上实现。 18 | 19 | 5. 一个可以提供 API 的库(library)，与此同时也是以上功能的组合。例如 [vue-router](https://github.com/vuejs/vue-router) 20 | 21 | Vue.js 插件应该暴露一个 `install` 方法。此方法在调用时，将 `Vue` 构造函数作为第一个参数传入，以及将一个可选的选项作为第二个参数传入： 22 | 23 | ``` js 24 | MyPlugin.install = function (Vue, options) { 25 | // 1. 添加全局方法或属性 26 | Vue.myGlobalMethod = function () { 27 | // 一些逻辑…… 28 | } 29 | 30 | // 2. 添加一个全局资源(asset) 31 | Vue.directive('my-directive', { 32 | bind (el, binding, vnode, oldVnode) { 33 | // 一些逻辑…… 34 | } 35 | ... 36 | }) 37 | 38 | // 3. 注入一些组件选项 39 | Vue.mixin({ 40 | created: function () { 41 | // 一些逻辑…… 42 | } 43 | ... 44 | }) 45 | 46 | // 4. 添加一个实例方法 47 | Vue.prototype.$myMethod = function (methodOptions) { 48 | // 一些逻辑…… 49 | } 50 | } 51 | ``` 52 | 53 | ## 使用插件 54 | 55 | 通过调用全局方法 `Vue.use()` 使用插件： 56 | 57 | ``` js 58 | // 调用 `MyPlugin.install(Vue)` 59 | Vue.use(MyPlugin) 60 | ``` 61 | 62 | 可以根据情况，传入一些可选的选项： 63 | 64 | ``` js 65 | Vue.use(MyPlugin, { someOption: true }) 66 | ``` 67 | 68 | `Vue.use` 会自动阻止多次使用同一个插件，所以对于同一个插件的多次调用，将只安装一次。 69 | 70 | Vue.js 官方提供的一些插件（例如 `vue-router`），如果检测到 `Vue` 是可访问的全局变量，这些插件会自动调用 `Vue.use()`。然而在例如 CommonJS 的模块环境中，你应该始终显式地调用 `Vue.use()`： 71 | 72 | ``` js 73 | // 在使用由 Browserify 或 webpack 这些模块打包工具，提供的 CommonJS 模块环境时 74 | var Vue = require('vue') 75 | var VueRouter = require('vue-router') 76 | 77 | // 不要忘记调用此方法 78 | Vue.use(VueRouter) 79 | ``` 80 | 81 | 在 [awesome-vue](https://github.com/vuejs/awesome-vue#components--libraries) 文档中，汇集了大量由社区贡献的插件(plugins)和库(libraries)。 82 | 83 | *** 84 | 85 | > 译注： 86 | 87 | * 如果检测到 `Vue` 是可访问的全局变量，这些插件会自动调用 `Vue.use()` 88 | 89 | 可以参考 https://github.com/vuejs/vue-router/blob/dev/src/index.js#L233 90 | 91 | ``` javascript 92 | if (inBrowser && window.Vue) { 93 | window.Vue.use(VueRouter) 94 | } 95 | ``` 96 | 97 | *** 98 | -------------------------------------------------------------------------------- /src/v2/guide/reactivity.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 深入响应式原理 3 | type: guide 4 | order: 601 5 | --- 6 | 7 | 现在是时候深入底层原理了！Vue 最显著的特性之一，就是侵入性不是很强的响应式系统(reactivity system)。模型层(model)只是普通 JavaScript 对象，修改它则更新视图(view)。这会让状态管理变得简单且直观，不过理解它的工作原理以避免一些常见的问题也是很重要的。在本节中，我们将开始深入挖掘 Vue 响应式系统的底层细节。 8 | 9 | ## 如何追踪变化 10 | 11 | 把一个普通 Javascript 对象传给 Vue 实例的 `data` 选项，Vue 将遍历此对象所有的属性，并使用 [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) 把这些属性全部转为 getter/setter。Object.defineProperty 是仅 ES5 支持，且无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。 12 | 13 | getter/setter 对于用户来说是不可见的，但是在内部，通过它们可以让 Vue 在访问属性时进行依赖追踪，以及修改属性时进行变更通知。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式并不同，所以你可能需要安装 [vue-devtools](https://github.com/vuejs/vue-devtools) 来获取更加友好的检查接口。 14 | 15 | 每个组件实例都有相应的 **watcher** 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 `setter` 被调用时，会通知 `watcher` 重新计算，从而致使它关联的组件得以更新。 16 | 17 | ![Reactivity Cycle](/images/data.png) 18 | 19 | ## 变化检测问题 20 | 21 | 受现代 Javascript 的限制（以及废弃 `Object.observe`），Vue **无法检测到对象属性的添加或删除**。由于 Vue 会在初始化实例时对属性执行 `getter/setter` 转化过程，所以属性必须在 `data` 对象上存在才能让 Vue 转换它，这样才能让它是响应的。例如： 22 | 23 | ``` js 24 | var vm = new Vue({ 25 | data: { 26 | a: 1 27 | } 28 | }) 29 | // `vm.a` 是响应式的 30 | 31 | vm.b = 2 32 | // `vm.b` 不是响应式的 33 | ``` 34 | 35 | Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用 `Vue.set(object, key, value)` 方法将响应属性添加到嵌套的对象上： 36 | 37 | ``` js 38 | Vue.set(vm.someObject, 'b', 2) 39 | ``` 40 | 41 | 你还可以使用 `vm.$set` 实例方法，这也是全局 `Vue.set` 方法的别名： 42 | 43 | ``` js 44 | this.$set(this.someObject,'b',2) 45 | ``` 46 | 47 | 有时你想向已有对象上添加一些属性，例如使用 `Object.assign()` 或 `_.extend()` 方法来添加属性。但是，添加到对象上的新属性不会触发更新。在这种情况下可以创建一个新的对象，让它包含原对象的属性和新的属性： 48 | 49 | ``` js 50 | // 代替 `Object.assign(this.someObject, { a: 1, b: 2 })` 51 | this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) 52 | ``` 53 | 54 | 也有一些数组相关的问题，之前已经在[列表渲染](list.html#注意事项)中讲过。 55 | 56 | ## 声明响应式属性 57 | 58 | 由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕是一个空值： 59 | 60 | ``` js 61 | var vm = new Vue({ 62 | data: { 63 | // 声明 message 为一个空值字符串 64 | message: '' 65 | }, 66 | template: '
{{ message }}
' 67 | }) 68 | // 之后设置 `message` 69 | vm.message = 'Hello!' 70 | ``` 71 | 72 | 如果你未在 data 选项中声明 `message`，Vue 会警告你 render 函数正在试图访问的一个属性，在实例中并不存在。 73 | 74 | 这样的限制在背后是有其技术原因的，它消除了在依赖项跟踪系统中的一类边界情况，也使 Vue 实例在类型检查系统的帮助下运行的更高效。而且在代码可维护性方面也有一点重要的考虑：`data` 对象就像组件状态的概要，提前声明所有的响应式属性，可以让组件代码在以后重新阅读或其他开发人员阅读时更易于被理解。 75 | 76 | ## 异步更新队列 77 | 78 | 可能你还没有注意到，Vue **异步**执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际（已去重的）工作。Vue 在内部尝试对异步队列使用原生的 `Promise.then` 和 `MessageChannel`，如果执行环境不支持，会采用 `setTimeout(fn, 0)` 代替。 79 | 80 | 例如，当你设置 `vm.someData = 'new value'` ，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 `Vue.nextTick(callback)` 。这样回调函数在 DOM 更新完成后就会调用。例如： 81 | 82 | ```html 83 |
{{ message }}
84 | ``` 85 | 86 | ``` js 87 | var vm = new Vue({ 88 | el: '#example', 89 | data: { 90 | message: '123' 91 | } 92 | }) 93 | vm.message = 'new message' // 更改数据 94 | vm.$el.textContent === 'new message' // false 95 | Vue.nextTick(function () { 96 | vm.$el.textContent === 'new message' // true 97 | }) 98 | ``` 99 | 100 | 在组件内使用 `vm.$nextTick()` 实例方法特别方便，因为它不需要全局 `Vue` ，并且回调函数中的 `this` 将自动绑定到当前的 Vue 实例上： 101 | ``` js 102 | Vue.component('example', { 103 | template: '{{ message }}', 104 | data: function () { 105 | return { 106 | message: 'not updated' 107 | } 108 | }, 109 | methods: { 110 | updateMessage: function () { 111 | this.message = 'updated' 112 | console.log(this.$el.textContent) // => 'not updated' 113 | this.$nextTick(function () { 114 | console.log(this.$el.textContent) // => 'updated' 115 | }) 116 | } 117 | } 118 | }) 119 | ``` 120 | -------------------------------------------------------------------------------- /src/v2/guide/routing.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 路由 3 | type: guide 4 | order: 501 5 | --- 6 | 7 | ## 官方路由 8 | 9 | 对于大多数单页面应用程序，推荐使用官方支持的 [vue-router 库](https://github.com/vuejs/vue-router)。更多细节请查看 vue-router 的[文档](https://router.vuejs.org/)。 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 | 39 | 结合 HTML5 History API，可以构建出一个非常基本但功能全面的客户端路由器(client-side router)。想要了解实际效果，请查看[示例应用程序](https://github.com/chrisvfritz/vue-2.0-simple-routing-example)。 40 | 41 | ## 集成第三方路由 42 | 43 | 如果有个人非常喜欢的第三方路由，如 [Page.js](https://github.com/visionmedia/page.js) 或 [Director](https://github.com/flatiron/director)，与 Vue 集成也[同样轻松](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)。 44 | -------------------------------------------------------------------------------- /src/v2/guide/single-file-components.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 单文件组件 3 | type: guide 4 | order: 402 5 | --- 6 | 7 | ## 介绍 8 | 9 | 在很多 Vue 项目中，我们使用 `Vue.component` 来定义全局组件，紧接着用 `new Vue({ el: '#container '})` 在每个页面内指定一个容器元素。 10 | 11 | 这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显： 12 | 13 | - **全局定义(Global definitions)** 强制要求每个 component 中的命名不得重复 14 | - **字符串模板(String templates)** 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 `\` 15 | - **不支持CSS(No CSS support)** 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏 16 | - **没有构建步骤(No build step)** 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel 17 | 18 | 文件扩展名为 `.vue` 的 **single-file components(单文件组件)** 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。 19 | 20 | 这是一个文件名为 `Hello.vue` 的简单示例： 21 | 22 | Single-file component example (click for code as text) 23 | 24 | 现在我们获得： 25 | 26 | - [完整语法高亮](https://github.com/vuejs/awesome-vue#source-code-editing) 27 | - [CommonJS 模块](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module) 28 | - [组件作用域 CSS](https://vue-loader.vuejs.org/en/features/scoped-css.html) 29 | 30 | 正如我们说过的，我们可以使用预处理器来构建简洁和功能更丰富的组件，比如 Pug，Babel (with ES2015 modules)，和 Stylus。 31 | 32 | Single-file component example with preprocessors (click for code as text) 33 | 34 | 这些特定的语言只是例子，你可以只是简单地使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何能够帮助你提高生产力的预处理器。如果搭配 `vue-loader` 使用 webpack，它也是把 CSS Modules 当作第一公民来对待的。 35 | 36 | ### 怎么看待关注点分离？ 37 | 38 | 一个重要的事情值得注意，**关注点分离不等于文件类型分离。**在现代 UI 开发中，我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来，把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。 39 | 40 | 即便你不喜欢单文件组件，你仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译。 41 | 42 | ``` html 43 | 44 | 47 | 48 | 49 | ``` 50 | 51 | ## 起步 52 | 53 | ### sandbox 代码示例 54 | 55 | 如果你想立即开始使用单文件组件，请在 CodeSandbox 中查看这个简单的 [todo 应用程序](https://codesandbox.io/s/o29j95wx9)。 56 | 57 | ### 针对刚接触 JavaScript 模块开发系统的用户 58 | 59 | 通过 `.vue` 组件，我们就进入了 JavaScript 应用程序高级领域。如果你没有准备好的话，意味着还需要学会使用一些附加的工具： 60 | 61 | - **Node Package Manager (NPM)**: 阅读 [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) 直到 _10: Uninstalling global packages_章节。 62 | 63 | - **Modern JavaScript with ES2015/16**: 阅读 Babel 的 [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). 你不需要立刻记住每一个方法，但是你可以保留这个页面以便后期参考。 64 | 65 | 在你花一些时日了解这些资源之后，我们建议你参考 [webpack](https://vuejs-templates.github.io/webpack)。只要按照说明，你就能无需耗费大量时间，运行一个用到 `.vue` 组件、ES2015 和热重载(hot-reloading)的 Vue 项目! 66 | 67 | 想要了解 webpack 的相关信息，请查看[官方文档](https://webpack.js.org/configuration/) 和 [webpack 学院](https://webpack.academy/p/the-core-concepts)。在 webpack 中，每个模块在打包成 bundle 之前，都会通过一个 "loader" 进行转换，Vue 提供 [vue-loader](https://github.com/vuejs/vue-loader) 插件，来负责执行 `.vue` 单文件组件 的转换. 68 | 69 | ### 针对高级用户 70 | 71 | 无论你更钟情 webpack 或是 Browserify，我们为简单的和更复杂的项目都提供了一些文档模板。我们建议浏览 [github.com/vuejs-templates](https://github.com/vuejs-templates)，找到你需要的部分，然后参考 README 中的说明，使用 [vue-cli](https://github.com/vuejs/vue-cli) 工具生成新的项目。 72 | -------------------------------------------------------------------------------- /src/v2/guide/ssr.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 服务端渲染 3 | type: guide 4 | order: 503 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 | -------------------------------------------------------------------------------- /src/v2/guide/state-management.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 状态管理 3 | type: guide 4 | order: 502 5 | --- 6 | 7 | ## 类 Flux 状态管理的官方实现 8 | 9 | 由于多个状态分散的跨越在许多组件和交互间各个角落，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 [vuex](https://github.com/vuejs/vuex)： 我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 [vue-devtools](https://github.com/vuejs/vue-devtools)，无需配置即可访问 [时光旅行调试(time travel debugging)](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif)。 10 | 11 | ### React 的开发者请参考以下信息 12 | 13 | 如果你是来自 React 的开发者，你可能会对 vuex 和 [redux](https://github.com/reactjs/redux) 间的差异表示关注，redux 是 React 生态环境中最流行的 Flux 实现。Redux 事实上无法感知视图层，所以它能够轻松的通过一些[简单绑定](https://yarnpkg.com/en/packages?q=redux%20vue&p=1)和Vue一起使用。vuex区别在于它是一个专门为 vue 应用所设计。这使得它能够更好地和vue进行整合，同时提供简洁的API和改善过的开发体验。 14 | 15 | ## 简单状态管理起步使用 16 | 17 | 经常被忽略的是，Vue 应用中原始 `数据` 对象的实际来源 - 当访问数据对象时，一个 Vue 实例只是简单的代理访问。所以，如果你有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据来实现共享： 18 | 19 | ``` js 20 | const sourceOfTruth = {} 21 | 22 | const vmA = new Vue({ 23 | data: sourceOfTruth 24 | }) 25 | 26 | const vmB = new Vue({ 27 | data: sourceOfTruth 28 | }) 29 | ``` 30 | 31 | 现在当 `sourceOfTruth` 发生变化，`vmA` 和 `vmB` 都将自动的更新引用它们的视图。子组件们的每个实例也会通过 `this.$root.$data` 去访问。现在我们有了唯一的实际来源，但是，调试将会变为噩梦。任何时间，我们应用中的任何部分，在任何数据改变后，都不会留下变更过的记录。 32 | 33 | 为了解决这个问题，我们采用一个 **store 模式**： 34 | 35 | ``` js 36 | var store = { 37 | debug: true, 38 | state: { 39 | message: 'Hello!' 40 | }, 41 | setMessageAction (newValue) { 42 | if (this.debug) console.log('setMessageAction triggered with', newValue) 43 | this.state.message = newValue 44 | }, 45 | clearMessageAction () { 46 | if (this.debug) console.log('clearMessageAction triggered') 47 | this.state.message = '' 48 | } 49 | } 50 | ``` 51 | 52 | 需要注意，所有 store 中 state 的改变，都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生，以及它们是如何被触发。当错误出现时，我们现在也会有一个 log 记录 bug 之前发生了什么。 53 | 54 | 此外，每个实例/组件仍然可以拥有和管理自己的私有状态： 55 | 56 | ``` js 57 | var vmA = new Vue({ 58 | data: { 59 | privateState: {}, 60 | sharedState: store.state 61 | } 62 | }) 63 | 64 | var vmB = new Vue({ 65 | data: { 66 | privateState: {}, 67 | sharedState: store.state 68 | } 69 | }) 70 | ``` 71 | 72 | ![状态管理](/images/state.png) 73 | 74 |

重要的是，注意你不应该在 action 中 替换原始的状态对象 - 组件和 store 需要引用同一个共享对象，mutation 才能够被观察

75 | 76 | 接着我们继续延伸约定，组件不允许直接修改属于 store 实例的 state，而应执行 action 来分发(dispatch)事件通知 store 去改变，我们最终达成了 [Flux](https://facebook.github.io/flux/) 架构。这样约定的好处是，我们能够记录所有 store 中发生的 state 改变，同时实现能做到记录变更 (mutation) 、保存状态快照、历史回滚/时光旅行的先进的调试工具。 77 | 78 | 说了一圈其实又回到了 [vuex](https://github.com/vuejs/vuex) ，如果你已经读到这儿，或许可以去尝试一下！ 79 | -------------------------------------------------------------------------------- /src/v2/guide/unit-testing.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 单元测试 3 | type: guide 4 | order: 403 5 | --- 6 | 7 | ## 配置和工具 8 | 9 | 任何兼容基于模块的构建系统都可以正常使用，但如果你需要一个具体的建议，可以使用 [Karma](http://karma-runner.github.io) 进行自动化测试。它有很多社区版的插件，包括对 [webpack](https://github.com/webpack/karma-webpack) 和 [Browserify](https://github.com/Nikku/karma-browserify) 的支持。更多详细的安装步骤，请参考各项目的安装文档。通过这些 Karma 配置的例子可以快速帮助你上手（[webpack](https://github.com/vuejs-templates/webpack/blob/master/template/test/unit/karma.conf.js) 和 [Browserify](https://github.com/vuejs-templates/browserify/blob/master/template/karma.conf.js) 的配置）。 10 | 11 | ## 简单的断言 12 | 13 | 你不需要在组件中做任何特殊的事情来使它们成为可测试的。只需要导出原始选项： 14 | 15 | ``` html 16 | 19 | 20 | 32 | ``` 33 | 34 | 然后，将组件选项与 Vue 一起导入，并且可以进行许多常见的断言： 35 | 36 | ``` js 37 | // 导入 Vue.js 和组件，进行测试 38 | import Vue from 'vue' 39 | import MyComponent from 'path/to/MyComponent.vue' 40 | 41 | // 这里是一些 Jasmine 2.0 的测试，你也可以使用你喜欢的任何断言库或测试工具。 42 | 43 | describe('MyComponent', () => { 44 | // 检查原始组件选项 45 | it('has a created hook', () => { 46 | expect(typeof MyComponent.created).toBe('function') 47 | }) 48 | 49 | // 评估原始组件选项中的 50 | // 函数的结果 51 | it('sets the correct default data', () => { 52 | expect(typeof MyComponent.data).toBe('function') 53 | const defaultData = MyComponent.data() 54 | expect(defaultData.message).toBe('hello!') 55 | }) 56 | 57 | // 检查mount中的组件实例 58 | it('correctly sets the message when created', () => { 59 | const vm = new Vue(MyComponent).$mount() 60 | expect(vm.message).toBe('bye!') 61 | }) 62 | 63 | // 创建一个实例并检查渲染输出 64 | it('renders the correct message', () => { 65 | const Constructor = Vue.extend(MyComponent) 66 | const vm = new Constructor().$mount() 67 | expect(vm.$el.textContent).toBe('bye!') 68 | }) 69 | }) 70 | ``` 71 | 72 | ## 编写可被测试的组件 73 | 74 | 组件的渲染输出，主要由它们收到的 props 决定。如果一个组件的渲染输出完全依赖于它的 props，那么测试会变得很直观，类似于向一个纯函数传参，断言其返回值。举一个简单的例子： 75 | 76 | ``` html 77 | 80 | 81 | 86 | ``` 87 | 88 | 你可以在不同的 props 中，通过 `propsData` 选项断言它的渲染输出: 89 | 90 | ``` js 91 | import Vue from 'vue' 92 | import MyComponent from './MyComponent.vue' 93 | 94 | // 挂载元素并返回已渲染的文本的工具函数 95 | function getRenderedText (Component, propsData) { 96 | const Constructor = Vue.extend(Component) 97 | const vm = new Constructor({ propsData: propsData }).$mount() 98 | return vm.$el.textContent 99 | } 100 | 101 | describe('MyComponent', () => { 102 | it('renders correctly with different props', () => { 103 | expect(getRenderedText(MyComponent, { 104 | msg: 'Hello' 105 | })).toBe('Hello') 106 | 107 | expect(getRenderedText(MyComponent, { 108 | msg: 'Bye' 109 | })).toBe('Bye') 110 | }) 111 | }) 112 | ``` 113 | 114 | ## 断言异步更新 115 | 116 | 由于 Vue 进行 [异步更新DOM](reactivity.html#Async-Update-Queue) 的情况，一些依赖DOM更新结果的断言必须在 ` Vue.nextTick ` 回调中进行： 117 | 118 | ``` js 119 | // 在状态更新后检查生成的 HTML 120 | it('updates the rendered message when vm.message updates', done => { 121 | const vm = new Vue(MyComponent).$mount() 122 | vm.message = 'foo' 123 | 124 | // 在状态改变后和断言 DOM 更新前等待一刻 125 | Vue.nextTick(() => { 126 | expect(vm.$el.textContent).toBe('foo') 127 | done() 128 | }) 129 | }) 130 | ``` 131 | 132 | 我们计划做一个通用的测试工具集，让不同策略的渲染输出（例如忽略子组件的基本渲染）和断言变得更简单。 133 | 134 | 关于 Vue 单元测试的更多深入信息，请查看 [vue-test-utils](https://vue-test-utils.vuejs.org/) 和我们的 Cookbook 中 [单元测试 vue 组件](https://vuejs.org/v2/cookbook/unit-testing-vue-components.html) 部分。 135 | -------------------------------------------------------------------------------- /src/v2/search/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Search Vue.js 3 | type: search 4 | search: true 5 | --- -------------------------------------------------------------------------------- /themes/vue/_config.yml: -------------------------------------------------------------------------------- 1 | site_description: "Vue.js - JavaScript 渐进式框架" 2 | root_domain: vue.docschina.org 3 | vue_version: 2.5.16 4 | 5 | special_sponsors: 6 | - url: https://stdlib.com 7 | img: stdlib.png 8 | 9 | platinum_sponsors: 10 | - url: https://www.bitsrc.io/?utm_source=vue&utm_medium=vue&utm_campaign=vue&utm_term=vue&utm_content=vue 11 | img: bit-wide.png 12 | alt_img: bit.png 13 | - url: http://tooltwist.com/ 14 | img: tooltwist.png 15 | name: tooltwist 16 | - url: https://vueschool.io/?utm_source=Vuejs.org&utm_medium=Banner&utm_campaign=Sponsored%20Banner&utm_content=V1 17 | img: vueschool.png 18 | name: vue school 19 | - url: https://vehikl.com/ 20 | img: vehikl.png 21 | name: vehikl 22 | - url: https://www.nativescript.org/vue?utm_source=vue-js-org&utm_medium=website&utm_campaign=nativescript-awareness 23 | img: nativescript.png 24 | name: nativescript 25 | 26 | gold_sponsors: 27 | - url: https://www.vuemastery.com/ 28 | img: vuemastery.png 29 | name: vue mastery 30 | - url: https://laravel.com 31 | img: laravel.png 32 | name: laravel 33 | - url: https://htmlburger.com 34 | img: htmlburger.png 35 | name: html burger 36 | - url: https://chaitin.cn/en/ 37 | img: chaitin.png 38 | name: chaitin 39 | - url: https://www.frontenddeveloperlove.com/ 40 | img: frontend-love.png 41 | name: frontend love 42 | - url: https://onsen.io/vue/ 43 | img: onsen-ui.png 44 | name: onsen ui 45 | - url: https://vuetifyjs.com 46 | img: vuetify.png 47 | name: vuetify 48 | - url: https://neds.com.au/ 49 | img: neds.png 50 | name: neds 51 | - url: https://hackr.io/tutorials/learn-vue-js 52 | img: hackr-io.png 53 | name: hacker io 54 | - url: https://icons8.com/ 55 | img: icons8.png 56 | name: icons 8 57 | - url: https://vuejobs.com/?ref=vuejs 58 | img: vuejobs.png 59 | name: vue jobs 60 | - url: https://codepilot.ai 61 | img: codepilot.png 62 | name: code pilot 63 | - url: https://teamextension.io/ 64 | img: teamextension.png 65 | name: team extension 66 | - url: http://aaha.co/ 67 | img: aaha.png 68 | name: aaha 69 | - url: https://www.valuecoders.com 70 | img: valuecoders.png 71 | name: value coders dot org 72 | - url: https://www.nsoft.com/careers/ 73 | img: nsoft.png 74 | name: n soft 75 | - url: https://coreui.io/?utm_source=vuejs&utm_medium=logo&utm_campaign=homepage 76 | img: coreui.png 77 | name: core ui 78 | - url: https://piio.co/vuejs?ref=vuejs 79 | img: piio.png 80 | name: piio 81 | - url: https://tidelift.com/subscription/npm/vue 82 | img: tidelift.png 83 | name: tidelift 84 | 85 | silver_sponsors: 86 | - url: https://dopamine.bg/ 87 | img: dopamine.png 88 | name: dopamine 89 | 90 | bronze_sponsors: 91 | - url: http://tighten.co/ 92 | img: http://i.imgur.com/T7fQYLT.png 93 | name: tighten co 94 | - url: https://alligator.io 95 | img: https://alligator.io/images/alligator-logo.svg 96 | name: alligator dot io 97 | - url: https://www.accelebrate.com/ 98 | img: https://www.accelebrate.com/assets/images/accelebrate_logo@2x.png 99 | name: accelebrate 100 | - url: https://pullstring.com 101 | img: https://i.imgur.com/hQHW6TB.png 102 | name: pull string 103 | -------------------------------------------------------------------------------- /themes/vue/layout/icons/bch.ejs: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /themes/vue/layout/icons/btc.ejs: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /themes/vue/layout/icons/eth.ejs: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /themes/vue/layout/icons/github-dark.ejs: -------------------------------------------------------------------------------- 1 | GitHub Dark icon 2 | -------------------------------------------------------------------------------- /themes/vue/layout/icons/github.ejs: -------------------------------------------------------------------------------- 1 | GitHub icon 2 | -------------------------------------------------------------------------------- /themes/vue/layout/icons/ltc.ejs: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /themes/vue/layout/icons/medium.ejs: -------------------------------------------------------------------------------- 1 | Medium icon 2 | -------------------------------------------------------------------------------- /themes/vue/layout/icons/play.ejs: -------------------------------------------------------------------------------- 1 | Play icon 2 | -------------------------------------------------------------------------------- /themes/vue/layout/icons/twitter.ejs: -------------------------------------------------------------------------------- 1 | Twitter icon 2 | -------------------------------------------------------------------------------- /themes/vue/layout/index.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 6 |
7 |
8 | 9 |
10 |
11 |
12 | " alt="vue logo"> 13 |
14 |

Vue.js

15 |

16 | 渐进式
JavaScript 框架 17 |

18 |

19 | 20 | <%- partial('icons/play') %> 21 | 为什么选择 Vue.js？ 22 | ">起步 23 | 24 | <%- partial('icons/github-dark') %> 25 | Github 26 |

27 |
28 |
29 |
30 | 31 |
32 |

特别赞助

33 | 34 | Standard Library Logo 35 |
36 | Function as a Service Platform and Library 37 | 38 |
39 | 40 |
41 |
42 |
43 |

简单易用

44 |

已经了解 HTML, CSS 和 JavaScript？即刻阅读指南，开始构建应用程序！

45 |
46 | 47 |
48 |

广泛灵活

49 |

具有渐进增量的生态系统，可以根据项目规模，在库和全特性框架之间灵活选择。

50 |
51 | 52 |
53 |

性能高效

54 |

55 | 20KB min+gzip 运行时大小
56 | 超快虚拟 DOM
57 | 最省心的优化 58 |

59 |
60 |
61 |
62 | 63 |
64 |
65 | <%- partial('partials/sponsors') %> 66 |
67 |
68 | 69 | 84 | 85 | 88 | 89 | 122 | -------------------------------------------------------------------------------- /themes/vue/layout/page.ejs: -------------------------------------------------------------------------------- 1 | <% if (page.type) { %> 2 | <%- partial('partials/sidebar', { type: page.type === 'menu' ? 'guide' : page.type, index: page.index }) %> 3 | <% } else { %> 4 |
5 | 8 |
9 | <% } %> 10 |
11 | <% if (page.type) { %> 12 | <% if (page.type === 'menu') { %> 13 |
14 | 15 |
16 | <%- partial('partials/toc', { type: 'guide' }) %> 17 | <% } else { %> 18 | 19 | <% } %> 20 | <% } %> 21 | <% if (page.title.trim()) { %> 22 |

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

23 | <% } %> 24 | <% if (page.sponsors) { %> 25 | <%- partial('sponsors-page') %> 26 | <% } else if (page.search) { %> 27 | <%- partial('search-page') %> 28 | <% } else { %> 29 | <%- page.content %> 30 | <% } %> 31 | <% if (page.type === 'guide') { %> 32 |
33 | <% const lastPage = site.pages.find({ type: page.type, order: { $lt: page.order }}).sort({ order: -1 }).first(); %> 34 | <% if (lastPage) { %> 35 | ← <%- lastPage.title %> 36 | <% } %> 37 | <% const nextPage = site.pages.find({ type: page.type, order: { $gt: page.order }}).sort({ order: 1 }).first(); %> 38 | <% if (nextPage) { %> 39 | <%- nextPage.title %> → 40 | <% } %> 41 |
42 | <% } %> 43 |
44 | <%_ if (!page.sponsors) { _%> 45 | <%- partial('partials/ad-text') %> 46 | <%_ } _%> 47 | 发现错误？想参与编辑？ 48 | 49 | 在 GitHub 上编辑此页！ 50 | 51 |
52 |
53 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/about_dropdown.ejs: -------------------------------------------------------------------------------- 1 |
  • 2 | 参与贡献 3 | 9 |
    • 10 |
  • 11 | 印记中文 12 | 23 |
    • 24 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/ad-text.ejs: -------------------------------------------------------------------------------- 1 | 2 |
    3 | 14 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/ad.ejs: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/conf.ejs: -------------------------------------------------------------------------------- 1 |
    2 | 3 | vueconf 4 |

    The first VueConf EU is being held in Wrocław, Poland, June 21-23!

    5 |     6 |
    7 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/ecosystem_dropdown.ejs: -------------------------------------------------------------------------------- 1 |
  • 2 | 生态系统 3 | 39 |
    • 40 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/header.ejs: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/language_dropdown.ejs: -------------------------------------------------------------------------------- 1 |
  • 2 | 多语言 3 | 12 |
    • 13 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/learn_dropdown.ejs: -------------------------------------------------------------------------------- 1 |
  • 2 | 学习 3 | 12 |
    • 13 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/main_menu.ejs: -------------------------------------------------------------------------------- 1 |
  • 2 |
    3 | 4 |
    5 |
    • 6 | <%- partial('partials/learn_dropdown') %> 7 | <%- partial('partials/ecosystem_dropdown') %> 8 |
  • 9 | " class="nav-link team<%- page.path.match(/team\.html/) ? ' current' : '' %>">团队 10 |
    • 11 | <%- partial('partials/support_vue_dropdown') %> 12 | <%- partial('partials/language_dropdown') %> 13 | <%- partial('partials/about_dropdown') %> 14 |
  • 15 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/platinum_sponsors.ejs: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | Platinum Sponsors 4 |
    5 | <%_ for (const sponsor of theme.platinum_sponsors) {_%> 6 | 9 | <%_ } _%> 10 |
    11 |
    12 | "> 13 | Become a Sponsor 14 | 15 |
    16 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/sidebar.ejs: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
      4 | <%- partial('partials/main_menu', { context: 'sidebar' }) %> 5 |
    6 |
    7 | <%- partial('partials/sponsors_sidebar') %> 8 | <% if (type !== 'search') { %> 9 |

    10 | <% titles = { 11 | api: 'API', 12 | examples: '示例', 13 | guide: '指南', 14 | cookbook: 'Cookbookbeta', 15 | 'style-guide': '风格指南beta' 16 | } %> 17 | <%- titles[type] %> 18 | <% if (['cookbook', 'style-guide'].indexOf(type) === -1) { %> 19 | 25 | <% } %> 26 |

    27 | <%- partial('partials/toc', { type: type }) %> 28 | <% } %> 29 |
    30 |
    31 |
    32 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/sponsors.ejs: -------------------------------------------------------------------------------- 1 |

    Patreon 白金赞助商

    2 | 3 | <%_ for (const sponsor of theme.platinum_sponsors) {_%> 4 | 5 | <%-sponsor.name-%> 6 | 7 | <%_ } _%> 8 |
    9 |
    10 | <%_ for (const sponsor of theme.gold_sponsors) {_%> 11 | 12 | <%-sponsor.name-%> 13 | 14 | <%_ } _%> 15 |
    16 | 17 | ">成为赞助者 18 | 19 |
    20 |

    OpenCollective 赞助商

    21 |

    白金

    22 | <%_ for (let i = 0; i < 2; i++) {_%> 23 | 24 | 25 | 26 | <%_ } _%> 27 |

    黄金

    28 | <%_ for (let i = 0; i < 8; i++) {_%> 29 | 30 | 31 | 32 | <%_ } _%> 33 |
    34 | 35 | 45 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/sponsors_sidebar.ejs: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/support_vue_dropdown.ejs: -------------------------------------------------------------------------------- 1 |
  • 2 | 支持 Vue 3 | 10 |
    • 11 | -------------------------------------------------------------------------------- /themes/vue/layout/partials/toc.ejs: -------------------------------------------------------------------------------- 1 | 38 | -------------------------------------------------------------------------------- /themes/vue/layout/post.ejs: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 6 |
    7 |

    8 | Recent Posts 9 | " target="_blank" style="vertical-align: middle; margin-left: 5px;"> 10 | " style="width: 15px; height: 15px;"> 11 | 12 |

    13 |
      14 | <% site.posts.sort('date', -1).limit(10).each(function (post) { %> 15 |
    • 16 | <%- post.title %> 17 |
      • 18 | <% }) %> 19 |
    20 |
    21 |
    22 |
    23 |
    24 | 25 |

    <%- page.title %>

    26 |

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

    27 | <%- page.content %> 28 |
    29 | -------------------------------------------------------------------------------- /themes/vue/layout/sponsors-page.ejs: -------------------------------------------------------------------------------- 1 |

    支持 Vue.js 的开发

    2 | 3 |

    4 | Vue.js 是采用 MIT 许可的开源项目，使用完全免费。 5 | 然而，维护和开发项目新功能需要耗费大量的精力，如果没有适当的资金支持，就不可能长期坚持下去。你可以通过以下几种方式来支持 Vue.js 的开发： 6 |

    7 | 8 |

    单次捐助

    9 | 10 |

    We accept donations through these channels:

    11 | 12 |
    13 | 14 | 15 | 16 | <%- partial('icons/btc') %> BTC 17 | <%- partial('icons/bch') %> BCH 18 | <%- partial('icons/eth') %> ETH 19 | <%- partial('icons/ltc') %> LTC 20 | 21 |
    22 | 23 |
    24 |

    {{ coins[type].name }} Address:
    {{ coins[type].address }}

    25 | 26 |
    27 | 56 | 57 |

    周期性赞助

    58 | 59 |

    60 | 周期性赞助可以获得特殊待遇，比如你的名字会出现在 Vue 的 GitHub 仓库中，再比如你的公司 logo 会出现在我们的官网上。 61 |

    62 | 63 | 71 | 72 |

    当前高级赞助商：

    73 | 74 |

    特别赞助商

    75 | 76 |

    77 | <%_ for (const sponsor of theme.special_sponsors) {_%> 78 | 79 | > 80 | 81 | <%_ } _%> 82 |

    83 | 84 |

    全球白金赞助商

    85 | 86 |

    87 | <%_ for (const sponsor of theme.platinum_sponsors) {_%> 88 | 89 | 90 | 91 | <%_ } _%> 92 |

    93 | 94 |

    OpenCollective 白金赞助商

    95 | 96 | 103 | 104 |

    Patreon 黄金赞助商

    105 | 106 | 113 | 114 |

    OpenCollective 黄金赞助商

    115 | 116 | 123 | 124 |

    Patreon Silver

    125 | 126 | 133 | 134 |

    135 | 如果你是企业经营者，并且将 Vue 用在商业营收产品中，那么赞助 Vue 具有商业上的益处：**可以确保你的产品所依赖的项目，能够保持健康和得到积极的维护**，也能帮助你在 Vue 社区里获得更高的曝光度，从而更容易地吸引到 Vue 开发者。 136 |

    137 | 138 |

    139 | 如果你是个人开发者，并且享受 Vue 带来的高开发效率，请考虑通过捐赠来表示感谢 - 比如偶尔给我买杯咖啡 :) 140 |

    141 | -------------------------------------------------------------------------------- /themes/vue/source/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | #ffffff 9 | 10 | 11 | -------------------------------------------------------------------------------- /themes/vue/source/css/_ad.styl: -------------------------------------------------------------------------------- 1 | // main ad placement (bottom right) 2 | #ad 3 | width: 125px 4 | // text-align: center 5 | position: fixed 6 | z-index: 99 7 | bottom: 10px 8 | right: 10px 9 | padding: 10px 10 | background-color: #fff 11 | border-radius: 3px 12 | font-size: 13px 13 | a 14 | display: inline-block 15 | color: $light 16 | font-weight: normal 17 | span 18 | color: $light 19 | display: inline-block 20 | margin-bottom: 5px 21 | img 22 | width: 125px 23 | .carbon-img, .carbon-text 24 | display: block 25 | margin-bottom: 6px 26 | font-weight: normal 27 | color: $medium 28 | .carbon-poweredby 29 | color: #aaa 30 | font-weight: normal 31 | 32 | // text ad (below page title) 33 | .bsa-cpc 34 | font-size 1em 35 | background-color #f8f8f8 36 | a._default_ 37 | text-align left 38 | display block 39 | padding 10px 15px 12px 40 | margin-bottom 20px 41 | color #666 42 | font-weight 400 43 | line-height 18px 44 | .default-image, .default-title, .default-description 45 | display inline 46 | vertical-align middle 47 | margin-right 6px 48 | .default-image 49 | img 50 | height 20px 51 | border-radius 3px 52 | vertical-align middle 53 | position relative 54 | top -1px 55 | .default-title 56 | font-weight 600 57 | .default-description:after 58 | font-size .85em 59 | content "Sponsored" 60 | color $info 61 | border 1px solid $info 62 | border-radius 3px 63 | padding 0 4px 1px 64 | margin-left 6px 65 | .default-ad 66 | display none 67 | 68 | @media print 69 | #ad 70 | display: none -------------------------------------------------------------------------------- /themes/vue/source/css/_animations.styl: -------------------------------------------------------------------------------- 1 | .rotating-clockwise 2 | animation: 3s rotating-clockwise linear infinite 3 | 4 | i.rotating-clockwise 5 | display: inline-block 6 | animation-duration: 2s 7 | 8 | @keyframes rotating-clockwise 9 | from 10 | transform: rotate(0) 11 | to 12 | transform: rotate(360deg) 13 | -------------------------------------------------------------------------------- /themes/vue/source/css/_api.styl: -------------------------------------------------------------------------------- 1 | .content.api 2 | h2, h3 3 | > sup 4 | margin-left: .3em 5 | color: #b9465c 6 | -------------------------------------------------------------------------------- /themes/vue/source/css/_demo.styl: -------------------------------------------------------------------------------- 1 | #demo, .demo, .content .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 | h2 18 | padding: 0 19 | border: none 20 | h2, h3, h4, h5, h6 21 | margin: 1em 0 22 | ul, ol 23 | padding-left: 1.5em 24 | padding-bottom: .2em !important 25 | &:first-child 26 | margin-top: 0 27 | &:last-child 28 | margin-bottom: 0 29 | li 30 | color: $medium 31 | // !!TODO: Check to make sure this isn't here for a good reason. 32 | // cursor: pointer 33 | // -ms-user-select: none 34 | // -moz-user-select: none 35 | // -webkit-user-select: none 36 | &.done 37 | color: $light 38 | text-decoration: line-through 39 | p 40 | margin: 0 !important 41 | padding: 0 !important 42 | textarea 43 | width: 100% 44 | resize: vertical 45 | > :first-child 46 | margin-top: 0 47 | > :last-child 48 | margin-bottom: 0 49 | 50 | 51 | 52 | ul#demo, ul.demo 53 | li 54 | margin-left: 1.5em 55 | 56 | @media screen and (max-width: 900px) 57 | #demo, .demo 58 | margin-left: 0 59 | 60 | .benchmark-table 61 | margin: 0 auto 62 | text-align: center 63 | 64 | tbody > tr > th 65 | text-align: right 66 | 67 | th, td 68 | padding: 3px 7px 69 | 70 | @media print 71 | #demo, .demo, .content .demo 72 | page-break-inside: avoid 73 | padding: 1em 74 | margin-bottom: 1em 75 | border-width: 2px 76 | -------------------------------------------------------------------------------- /themes/vue/source/css/_fonts.styl: -------------------------------------------------------------------------------- 1 | @font-face 2 | font-family: "Source Sans Pro" 3 | src: local("Source Sans Pro"), url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) 4 | 5 | @font-face 6 | font-family: "Source Sans Pro" 7 | src: local("Source Sans Pro Light"), url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) 8 | font-weight: 300 9 | 10 | @font-face 11 | font-family: "Source Sans Pro" 12 | src: local("Source Sans Pro Semibold"), url(/fonts/Source_Sans_Pro/SourceSansPro-Semibold.ttf) 13 | font-weight: 600 14 | 15 | @font-face 16 | font-family: "Roboto Mono" 17 | src: local("Roboto Mono"), url(/fonts/Roboto_Mono/RobotoMono-Regular.ttf) 18 | 19 | @font-face 20 | font-family: "Dosis" 21 | src: local("Dosis Medium"), url(/fonts/Dosis/Dosis-Medium.ttf) 22 | font-weight: 500 23 | -------------------------------------------------------------------------------- /themes/vue/source/css/_header.styl: -------------------------------------------------------------------------------- 1 | $header-height = 40px 2 | 3 | #header 4 | background-color: #fff 5 | height: $header-height 6 | padding: $heading-padding-vertical 60px 7 | position: relative 8 | z-index: 100 9 | 10 | body.docs 11 | #header 12 | position: fixed 13 | width: 100% 14 | top: 0 15 | #nav 16 | position: fixed 17 | 18 | #nav 19 | list-style-type: none 20 | margin: 0 21 | padding: 0 22 | position: absolute 23 | right: 30px 24 | top: $heading-padding-vertical 25 | height: $header-height 26 | line-height: $header-height 27 | .break 28 | display: none 29 | li 30 | display: inline-block 31 | position: relative 32 | margin: 0 .6em 33 | 34 | .nav-dropdown 35 | .nav-link 36 | &:hover, &.current 37 | border-bottom: none 38 | &.current 39 | &::after 40 | content: "" 41 | width: 0 42 | height: 0 43 | border-left: 5px solid $green 44 | border-top: 3px solid transparent 45 | border-bottom: 3px solid transparent 46 | position: absolute 47 | top: 50% 48 | margin-top: -4px 49 | left: 8px 50 | 51 | .nav-link 52 | padding-bottom: 3px 53 | white-space: nowrap 54 | &:hover, &.current 55 | border-bottom: 3px solid $green 56 | &.team, &.contribute 57 | margin-left: 10px 58 | 59 | .new-label 60 | position: absolute 61 | top: 3px 62 | left: 110% 63 | background-color: $green 64 | color: #fff 65 | line-height: 16px 66 | height: 16px 67 | font-size: 9px 68 | font-weight: bold 69 | font-family: $code-font 70 | padding: 1px 4px 0 6px 71 | border-radius: 4px 72 | 73 | .search-query 74 | height: 30px 75 | line-height: 30px 76 | box-sizing: border-box 77 | padding: 0 15px 0 30px 78 | border: 1px solid #e3e3e3 79 | color: $dark 80 | outline: none 81 | border-radius: 15px 82 | margin-right: 10px 83 | transition: border-color .2s ease 84 | background: #fff url(../images/search.png) 8px 5px no-repeat 85 | background-size: 20px 86 | vertical-align: middle !important 87 | &:focus 88 | border-color: $green 89 | 90 | #logo 91 | display: inline-block 92 | font-size: 1.5em 93 | line-height: $header-height 94 | color: $dark 95 | font-family: $logo-font 96 | font-weight: 500 97 | img 98 | vertical-align: middle 99 | margin-right: 6px 100 | width: $header-height 101 | height: $header-height 102 | 103 | #mobile-bar 104 | position: fixed 105 | top: 0 106 | left: 0 107 | width: 100% 108 | height: 40px 109 | background-color: #fff 110 | z-index: 9 111 | display: none 112 | box-shadow: 0 0 2px rgba(0,0,0,.25) 113 | .menu-button 114 | position: absolute 115 | width: 24px 116 | height: 24px 117 | top: 8px 118 | left: 12px 119 | background: url(../images/menu.png) center center no-repeat 120 | background-size: 24px 121 | .logo 122 | position: absolute 123 | width: 30px 124 | height: 30px 125 | background: url(../images/logo.png) center center no-repeat 126 | top: 5px 127 | left: 50% 128 | margin-left: -15px 129 | background-size: 30px 130 | 131 | @media print 132 | #header 133 | display: none -------------------------------------------------------------------------------- /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 | margin-top: 2em 8 | padding: 2em 9 | background: rgba(73, 195, 140, .1) 10 | border-radius: 2px 11 | > h4 12 | margin-top: 0 13 | > p:last-child 14 | margin-bottom: 0 15 | padding-bottom: 0 16 | -------------------------------------------------------------------------------- /themes/vue/source/css/_modal.styl: -------------------------------------------------------------------------------- 1 | .modal 2 | box-sizing: border-box 3 | display: none 4 | position: fixed 5 | width: 80% 6 | height: auto 7 | padding: .5em 8 | background-color: #f9f9f9 9 | box-shadow: 0 0 10px rgba(0,0,0,.2) 10 | z-index: 11 11 | &.open 12 | display: block 13 | top: 50% 14 | left: 50% 15 | transform: translate(-50%, -50%) 16 | .overlay 17 | position: fixed 18 | top: 0 19 | bottom: 0 20 | left: 0 21 | right: 0 22 | background: rgba(0,0,0,.2) 23 | z-index: 10 24 | .stop-scroll 25 | overflow: hidden 26 | height: 100% 27 | @media screen and (max-width: 400px) 28 | .modal 29 | width: 98% 30 | -------------------------------------------------------------------------------- /themes/vue/source/css/_offline-menu.styl: -------------------------------------------------------------------------------- 1 | .content.menu 2 | font-size: 1.2em 3 | .menu-root 4 | padding-left: 0 5 | #search-form, .algolia-autocomplete, input 6 | width: 100% 7 | .aa-dropdown-menu 8 | box-sizing: border-box 9 | h3 10 | margin: 1.5em 0 .75em 11 | &:before, &:after 12 | display: none 13 | li 14 | list-style-type: none 15 | margin-top: .1em 16 | -------------------------------------------------------------------------------- /themes/vue/source/css/_scrimba.styl: -------------------------------------------------------------------------------- 1 | .scrimba 2 | background-color #e7ecf3 3 | padding 1em 1.25em 4 | border-radius 2px 5 | color #486491 6 | position relative 7 | a 8 | color #486491 !important 9 | position relative 10 | padding-left 36px 11 | &:before 12 | content '' 13 | position absolute 14 | display block 15 | width 30px 16 | height 30px 17 | top -5px 18 | left -4px 19 | border-radius 50% 20 | background-color #73abfe 21 | &:after 22 | content '' 23 | position absolute 24 | display block 25 | width 0 26 | height 0 27 | top 5px 28 | left 8px 29 | border-top 5px solid transparent 30 | border-bottom 5px solid transparent 31 | border-left 8px solid #fff 32 | -------------------------------------------------------------------------------- /themes/vue/source/css/_search-page.styl: -------------------------------------------------------------------------------- 1 | #search-page 2 | .search-form 3 | .search-query 4 | width: 100% 5 | border-radius: 5px 6 | margin-right: 0 7 | .search-footer 8 | display: flex 9 | height: 35px 10 | align-items: center 11 | justify-content: space-between 12 | margin-bottom: 15px 13 | p 14 | margin: 0 15 | padding: 0 16 | .search-result 17 | margin-bottom: 15px; 18 | .title 19 | display: block 20 | font-size: 17.55px 21 | .summary 22 | padding: 0 23 | margin: 0 24 | .breadcrumb 25 | color: $light 26 | & + .breadcrumb::before 27 | content: "\203A\A0" 28 | margin-left: 5px 29 | color: $light 30 | -------------------------------------------------------------------------------- /themes/vue/source/css/_settings.styl: -------------------------------------------------------------------------------- 1 | // font faces 2 | $body-font = "Source Sans Pro", "Helvetica Neue", Arial, sans-serif 3 | $logo-font = "Dosis", "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 | $info = #1C90F3 19 | 20 | $radius = 2px 21 | $content-padding-top = 30px 22 | 23 | // header settings 24 | $header-inner-height = 41px 25 | $heading-padding-vertical = 10px 26 | $header-height = $header-inner-height + $heading-padding-vertical * 2 27 | $mobile-header-height = 40px 28 | // prevent headers from being covered by the top nav upon navigation 29 | $heading-link-padding-top = $header-height + $content-padding-top 30 | $mobile-heading-link-padding-top = $mobile-header-height + $content-padding-top 31 | $h2-margin-top = 45px 32 | $h3-margin-top = 52px 33 | -------------------------------------------------------------------------------- /themes/vue/source/css/_sidebar.styl: -------------------------------------------------------------------------------- 1 | @import "_settings" 2 | 3 | .sidebar 4 | position: absolute 5 | z-index: 10 6 | top: $header-height 7 | left: 0 8 | bottom: 0 9 | overflow-x: hidden 10 | overflow-y: auto 11 | -webkit-overflow-scrolling: touch 12 | -ms-overflow-style: none 13 | h2 14 | margin-top: .2em 15 | ul 16 | list-style-type: none 17 | margin: 0 18 | line-height: 1.5em 19 | padding-left: 1em 20 | li 21 | margin-top: .5em 22 | .sidebar-inner 23 | width: 260px 24 | padding: $content-padding-top + 10px 20px 60px 60px 25 | .version-select 26 | vertical-align: middle 27 | margin-left: 5px 28 | .menu-root 29 | padding-left: 0 30 | .menu-sub 31 | font-size: .85em 32 | .sidebar-link 33 | color: $light 34 | &.current 35 | font-weight: 600 36 | color: $green 37 | &.new 38 | &:after 39 | content: "NEW" 40 | display: inline-block 41 | font-size: 10px 42 | font-weight: 600 43 | color: #fff 44 | background-color: $green 45 | line-height: 14px 46 | padding: 0 4px 47 | border-radius: 3px 48 | margin-left: 5px 49 | vertical-align: middle 50 | position: relative 51 | top: -1px 52 | &:hover 53 | border-bottom: 2px solid $green 54 | .section-link 55 | &.active 56 | font-weight: bold 57 | color: $green 58 | .main-menu 59 | margin-bottom: 20px 60 | display: none 61 | padding-left: 0 62 | .nav-dropdown 63 | h4 64 | font-weight: normal 65 | margin: 0 66 | 67 | @media screen and (max-width: 900px) 68 | .sidebar 69 | position: fixed 70 | z-index: 10 71 | background-color: #f9f9f9 72 | height: 100% 73 | top: 0 74 | left: 0 75 | box-shadow: 0 0 10px rgba(0,0,0,.2) 76 | transition: all .4s cubic-bezier(0.4, 0, 0, 1) 77 | -webkit-transform: translate(-280px, 0) 78 | transform: translate(-280px, 0) 79 | .sidebar-inner 80 | padding: 50px 10px 10px 20px 81 | box-sizing: border-box 82 | .sidebar-inner-index 83 | padding: 10px 10px 10px 20px 84 | .search-query 85 | width: 200px 86 | margin-bottom: 10px 87 | .main-menu 88 | display: block 89 | &.open 90 | -webkit-transform: translate(0, 0) 91 | transform: translate(0, 0) 92 | 93 | @media print 94 | .sidebar 95 | display: none -------------------------------------------------------------------------------- /themes/vue/source/css/_sponsors-index.styl: -------------------------------------------------------------------------------- 1 | #sponsors 2 | text-align: center 3 | padding: 35px 40px 45px 4 | background-color: #f6f6f6 5 | .inner 6 | max-width: 700px 7 | margin: 0px auto 8 | h3 9 | color: #999 10 | margin: 0 0 10px 11 | a 12 | margin: 20px 15px 0 13 | position: relative 14 | a, img 15 | width: 100px 16 | display: inline-block 17 | vertical-align: middle 18 | img 19 | transition: all .3s ease 20 | filter: grayscale(100%) 21 | opacity: 0.66 22 | &:hover 23 | filter: none 24 | opacity: 1 25 | a.vip 26 | display: block 27 | margin: 30px auto 15px 28 | width: 200px 29 | img 30 | width: 200px 31 | .become-sponsor 32 | margin-top: 40px 33 | font-size: .9em 34 | font-weight: 700 35 | width: auto 36 | background-color: transparent 37 | 38 | .open-collective-sponsors 39 | margin-top 60px 40 | a, img 41 | width: auto 42 | max-width: 100px 43 | max-height: 60px 44 | h4 45 | color #999 46 | margin-bottom 0 47 | &.active 48 | img 49 | filter: none 50 | opacity: 1 51 | -------------------------------------------------------------------------------- /themes/vue/source/css/_sponsors-page.styl: -------------------------------------------------------------------------------- 1 | .content 2 | .platinum 3 | text-align center 4 | a 5 | display inline-block 6 | margin 20px 7 | img 8 | width 250px 9 | vertical-align middle 10 | 11 | .sponsor-section 12 | text-align center 13 | margin-top 0 14 | margin-bottom 60px 15 | 16 | .patreon-sponsors 17 | a, img 18 | width: 140px 19 | display: inline-block 20 | vertical-align: middle 21 | a 22 | margin: 10px 20px 23 | 24 | .open-collective-sponsors 25 | img 26 | max-width 140px 27 | max-height 60px 28 | margin-right 30px 29 | margin-bottom 20px 30 | 31 | #one-time-donations 32 | a, svg 33 | display inline-block 34 | vertical-align middle 35 | a 36 | margin 20px 37 | color $medium 38 | svg 39 | margin-right 5px 40 | 41 | #coin-details 42 | text-align center 43 | border-radius 4px 44 | padding 30px 45 | font-weight bold 46 | img 47 | width 200px 48 | p 49 | padding 0 50 | margin 0 0 20px 51 | -------------------------------------------------------------------------------- /themes/vue/source/css/_sponsors-sidebar.styl: -------------------------------------------------------------------------------- 1 | .main-sponsor 2 | color: $light 3 | font-size: .85em 4 | .logo 5 | color: $light 6 | margin-top: 10px 7 | text-align: center 8 | font-weight: bold 9 | display block 10 | &:first-child 11 | margin-top: 12px 12 | &:last-child 13 | margin-bottom: 14px 14 | img, a 15 | width: 125px 16 | 17 | .become-backer 18 | border: 1px solid $green 19 | border-radius: 2em 20 | display: inline-block 21 | color: $green 22 | font-size: .8em 23 | width: 125px 24 | padding: 4px 0 25 | text-align: center 26 | margin-bottom: 20px 27 | 28 | #sidebar-sponsors-special 29 | margin-top -10px 30 | 31 | #sidebar-sponsors-platinum-left 32 | display block 33 | 34 | #sidebar-sponsors-platinum-right 35 | display none 36 | position fixed 37 | z-index 99 38 | top 90px 39 | right 20px 40 | 41 | @media screen and (min-width: 1300px) 42 | #sidebar-sponsors-platinum-left 43 | display none 44 | #sidebar-sponsors-platinum-right 45 | display block 46 | -------------------------------------------------------------------------------- /themes/vue/source/css/_style-guide.styl: -------------------------------------------------------------------------------- 1 | $style-guide-bad-bg = lighten(desaturate($red, 80%), 80%) 2 | $style-guide-bad-text = darken(desaturate($red, 80%), 20%) 3 | $style-guide-good-bg = lighten(desaturate($green, 80%), 85%) 4 | $style-guide-good-text = darken(desaturate($green, 80%), 10%) 5 | 6 | $style-guide-priority-a-bg = $style-guide-bad-text 7 | $style-guide-priority-a-color = white 8 | $style-guide-priority-b-bg = $style-guide-bad-text 9 | $style-guide-priority-b-color = white 10 | $style-guide-priority-c-bg = steelblue 11 | $style-guide-priority-c-color = white 12 | $style-guide-priority-d-bg = $style-guide-bad-text 13 | $style-guide-priority-d-color = white 14 | 15 | .style-guide 16 | .style-example, details, .style-enforcement 17 | border-radius $radius 18 | margin: 1.6em 0 19 | padding: 1.6em 20 | h4 21 | margin-top: 0 22 | figure, p 23 | &:last-child 24 | margin-bottom: 0 25 | padding-bottom: 0 26 | .style-example 27 | &.example-bad 28 | background: $style-guide-bad-bg 29 | h4 30 | color: $style-guide-bad-text 31 | &.example-good 32 | background: $style-guide-good-bg 33 | h4 34 | color: $style-guide-good-text 35 | details, .style-enforcement 36 | background-color: #eee 37 | details 38 | display: block // Add the correct display in IE and Edge. 39 | position: relative 40 | &:not([open]) summary 41 | &::after 42 | content: "..." 43 | &:hover 44 | background: rgba(255, 255, 255, .3) 45 | summary 46 | cursor: pointer 47 | padding: 1.6em 48 | margin: -1.6em 49 | outline: none 50 | > h4 51 | display: inline-block 52 | margin: 0 53 | .style-enforcement 54 | table 55 | width: 100% 56 | background-color: $codebg 57 | border-radius: $radius 58 | th, td 59 | padding: .4em 60 | text-align: center 61 | th 62 | padding-bottom: .2em 63 | td 64 | padding-top: .2em 65 | .style-rule-tag 66 | background-color: $codebg 67 | border-radius: $radius 68 | font-size: .9em 69 | color: $style-guide-good-text 70 | font-weight: 600 71 | text-transform: uppercase 72 | padding: .1em .4em 73 | a > .style-rule-tag 74 | color: $green 75 | sup 76 | text-transform: uppercase 77 | font-size: .7em 78 | margin-left: 1em 79 | pointer-events: all 80 | position: absolute 81 | [data-p="a"] 82 | color: #6b2a2a 83 | [data-p="b"] 84 | color: #8c480a 85 | [data-p="c"] 86 | color: #2b5a99 87 | [data-p="d"] 88 | content: #3f536d 89 | -------------------------------------------------------------------------------- /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 78 | -------------------------------------------------------------------------------- /themes/vue/source/css/_team.styl: -------------------------------------------------------------------------------- 1 | @import "_settings" 2 | 3 | #team-members 4 | .sort-by-distance-button 5 | display: inline-block 6 | padding: .4em .7em .45em 7 | font-weight: bold 8 | font-size: .5em 9 | text-transform: uppercase 10 | line-height: 1 11 | border: none 12 | background: $medium 13 | color: white 14 | border-radius: 3px 15 | position: relative 16 | cursor: pointer 17 | float: right 18 | margin-top: .3em 19 | i 20 | margin-right: .25em 21 | &:last-child 22 | margin-right: 0 23 | &[disabled] 24 | opacity: .7 25 | cursor: default 26 | .vuer 27 | display: flex 28 | padding: 25px 0 29 | border-bottom: 1px dotted #ddd 30 | &:first-of-type 31 | margin-top: 15px 32 | &:last-of-type 33 | border-bottom: none 34 | .avatar 35 | flex: 0 0 80px 36 | img 37 | border-radius: 50% 38 | .profile 39 | padding-left: 26px 40 | flex: 1 41 | h3 42 | margin: 0 43 | font-size: 1.3em 44 | &::before, &::after 45 | display: none 46 | & > sup 47 | text-transform: uppercase 48 | font-size: .7em 49 | letter-spacing: .3px 50 | padding: 2px 5px 51 | margin-left: 10px 52 | color: transparentify($dark, #f9f7f5, .6) 53 | background: #f9f7f5 54 | border-radius: 5px 55 | // NOTE: Removing the little signal icon for now 56 | // .distance 57 | // position: relative 58 | // &:before 59 | // content: "\f1eb" 60 | // font-family: FontAwesome 61 | // position: absolute 62 | // top: 50% 63 | // margin-top: -.5em 64 | // line-height: 1 65 | // right: 100% 66 | // transform: rotate(-90deg) 67 | .user-match 68 | cursor: help 69 | color: steelblue 70 | &:after 71 | content: "\f06a" 72 | font-family: FontAwesome 73 | font-size: .75em 74 | vertical-align: super 75 | margin-left: 4px 76 | margin-right: 2px 77 | position: relative 78 | dl 79 | margin: .6em 0 0 80 | dt, dd, ul, li 81 | display: inline 82 | padding: 0 83 | margin: 0 84 | line-height: 1.3 85 | dt 86 | text-transform: uppercase 87 | font-size: .84em 88 | font-weight: 600 89 | &::after 90 | content: "" 91 | margin-right: 7px 92 | i 93 | width: 14px 94 | text-align: center 95 | &.fa-map-marker 96 | font-size: 1.15em 97 | &.fa-globe 98 | font-size: 1.2em 99 | &.fa-link 100 | font-size: 1.05em 101 | dd 102 | font-weight: 600 103 | &::after 104 | display: block 105 | content: " " 106 | margin-top: .6em 107 | li 108 | display: inline-block 109 | &::after 110 | display: inline-block 111 | content: "·" 112 | margin: 0 8px 113 | &:last-child::after 114 | content: "" 115 | .social 116 | a 117 | display: inline-block 118 | line-height: 1 119 | vertical-align: middle 120 | margin-right: 4px 121 | &.github, &.codepen 122 | color: #000 123 | &.twitter 124 | color: #1da1f3 125 | i 126 | vertical-align: text-bottom 127 | font-size: 1.3em 128 | 129 | @media (max-width: 640px) 130 | #team-members 131 | .vuer 132 | .profile 133 | h3 134 | sup 135 | display: inline-block 136 | margin-left: 0 137 | -------------------------------------------------------------------------------- /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% 35 | -------------------------------------------------------------------------------- /themes/vue/source/css/index.styl: -------------------------------------------------------------------------------- 1 | @import "_common" 2 | @import "_header" 3 | @import "_sidebar" 4 | @import "_sponsors-index" 5 | @import "_modal" 6 | 7 | $width = 900px 8 | $space = 40px 9 | 10 | body 11 | background-color: darken($light, 10%) 12 | 13 | #logo 14 | span 15 | font-size: 1.2em 16 | img 17 | display: none 18 | 19 | .sidebar 20 | display: none 21 | 22 | #mobile-bar 23 | &.top 24 | background-color: transparent 25 | box-shadow: none 26 | .logo 27 | display: none 28 | 29 | #hero 30 | padding: $space 40px 30px 31 | background-color: #fff 32 | .inner 33 | max-width: $width * 1.4 34 | margin: 0 auto 35 | .left, .right 36 | display: inline-block 37 | vertical-align: top 38 | .left 39 | width: 39% 40 | .right 41 | width: 61% 42 | .hero-logo 43 | width: 215px 44 | height: 215px 45 | float: right 46 | margin-right: 60px 47 | h1 48 | font-weight: 300 49 | margin: 0 50 | font-size: 3.2em 51 | h2 52 | font-family: $logo-font 53 | font-weight: 500 54 | font-size: 2.4em 55 | margin: 0 0 10px 56 | display: none 57 | .button 58 | margin: 1em 0 59 | font-size: 1.05em 60 | font-weight: 600 61 | letter-spacing: .1em 62 | min-width: 8em 63 | text-align: center 64 | &:not(:last-child) 65 | margin-right: 1% 66 | .social-buttons 67 | list-style-type: none 68 | padding: 0 69 | li 70 | display: inline-block 71 | vertical-align: middle 72 | margin-right: 15px 73 | 74 | #special-sponsor 75 | background-color: #fff 76 | text-align: center 77 | padding-bottom: 30px 78 | h3 79 | margin 0 80 | a 81 | color $light 82 | a, span, img 83 | display: inline-block 84 | vertical-align: middle 85 | img 86 | margin: 15px 87 | 88 | #highlights 89 | background-color: #fff 90 | padding-bottom: 70px 91 | .inner 92 | max-width: $width 93 | margin: 0 auto 94 | text-align: center 95 | .point 96 | width: 33% 97 | display: inline-block 98 | vertical-align: top 99 | box-sizing: border-box 100 | padding: 0 2em 101 | h2 102 | color: $green 103 | font-size: 1.5em 104 | font-weight: 400 105 | margin: 0 106 | padding: .5em 0 107 | p 108 | color: $light 109 | 110 | #footer 111 | padding: $space 0 112 | color: #fff 113 | text-align: center 114 | .social-icon 115 | margin 0 5px 116 | svg 117 | width 18px 118 | height 18px 119 | a 120 | font-weight: 700 121 | color: #fff 122 | 123 | @media screen and (max-width: $width) 124 | body 125 | -webkit-text-size-adjust: none 126 | font-size: 14px 127 | .sidebar 128 | display: block 129 | #header 130 | display: none 131 | #mobile-bar 132 | display: block 133 | #hero 134 | padding: $space 40px 30px 135 | .hero-logo 136 | float: none 137 | margin: 30px 0 15px 138 | width: 140px 139 | height: 140px 140 | .left, .right 141 | text-align: center 142 | width: 100% 143 | h1 144 | font-size: 2em 145 | h2 146 | display: block 147 | .button 148 | font-size: .9em 149 | #special-sponsor 150 | span 151 | display: block 152 | img 153 | width: 125px 154 | #highlights 155 | .point 156 | display: block 157 | margin: 0 auto 158 | width: 300px 159 | padding: 0 40px 30px 160 | &:before 161 | content: "—" 162 | color: $green 163 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /themes/vue/source/fonts/Dosis/Dosis-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/fonts/Dosis/Dosis-Medium.ttf -------------------------------------------------------------------------------- /themes/vue/source/fonts/Dosis/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011, Edgar Tolentino and Pablo Impallari (www.impallari.com|impallari@gmail.com), 2 | Copyright (c) 2011, Igino Marini. (www.ikern.com|mail@iginomarini.com), 3 | with Reserved Font Names "Dosis". 4 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 5 | This license is copied below, and is also available with a FAQ at: 6 | http://scripts.sil.org/OFL 7 | 8 | 9 | ----------------------------------------------------------- 10 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 11 | ----------------------------------------------------------- 12 | 13 | PREAMBLE 14 | The goals of the Open Font License (OFL) are to stimulate worldwide 15 | development of collaborative font projects, to support the font creation 16 | efforts of academic and linguistic communities, and to provide a free and 17 | open framework in which fonts may be shared and improved in partnership 18 | with others. 19 | 20 | The OFL allows the licensed fonts to be used, studied, modified and 21 | redistributed freely as long as they are not sold by themselves. The 22 | fonts, including any derivative works, can be bundled, embedded, 23 | redistributed and/or sold with any software provided that any reserved 24 | names are not used by derivative works. The fonts and derivatives, 25 | however, cannot be released under any other type of license. The 26 | requirement for fonts to remain under this license does not apply 27 | to any document created using the fonts or their derivatives. 28 | 29 | DEFINITIONS 30 | "Font Software" refers to the set of files released by the Copyright 31 | Holder(s) under this license and clearly marked as such. This may 32 | include source files, build scripts and documentation. 33 | 34 | "Reserved Font Name" refers to any names specified as such after the 35 | copyright statement(s). 36 | 37 | "Original Version" refers to the collection of Font Software components as 38 | distributed by the Copyright Holder(s). 39 | 40 | "Modified Version" refers to any derivative made by adding to, deleting, 41 | or substituting -- in part or in whole -- any of the components of the 42 | Original Version, by changing formats or by porting the Font Software to a 43 | new environment. 44 | 45 | "Author" refers to any designer, engineer, programmer, technical 46 | writer or other person who contributed to the Font Software. 47 | 48 | PERMISSION & CONDITIONS 49 | Permission is hereby granted, free of charge, to any person obtaining 50 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 51 | redistribute, and sell modified and unmodified copies of the Font 52 | Software, subject to the following conditions: 53 | 54 | 1) Neither the Font Software nor any of its individual components, 55 | in Original or Modified Versions, may be sold by itself. 56 | 57 | 2) Original or Modified Versions of the Font Software may be bundled, 58 | redistributed and/or sold with any software, provided that each copy 59 | contains the above copyright notice and this license. These can be 60 | included either as stand-alone text files, human-readable headers or 61 | in the appropriate machine-readable metadata fields within text or 62 | binary files as long as those fields can be easily viewed by the user. 63 | 64 | 3) No Modified Version of the Font Software may use the Reserved Font 65 | Name(s) unless explicit written permission is granted by the corresponding 66 | Copyright Holder. This restriction only applies to the primary font name as 67 | presented to the users. 68 | 69 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 70 | Software shall not be used to promote, endorse or advertise any 71 | Modified Version, except to acknowledge the contribution(s) of the 72 | Copyright Holder(s) and the Author(s) or with their explicit written 73 | permission. 74 | 75 | 5) The Font Software, modified or unmodified, in part or in whole, 76 | must be distributed entirely under this license, and must not be 77 | distributed under any other license. The requirement for fonts to 78 | remain under this license does not apply to any document created 79 | using the Font Software. 80 | 81 | TERMINATION 82 | This license becomes null and void if any of the above conditions are 83 | not met. 84 | 85 | DISCLAIMER 86 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 87 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 88 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 89 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 90 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 91 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 92 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 93 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 94 | OTHER DEALINGS IN THE FONT SOFTWARE. 95 | -------------------------------------------------------------------------------- /themes/vue/source/fonts/Roboto_Mono/RobotoMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/fonts/Roboto_Mono/RobotoMono-Regular.ttf -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /themes/vue/source/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf -------------------------------------------------------------------------------- /themes/vue/source/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf -------------------------------------------------------------------------------- /themes/vue/source/fonts/Source_Sans_Pro/SourceSansPro-Semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/fonts/Source_Sans_Pro/SourceSansPro-Semibold.ttf -------------------------------------------------------------------------------- /themes/vue/source/images/100offer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/100offer.png -------------------------------------------------------------------------------- /themes/vue/source/images/2mhost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/2mhost.png -------------------------------------------------------------------------------- /themes/vue/source/images/aaha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/aaha.png -------------------------------------------------------------------------------- /themes/vue/source/images/actualize.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/actualize.png -------------------------------------------------------------------------------- /themes/vue/source/images/anymod.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/anymod.png -------------------------------------------------------------------------------- /themes/vue/source/images/bit-wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/bit-wide.png -------------------------------------------------------------------------------- /themes/vue/source/images/bit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/bit.png -------------------------------------------------------------------------------- /themes/vue/source/images/bmqb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/bmqb.png -------------------------------------------------------------------------------- /themes/vue/source/images/chaitin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/chaitin.png -------------------------------------------------------------------------------- /themes/vue/source/images/check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/check.png -------------------------------------------------------------------------------- /themes/vue/source/images/codepilot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/codepilot.png -------------------------------------------------------------------------------- /themes/vue/source/images/coin-bch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/coin-bch.png -------------------------------------------------------------------------------- /themes/vue/source/images/coin-btc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/coin-btc.png -------------------------------------------------------------------------------- /themes/vue/source/images/coin-eth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/coin-eth.png -------------------------------------------------------------------------------- /themes/vue/source/images/coin-ltc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/coin-ltc.png -------------------------------------------------------------------------------- /themes/vue/source/images/conf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/conf.png -------------------------------------------------------------------------------- /themes/vue/source/images/coreui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/coreui.png -------------------------------------------------------------------------------- /themes/vue/source/images/datacamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/datacamp.png -------------------------------------------------------------------------------- /themes/vue/source/images/dopamine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/dopamine.png -------------------------------------------------------------------------------- /themes/vue/source/images/down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/down.png -------------------------------------------------------------------------------- /themes/vue/source/images/famebroker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/famebroker.png -------------------------------------------------------------------------------- /themes/vue/source/images/feed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/feed.png -------------------------------------------------------------------------------- /themes/vue/source/images/frontend-love.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/frontend-love.png -------------------------------------------------------------------------------- /themes/vue/source/images/frontend-meetups.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/frontend-meetups.png -------------------------------------------------------------------------------- /themes/vue/source/images/hackr-io.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/hackr-io.png -------------------------------------------------------------------------------- /themes/vue/source/images/htmlburger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/htmlburger.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/android-icon-144x144.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/android-icon-192x192.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/android-icon-36x36.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/android-icon-48x48.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/android-icon-72x72.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/android-icon-96x96.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/apple-icon-114x114.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/apple-icon-120x120.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/apple-icon-144x144.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/apple-icon-180x180.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/apple-icon-57x57.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/apple-icon-60x60.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/apple-icon-72x72.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/apple-icon-76x76.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/apple-icon-precomposed.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/apple-icon.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/favicon-16x16.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/favicon-32x32.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/favicon-96x96.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/favicon.ico -------------------------------------------------------------------------------- /themes/vue/source/images/icons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/ms-icon-144x144.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/ms-icon-150x150.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/ms-icon-310x310.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons/ms-icon-70x70.png -------------------------------------------------------------------------------- /themes/vue/source/images/icons8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/icons8.png -------------------------------------------------------------------------------- /themes/vue/source/images/infinitynewtab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/infinitynewtab.png -------------------------------------------------------------------------------- /themes/vue/source/images/itunescn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/itunescn.png -------------------------------------------------------------------------------- /themes/vue/source/images/jsfiddle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/jsfiddle.png -------------------------------------------------------------------------------- /themes/vue/source/images/jsguru.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/jsguru.png -------------------------------------------------------------------------------- /themes/vue/source/images/juejin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/juejin.png -------------------------------------------------------------------------------- /themes/vue/source/images/laravel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/laravel.png -------------------------------------------------------------------------------- /themes/vue/source/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/logo.png -------------------------------------------------------------------------------- /themes/vue/source/images/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/menu.png -------------------------------------------------------------------------------- /themes/vue/source/images/monterail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/monterail.png -------------------------------------------------------------------------------- /themes/vue/source/images/nativescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/nativescript.png -------------------------------------------------------------------------------- /themes/vue/source/images/neds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/neds.png -------------------------------------------------------------------------------- /themes/vue/source/images/nsoft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/nsoft.png -------------------------------------------------------------------------------- /themes/vue/source/images/onsen-ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/onsen-ui.png -------------------------------------------------------------------------------- /themes/vue/source/images/patreon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/patreon.png -------------------------------------------------------------------------------- /themes/vue/source/images/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/paypal.png -------------------------------------------------------------------------------- /themes/vue/source/images/piio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/piio.png -------------------------------------------------------------------------------- /themes/vue/source/images/pubnub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/pubnub.png -------------------------------------------------------------------------------- /themes/vue/source/images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/search.png -------------------------------------------------------------------------------- /themes/vue/source/images/someline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/someline.png -------------------------------------------------------------------------------- /themes/vue/source/images/special-sponsor-spot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/special-sponsor-spot.png -------------------------------------------------------------------------------- /themes/vue/source/images/stdlib.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/stdlib.png -------------------------------------------------------------------------------- /themes/vue/source/images/strikingly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/strikingly.png -------------------------------------------------------------------------------- /themes/vue/source/images/tde.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/tde.png -------------------------------------------------------------------------------- /themes/vue/source/images/teamextension.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/teamextension.png -------------------------------------------------------------------------------- /themes/vue/source/images/tidelift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/tidelift.png -------------------------------------------------------------------------------- /themes/vue/source/images/tmvuejs2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/tmvuejs2.png -------------------------------------------------------------------------------- /themes/vue/source/images/tooltwist.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/tooltwist.png -------------------------------------------------------------------------------- /themes/vue/source/images/upyun-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/upyun-large.png -------------------------------------------------------------------------------- /themes/vue/source/images/upyun-main-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/upyun-main-2.jpg -------------------------------------------------------------------------------- /themes/vue/source/images/upyun-main-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/upyun-main-3.jpg -------------------------------------------------------------------------------- /themes/vue/source/images/upyun-main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/upyun-main.jpg -------------------------------------------------------------------------------- /themes/vue/source/images/upyun-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/upyun-small.png -------------------------------------------------------------------------------- /themes/vue/source/images/valuecoders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/valuecoders.png -------------------------------------------------------------------------------- /themes/vue/source/images/vehikl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/vehikl.png -------------------------------------------------------------------------------- /themes/vue/source/images/vuejobs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/vuejobs.png -------------------------------------------------------------------------------- /themes/vue/source/images/vuejsadmin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/vuejsadmin.png -------------------------------------------------------------------------------- /themes/vue/source/images/vuemastery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/vuemastery.png -------------------------------------------------------------------------------- /themes/vue/source/images/vueschool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/vueschool.png -------------------------------------------------------------------------------- /themes/vue/source/images/vuetify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/vuetify.png -------------------------------------------------------------------------------- /themes/vue/source/images/xfive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/volksbright/document-standard-vue/aaba5342db145137121fcbc83e64cea997e3abfa/themes/vue/source/images/xfive.png -------------------------------------------------------------------------------- /themes/vue/source/js/css.escape.js: -------------------------------------------------------------------------------- 1 | /*! https://mths.be/cssescape v1.5.1 by @mathias | MIT license */ 2 | ;(function(root, factory) { 3 | // https://github.com/umdjs/umd/blob/master/returnExports.js 4 | if (typeof exports == 'object') { 5 | // For Node.js. 6 | module.exports = factory(root); 7 | } else if (typeof define == 'function' && define.amd) { 8 | // For AMD. Register as an anonymous module. 9 | define([], factory.bind(root, root)); 10 | } else { 11 | // For browser globals (not exposing the function separately). 12 | factory(root); 13 | } 14 | }(typeof global != 'undefined' ? global : this, function(root) { 15 | 16 | if (root.CSS && root.CSS.escape) { 17 | return root.CSS.escape; 18 | } 19 | 20 | // https://drafts.csswg.org/cssom/#serialize-an-identifier 21 | var cssEscape = function(value) { 22 | if (arguments.length == 0) { 23 | throw new TypeError('`CSS.escape` requires an argument.'); 24 | } 25 | var string = String(value); 26 | var length = string.length; 27 | var index = -1; 28 | var codeUnit; 29 | var result = ''; 30 | var firstCodeUnit = string.charCodeAt(0); 31 | while (++index < length) { 32 | codeUnit = string.charCodeAt(index); 33 | // Note: there’s no need to special-case astral symbols, surrogate 34 | // pairs, or lone surrogates. 35 | 36 | // If the character is NULL (U+0000), then the REPLACEMENT CHARACTER 37 | // (U+FFFD). 38 | if (codeUnit == 0x0000) { 39 | result += '\uFFFD'; 40 | continue; 41 | } 42 | 43 | if ( 44 | // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is 45 | // U+007F, […] 46 | (codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F || 47 | // If the character is the first character and is in the range [0-9] 48 | // (U+0030 to U+0039), […] 49 | (index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) || 50 | // If the character is the second character and is in the range [0-9] 51 | // (U+0030 to U+0039) and the first character is a `-` (U+002D), […] 52 | ( 53 | index == 1 && 54 | codeUnit >= 0x0030 && codeUnit <= 0x0039 && 55 | firstCodeUnit == 0x002D 56 | ) 57 | ) { 58 | // https://drafts.csswg.org/cssom/#escape-a-character-as-code-point 59 | result += '\\' + codeUnit.toString(16) + ' '; 60 | continue; 61 | } 62 | 63 | if ( 64 | // If the character is the first character and is a `-` (U+002D), and 65 | // there is no second character, […] 66 | index == 0 && 67 | length == 1 && 68 | codeUnit == 0x002D 69 | ) { 70 | result += '\\' + string.charAt(index); 71 | continue; 72 | } 73 | 74 | // If the character is not handled by one of the above rules and is 75 | // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or 76 | // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to 77 | // U+005A), or [a-z] (U+0061 to U+007A), […] 78 | if ( 79 | codeUnit >= 0x0080 || 80 | codeUnit == 0x002D || 81 | codeUnit == 0x005F || 82 | codeUnit >= 0x0030 && codeUnit <= 0x0039 || 83 | codeUnit >= 0x0041 && codeUnit <= 0x005A || 84 | codeUnit >= 0x0061 && codeUnit <= 0x007A 85 | ) { 86 | // the character itself 87 | result += string.charAt(index); 88 | continue; 89 | } 90 | 91 | // Otherwise, the escaped character. 92 | // https://drafts.csswg.org/cssom/#escape-a-character 93 | result += '\\' + string.charAt(index); 94 | 95 | } 96 | return result; 97 | }; 98 | 99 | if (!root.CSS) { 100 | root.CSS = {}; 101 | } 102 | 103 | root.CSS.escape = cssEscape; 104 | return cssEscape; 105 | 106 | })); 107 | -------------------------------------------------------------------------------- /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})); -------------------------------------------------------------------------------- /themes/vue/source/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "background_color": "#ffffff", 3 | "description": "The Progressive JavaScript Framework", 4 | "display": "standalone", 5 | "icons": [ 6 | { 7 | "src": "\/images\/icons\/android-icon-36x36.png", 8 | "sizes": "36x36", 9 | "type": "image\/png", 10 | "density": "0.75" 11 | }, 12 | { 13 | "src": "\/images\/icons\/android-icon-48x48.png", 14 | "sizes": "48x48", 15 | "type": "image\/png", 16 | "density": "1.0" 17 | }, 18 | { 19 | "src": "\/images\/icons\/android-icon-72x72.png", 20 | "sizes": "72x72", 21 | "type": "image\/png", 22 | "density": "1.5" 23 | }, 24 | { 25 | "src": "\/images\/icons\/android-icon-96x96.png", 26 | "sizes": "96x96", 27 | "type": "image\/png", 28 | "density": "2.0" 29 | }, 30 | { 31 | "src": "\/images\/icons\/android-icon-144x144.png", 32 | "sizes": "144x144", 33 | "type": "image\/png", 34 | "density": "3.0" 35 | }, 36 | { 37 | "src": "\/images\/icons\/android-icon-192x192.png", 38 | "sizes": "192x192", 39 | "type": "image\/png", 40 | "density": "4.0" 41 | } 42 | ], 43 | "lang": "en-US", 44 | "name": "Vue.js", 45 | "short_name": "Vue", 46 | "start_url": "./menu", 47 | "theme_color": "#4fc08d" 48 | } 49 | --------------------------------------------------------------------------------