diff --git a/_config.yml b/_config.yml index 9c3d2eeeea..6a54967667 100644 --- a/_config.yml +++ b/_config.yml @@ -77,6 +77,11 @@ pagination_dir: page # Disqus disqus_shortname: +# Include/Exclude Files/Folders +exclude: +## Exclude example code from Nunjucks + - "v2/examples/vue-20-*/*" + # Extensions ## Plugins: https://github.com/hexojs/hexo/wiki/Plugins ## Themes: https://github.com/hexojs/hexo/wiki/Themes diff --git a/assets/why-vue/arabic.js.srt b/assets/why-vue/arabic.js.srt index 0388f0dd2d..af61b3d07c 100644 --- a/assets/why-vue/arabic.js.srt +++ b/assets/why-vue/arabic.js.srt @@ -411,7 +411,7 @@ H2 إلى قائمة غير مرتبة، 94 00:03:57,460 --> 00:03:59,850 -دعنا نلغي ​​العنصر الأخير من المصفوفة +دعنا نلغي العنصر الأخير من المصفوفة 95 00:03:59,850 --> 00:04:01,828 diff --git a/src/v2/examples/commits.md b/src/v2/examples/commits.md index 7481498d3a..5e8605de0d 100644 --- a/src/v2/examples/commits.md +++ b/src/v2/examples/commits.md @@ -6,4 +6,4 @@ order: 1 > This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches. - + diff --git a/src/v2/examples/deepstream.md b/src/v2/examples/deepstream.md index 382e3bd3b8..c3e159cfc8 100644 --- a/src/v2/examples/deepstream.md +++ b/src/v2/examples/deepstream.md @@ -6,4 +6,4 @@ order: 9 > 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). - + diff --git a/src/v2/examples/elastic-header.md b/src/v2/examples/elastic-header.md index 186ba37a92..4fc65add3b 100644 --- a/src/v2/examples/elastic-header.md +++ b/src/v2/examples/elastic-header.md @@ -4,4 +4,4 @@ type: examples order: 7 --- - + diff --git a/src/v2/examples/firebase.md b/src/v2/examples/firebase.md index e67c6c0f7c..f600658b4c 100644 --- a/src/v2/examples/firebase.md +++ b/src/v2/examples/firebase.md @@ -6,4 +6,4 @@ order: 10 > This example uses [Firebase](https://firebase.google.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items. - + diff --git a/src/v2/examples/grid-component.md b/src/v2/examples/grid-component.md index 41bc7f5015..dd4330f6e1 100644 --- a/src/v2/examples/grid-component.md +++ b/src/v2/examples/grid-component.md @@ -6,4 +6,4 @@ order: 3 > This is an example of creating a reusable grid component and using it with external data. - + diff --git a/src/v2/examples/index.md b/src/v2/examples/index.md index 5fdff15702..9ffe5ea9a7 100644 --- a/src/v2/examples/index.md +++ b/src/v2/examples/index.md @@ -6,4 +6,4 @@ order: 0 > Dead simple Markdown editor. - + diff --git a/src/v2/examples/modal.md b/src/v2/examples/modal.md index fc1e0a9e3f..3962c3c68f 100644 --- a/src/v2/examples/modal.md +++ b/src/v2/examples/modal.md @@ -6,4 +6,4 @@ order: 6 > Features used: component, prop passing, content insertion, transitions. - + diff --git a/src/v2/examples/select2.md b/src/v2/examples/select2.md index 0731a39471..0cc78de91b 100644 --- a/src/v2/examples/select2.md +++ b/src/v2/examples/select2.md @@ -6,4 +6,4 @@ order: 8 > In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component. - + diff --git a/src/v2/examples/svg.md b/src/v2/examples/svg.md index 38756f623e..f2253021a4 100644 --- a/src/v2/examples/svg.md +++ b/src/v2/examples/svg.md @@ -6,4 +6,4 @@ order: 5 > This example showcases a combination of custom component, computed property, two-way binding and SVG support. - + diff --git a/src/v2/examples/todomvc.md b/src/v2/examples/todomvc.md index b3eee18d9a..426ee15235 100644 --- a/src/v2/examples/todomvc.md +++ b/src/v2/examples/todomvc.md @@ -6,6 +6,6 @@ order: 11 > This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines). -

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.

+

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. You'll have to click on `Open Sandbox` to see the live result.

- + diff --git a/src/v2/examples/tree-view.md b/src/v2/examples/tree-view.md index f0d34bfe8d..14246aefa8 100644 --- a/src/v2/examples/tree-view.md +++ b/src/v2/examples/tree-view.md @@ -6,4 +6,4 @@ order: 4 > Example of a simple tree view implementation showcasing recursive usage of components. - + diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v2/index.html b/src/v2/examples/vue-10-two-way-currency-filter-v2/index.html new file mode 100644 index 0000000000..caf5244f40 --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter-v2/index.html @@ -0,0 +1,88 @@ + + + + Two-way Currency Filter + + + + +
+ + + + + +

Total: ${{ total }}

+
+ + + + diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v2/package.json b/src/v2/examples/vue-10-two-way-currency-filter-v2/package.json new file mode 100644 index 0000000000..3dcc5dba3f --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter-v2/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-10-two-way-currency-filter-v2", + "version": "1.0.0", + "description": "Showing how delayed state updates can cause strange behavior.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v2/sandbox.config.json b/src/v2/examples/vue-10-two-way-currency-filter-v2/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter-v2/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v3/currency-validator.js b/src/v2/examples/vue-10-two-way-currency-filter-v3/currency-validator.js new file mode 100644 index 0000000000..80ab295e34 --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter-v3/currency-validator.js @@ -0,0 +1,61 @@ +var currencyValidator = { + format: function(number) { + return (Math.trunc(number * 100) / 100).toFixed(2); + }, + parse: function(newString, oldNumber) { + var CleanParse = function(value) { + return { value: value }; + }; + var CurrencyWarning = function(warning, value) { + return { + warning: warning, + value: value, + attempt: newString + }; + }; + var NotAValidDollarAmountWarning = function(value) { + return new CurrencyWarning( + newString + " is not a valid dollar amount", + value + ); + }; + var AutomaticConversionWarning = function(value) { + return new CurrencyWarning( + newString + " was automatically converted to " + value, + value + ); + }; + + var newNumber = Number(newString); + var indexOfDot = newString.indexOf("."); + var indexOfE = newString.indexOf("e"); + + if (isNaN(newNumber)) { + if ( + indexOfDot === -1 && + indexOfE > 0 && + indexOfE === newString.length - 1 && + Number(newString.slice(0, indexOfE)) !== 0 + ) { + return new CleanParse(oldNumber); + } else { + return new NotAValidDollarAmountWarning(oldNumber); + } + } + + var newCurrencyString = currencyValidator.format(newNumber); + var newCurrencyNumber = Number(newCurrencyString); + + if (newCurrencyNumber === newNumber) { + if (indexOfE !== -1 && indexOfE === newString.length - 2) { + return new AutomaticConversionWarning(newNumber); + } else { + return new CleanParse(newNumber); + } + } else { + return new NotAValidDollarAmountWarning( + newNumber > newCurrencyNumber ? newCurrencyNumber : oldNumber + ); + } + } +}; diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v3/index.html b/src/v2/examples/vue-10-two-way-currency-filter-v3/index.html new file mode 100644 index 0000000000..40d6041b2a --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter-v3/index.html @@ -0,0 +1,97 @@ + + + + Two-way Currency Filter + + + + +
+ + + + + +

Total: ${{ total }}

+
+ + + + diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v3/package.json b/src/v2/examples/vue-10-two-way-currency-filter-v3/package.json new file mode 100644 index 0000000000..082e912c93 --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter-v3/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-10-two-way-currency-filter-v3", + "version": "1.0.0", + "description": "Showing how delayed state updates can cause strange behavior.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-10-two-way-currency-filter-v3/sandbox.config.json b/src/v2/examples/vue-10-two-way-currency-filter-v3/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter-v3/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-10-two-way-currency-filter/index.html b/src/v2/examples/vue-10-two-way-currency-filter/index.html new file mode 100644 index 0000000000..e63f64f86b --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter/index.html @@ -0,0 +1,56 @@ + + + + Two-way Currency Filter + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +

Total: ${{ total }}

+
+ + + + diff --git a/src/v2/examples/vue-10-two-way-currency-filter/package.json b/src/v2/examples/vue-10-two-way-currency-filter/package.json new file mode 100644 index 0000000000..ee92d5f0a8 --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-10-two-way-currency-filter", + "version": "1.0.0", + "description": "Showing how delayed state updates can cause strange behavior.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-10-two-way-currency-filter/sandbox.config.json b/src/v2/examples/vue-10-two-way-currency-filter/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-10-two-way-currency-filter/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-elastic-header/index.html b/src/v2/examples/vue-20-elastic-header/index.html new file mode 100644 index 0000000000..26d74a1a5e --- /dev/null +++ b/src/v2/examples/vue-20-elastic-header/index.html @@ -0,0 +1,115 @@ + + + + Elastic Header + + + + + + + +
+ + + + +
+ + + + diff --git a/src/v2/examples/vue-20-elastic-header/package.json b/src/v2/examples/vue-20-elastic-header/package.json new file mode 100644 index 0000000000..6362227733 --- /dev/null +++ b/src/v2/examples/vue-20-elastic-header/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-elastic-header", + "version": "1.0.0", + "description": "Elastic Draggable SVG Header", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-elastic-header/sandbox.config.json b/src/v2/examples/vue-20-elastic-header/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-elastic-header/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-elastic-header/style.css b/src/v2/examples/vue-20-elastic-header/style.css new file mode 100644 index 0000000000..f3fc3f0b5c --- /dev/null +++ b/src/v2/examples/vue-20-elastic-header/style.css @@ -0,0 +1,45 @@ +h1 { + font-weight: 300; + font-size: 1.8em; + margin-top: 0; +} +a { + color: #fff; +} +.draggable-header-view { + background-color: #fff; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); + width: 320px; + height: 560px; + overflow: hidden; + margin: 30px auto; + position: relative; + font-family: "Roboto", Helvetica, Arial, sans-serif; + color: #fff; + font-size: 14px; + font-weight: 300; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.draggable-header-view .bg { + position: absolute; + top: 0; + left: 0; + z-index: 0; +} +.draggable-header-view .header, +.draggable-header-view .content { + position: relative; + z-index: 1; + padding: 30px; + box-sizing: border-box; +} +.draggable-header-view .header { + height: 160px; +} +.draggable-header-view .content { + color: #333; + line-height: 1.5em; +} diff --git a/src/v2/examples/vue-20-firebase-validation/index.html b/src/v2/examples/vue-20-firebase-validation/index.html new file mode 100644 index 0000000000..1335839c1d --- /dev/null +++ b/src/v2/examples/vue-20-firebase-validation/index.html @@ -0,0 +1,96 @@ + + + + Firebase + Validation + + + + + + + +
+ +
+ + + +
+ +
+ + + + diff --git a/src/v2/examples/vue-20-firebase-validation/package.json b/src/v2/examples/vue-20-firebase-validation/package.json new file mode 100644 index 0000000000..570fb291d7 --- /dev/null +++ b/src/v2/examples/vue-20-firebase-validation/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-firebase-validation", + "version": "1.0.0", + "description": "This example uses Firebase as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-firebase-validation/sandbox.config.json b/src/v2/examples/vue-20-firebase-validation/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-firebase-validation/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-firebase-validation/style.css b/src/v2/examples/vue-20-firebase-validation/style.css new file mode 100644 index 0000000000..761054c0c1 --- /dev/null +++ b/src/v2/examples/vue-20-firebase-validation/style.css @@ -0,0 +1,33 @@ +body { + font-family: Helvetica, Arial, sans-serif; +} + +ul { + padding: 0; +} + +.user { + height: 30px; + line-height: 30px; + padding: 10px; + border-top: 1px solid #eee; + overflow: hidden; + transition: all 0.25s ease; +} + +.user:last-child { + border-bottom: 1px solid #eee; +} + +.v-enter, +.v-leave-active { + height: 0; + padding-top: 0; + padding-bottom: 0; + border-top-width: 0; + border-bottom-width: 0; +} + +.errors { + color: #f00; +} diff --git a/src/v2/examples/vue-20-github-commits/index.html b/src/v2/examples/vue-20-github-commits/index.html new file mode 100644 index 0000000000..db344faee0 --- /dev/null +++ b/src/v2/examples/vue-20-github-commits/index.html @@ -0,0 +1,91 @@ + + + + GitHub Commits + + + + +
+

Latest Vue.js Commits

+ +

vuejs/vue@{{ currentBranch }}

+ +
+ + + + diff --git a/src/v2/examples/vue-20-github-commits/package.json b/src/v2/examples/vue-20-github-commits/package.json new file mode 100644 index 0000000000..8afebc6358 --- /dev/null +++ b/src/v2/examples/vue-20-github-commits/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-github-commits", + "version": "1.0.0", + "description": "This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-github-commits/sandbox.config.json b/src/v2/examples/vue-20-github-commits/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-github-commits/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-github-commits/style.css b/src/v2/examples/vue-20-github-commits/style.css new file mode 100644 index 0000000000..c0e705b77b --- /dev/null +++ b/src/v2/examples/vue-20-github-commits/style.css @@ -0,0 +1,15 @@ +#demo { + font-family: "Helvetica", Arial, sans-serif; +} +a { + text-decoration: none; + color: #f66; +} +li { + line-height: 1.5em; + margin-bottom: 20px; +} +.author, +.date { + font-weight: bold; +} diff --git a/src/v2/examples/vue-20-grid-component/index.html b/src/v2/examples/vue-20-grid-component/index.html new file mode 100644 index 0000000000..43b96ea545 --- /dev/null +++ b/src/v2/examples/vue-20-grid-component/index.html @@ -0,0 +1,121 @@ + + + + Grid Component + + + + + + + + +
+ + + +
+ + + + diff --git a/src/v2/examples/vue-20-grid-component/package.json b/src/v2/examples/vue-20-grid-component/package.json new file mode 100644 index 0000000000..1734610da9 --- /dev/null +++ b/src/v2/examples/vue-20-grid-component/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-grid-component", + "version": "1.0.0", + "description": "This is an example of creating a reusable grid component and using it with external data.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-grid-component/sandbox.config.json b/src/v2/examples/vue-20-grid-component/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-grid-component/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-grid-component/style.css b/src/v2/examples/vue-20-grid-component/style.css new file mode 100644 index 0000000000..f10002ab8f --- /dev/null +++ b/src/v2/examples/vue-20-grid-component/style.css @@ -0,0 +1,60 @@ +body { + font-family: Helvetica Neue, Arial, sans-serif; + font-size: 14px; + color: #444; +} + +table { + border: 2px solid #42b983; + border-radius: 3px; + background-color: #fff; +} + +th { + background-color: #42b983; + color: rgba(255, 255, 255, 0.66); + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +td { + background-color: #f9f9f9; +} + +th, +td { + min-width: 120px; + padding: 10px 20px; +} + +th.active { + color: #fff; +} + +th.active .arrow { + opacity: 1; +} + +.arrow { + display: inline-block; + vertical-align: middle; + width: 0; + height: 0; + margin-left: 5px; + opacity: 0.66; +} + +.arrow.asc { + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 4px solid #fff; +} + +.arrow.dsc { + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #fff; +} diff --git a/src/v2/examples/vue-20-markdown-editor/index.html b/src/v2/examples/vue-20-markdown-editor/index.html new file mode 100644 index 0000000000..0e13a58ee6 --- /dev/null +++ b/src/v2/examples/vue-20-markdown-editor/index.html @@ -0,0 +1,35 @@ + + + + Markdown Editor + + + + + + +
+ +
+
+ + + + diff --git a/src/v2/examples/vue-20-markdown-editor/package.json b/src/v2/examples/vue-20-markdown-editor/package.json new file mode 100644 index 0000000000..7866640c16 --- /dev/null +++ b/src/v2/examples/vue-20-markdown-editor/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-markdown-editor", + "version": "1.0.0", + "description": "Dead simple Markdown editor.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-markdown-editor/sandbox.config.json b/src/v2/examples/vue-20-markdown-editor/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-markdown-editor/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-markdown-editor/style.css b/src/v2/examples/vue-20-markdown-editor/style.css new file mode 100644 index 0000000000..01cacdc9d3 --- /dev/null +++ b/src/v2/examples/vue-20-markdown-editor/style.css @@ -0,0 +1,33 @@ +html, +body, +#editor { + margin: 0; + height: 100%; + font-family: "Helvetica Neue", Arial, sans-serif; + color: #333; +} + +textarea, +#editor div { + display: inline-block; + width: 49%; + height: 100%; + vertical-align: top; + box-sizing: border-box; + padding: 0 20px; +} + +textarea { + border: none; + border-right: 1px solid #ccc; + resize: none; + outline: none; + background-color: #f6f6f6; + font-size: 14px; + font-family: "Monaco", courier, monospace; + padding: 20px; +} + +code { + color: #f66; +} diff --git a/src/v2/examples/vue-20-modal-component/index.html b/src/v2/examples/vue-20-modal-component/index.html new file mode 100644 index 0000000000..a6cb246586 --- /dev/null +++ b/src/v2/examples/vue-20-modal-component/index.html @@ -0,0 +1,69 @@ + + + + Modal Component + + + + + + + +
+ + + + +

custom header

+ +
+ + + + diff --git a/src/v2/examples/vue-20-modal-component/package.json b/src/v2/examples/vue-20-modal-component/package.json new file mode 100644 index 0000000000..6d64ba2432 --- /dev/null +++ b/src/v2/examples/vue-20-modal-component/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-modal-component", + "version": "1.0.0", + "description": "Features used: component, prop passing, content insertion, transitions.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-modal-component/sandbox.config.json b/src/v2/examples/vue-20-modal-component/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-modal-component/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-modal-component/style.css b/src/v2/examples/vue-20-modal-component/style.css new file mode 100644 index 0000000000..d36f166fb4 --- /dev/null +++ b/src/v2/examples/vue-20-modal-component/style.css @@ -0,0 +1,63 @@ +.modal-mask { + position: fixed; + z-index: 9998; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: table; + transition: opacity 0.3s ease; +} + +.modal-wrapper { + display: table-cell; + vertical-align: middle; +} + +.modal-container { + width: 300px; + margin: 0px auto; + padding: 20px 30px; + background-color: #fff; + border-radius: 2px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); + transition: all 0.3s ease; + font-family: Helvetica, Arial, sans-serif; +} + +.modal-header h3 { + margin-top: 0; + color: #42b983; +} + +.modal-body { + margin: 20px 0; +} + +.modal-default-button { + float: right; +} + +/* + * The following styles are auto-applied to elements with + * transition="modal" when their visibility is toggled + * by Vue.js. + * + * You can easily play with the modal transition by editing + * these styles. + */ + +.modal-enter { + opacity: 0; +} + +.modal-leave-active { + opacity: 0; +} + +.modal-enter .modal-container, +.modal-leave-active .modal-container { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} diff --git a/src/v2/examples/vue-20-realtime-with-deepstreamhub/index.html b/src/v2/examples/vue-20-realtime-with-deepstreamhub/index.html new file mode 100644 index 0000000000..639319a9dc --- /dev/null +++ b/src/v2/examples/vue-20-realtime-with-deepstreamhub/index.html @@ -0,0 +1,184 @@ + + + + Realtime with deepstreamHub + + + + + + + +
+
+ Connection-State is: {{connectionState}} +
+ + + +
+ + + + + + + + + + diff --git a/src/v2/examples/vue-20-realtime-with-deepstreamhub/package.json b/src/v2/examples/vue-20-realtime-with-deepstreamhub/package.json new file mode 100644 index 0000000000..abf1458b23 --- /dev/null +++ b/src/v2/examples/vue-20-realtime-with-deepstreamhub/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-realtime-with-deepstreamhub", + "version": "1.0.0", + "description": "This example uses deepstreamHub to synchronize realtime data, send events and make remote procedure calls between clients (you can try opening it in multiple browser windows).", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-realtime-with-deepstreamhub/sandbox.config.json b/src/v2/examples/vue-20-realtime-with-deepstreamhub/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-realtime-with-deepstreamhub/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-realtime-with-deepstreamhub/style.css b/src/v2/examples/vue-20-realtime-with-deepstreamhub/style.css new file mode 100644 index 0000000000..b643051dfb --- /dev/null +++ b/src/v2/examples/vue-20-realtime-with-deepstreamhub/style.css @@ -0,0 +1,122 @@ +* { + margin: 0; + padding: 0; + list-style-type: none; + font-family: RobotoCondensed, sans-serif; + font-size: 14px; + color: #333; + box-sizing: border-box; + outline: none; + transition: all 200ms ease; +} + +body { + background-color: #fff; +} + +.group { + width: 80%; + max-width: 800px; + margin: 40px auto; + padding: 20px; + position: relative; + overflow: hidden; +} + +.group.connectionState { + margin: 10px auto 0; + padding: 0 20px; +} + +h2 { + font-size: 20px; + border-bottom: 1px solid #ccc; + padding-bottom: 4px; + margin-bottom: 10px; + position: relative; +} + +h2 small { + position: absolute; + right: 0; +} + +h2 small * { + display: inline-block; + vertical-align: middle; + font-weight: normal; + color: #333; + font-size: 12px; + cursor: pointer; +} + +button, +input, +.item { + height: 32px; + padding: 6px; +} + +button { + border: none; + background: #7185ec; + color: #fff; + font-weight: 500; + border-radius: 4px; + cursor: pointer; + text-align: center; + cursor: pointer; + font-weight: bold; + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2); +} + +button:hover { + background-color: #586cd8; +} + +button:active { + position: relative; + top: 1px; + left: 1px; + box-shadow: none; +} + +.half { + width: 48%; + float: left; + position: relative; +} + +.half.left { + margin-right: 4%; +} + +label { + font-size: 11px; + font-style: italic; +} + +input { + border-radius: 4px; + border: 1px solid #ccc; +} + +input:focus { + border-color: #7185ec; +} + +.input-group input { + width: 100%; +} + +span.response { + display: inline-block; + background-color: #dddddd; +} + +@media screen and (max-width: 900px) { + .half { + width: 100%; + margin: 0 0 10px !important; + } +} diff --git a/src/v2/examples/vue-20-svg-graph/index.html b/src/v2/examples/vue-20-svg-graph/index.html new file mode 100644 index 0000000000..435a47da5e --- /dev/null +++ b/src/v2/examples/vue-20-svg-graph/index.html @@ -0,0 +1,142 @@ + + + + SVG Graph + + + + + + + + + + + +
+ + + + + +
+ + + {{stat.value}} + +
+
+ + +
+ 
{{ stats }}
+
+ +

* input[type="range"] requires IE10 or above.

+ + + + diff --git a/src/v2/examples/vue-20-svg-graph/package.json b/src/v2/examples/vue-20-svg-graph/package.json new file mode 100644 index 0000000000..afbe362f77 --- /dev/null +++ b/src/v2/examples/vue-20-svg-graph/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-svg-graph", + "version": "1.0.0", + "description": "This example showcases a combination of custom component, computed property, two-way binding and SVG support.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-svg-graph/sandbox.config.json b/src/v2/examples/vue-20-svg-graph/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-svg-graph/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-svg-graph/style.css b/src/v2/examples/vue-20-svg-graph/style.css new file mode 100644 index 0000000000..b533e006a6 --- /dev/null +++ b/src/v2/examples/vue-20-svg-graph/style.css @@ -0,0 +1,31 @@ +body { + font-family: Helvetica Neue, Arial, sans-serif; +} + +polygon { + fill: #42b983; + opacity: 0.75; +} + +circle { + fill: transparent; + stroke: #999; +} + +text { + font-family: Helvetica Neue, Arial, sans-serif; + font-size: 10px; + fill: #666; +} + +label { + display: inline-block; + margin-left: 10px; + width: 20px; +} + +#raw { + position: absolute; + top: 0; + left: 300px; +} diff --git a/src/v2/examples/vue-20-template-compilation/index.html b/src/v2/examples/vue-20-template-compilation/index.html new file mode 100644 index 0000000000..b74e68f29b --- /dev/null +++ b/src/v2/examples/vue-20-template-compilation/index.html @@ -0,0 +1,83 @@ + + + + Template Compilation + + + + +
+ +
+ + 
{{ result.render }}
+ + 
_m({{ index }}): {{ fn }}
+ 
{{ result.staticRenderFns }}
+
+
+ + 
{{ result }}
+
+
+ + + + + + diff --git a/src/v2/examples/vue-20-template-compilation/package.json b/src/v2/examples/vue-20-template-compilation/package.json new file mode 100644 index 0000000000..c802e56604 --- /dev/null +++ b/src/v2/examples/vue-20-template-compilation/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-template-compilation", + "version": "1.0.0", + "description": "A demo using Vue.compile to live-compile a template string.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-template-compilation/sandbox.config.json b/src/v2/examples/vue-20-template-compilation/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-template-compilation/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-template-compilation/style.css b/src/v2/examples/vue-20-template-compilation/style.css new file mode 100644 index 0000000000..02a88e4503 --- /dev/null +++ b/src/v2/examples/vue-20-template-compilation/style.css @@ -0,0 +1,45 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; + -webkit-user-select: inherit; + user-select: inherit; + font-size: 14px; + color: #34495e; +} + +pre { + padding: 10px; + overflow-x: auto; + background: #f2f2f2; +} + +code { + white-space: pre; + padding: 0; +} + +code, +pre, +textarea { + font-family: "Roboto Mono", Monaco, courier, monospace; +} + +textarea { + width: 100%; + font-size: 14px; + margin-bottom: 8px; + border-color: #bbb; + padding: 8px; + border-bottom-width: 2px; + outline: none; + color: #34495e; +} + +textarea:focus { + background: lightyellow; +} diff --git a/src/v2/examples/vue-20-todomvc/index.html b/src/v2/examples/vue-20-todomvc/index.html new file mode 100644 index 0000000000..78337e1867 --- /dev/null +++ b/src/v2/examples/vue-20-todomvc/index.html @@ -0,0 +1,258 @@ + + + + TodoMVC + + + + + +
+
+

todos

+ +
+
+ + + +
+ +
+ + + + + diff --git a/src/v2/examples/vue-20-todomvc/package.json b/src/v2/examples/vue-20-todomvc/package.json new file mode 100644 index 0000000000..8fb7dbe6d5 --- /dev/null +++ b/src/v2/examples/vue-20-todomvc/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-todomvc", + "version": "1.0.0", + "description": "This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines).", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-todomvc/sandbox.config.json b/src/v2/examples/vue-20-todomvc/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-todomvc/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-tree-view/index.html b/src/v2/examples/vue-20-tree-view/index.html new file mode 100644 index 0000000000..b5aad8cca3 --- /dev/null +++ b/src/v2/examples/vue-20-tree-view/index.html @@ -0,0 +1,121 @@ + + + + Tree View + + + + + + + +

(You can double click on an item to turn it into a folder.)

+ + + + + + + diff --git a/src/v2/examples/vue-20-tree-view/package.json b/src/v2/examples/vue-20-tree-view/package.json new file mode 100644 index 0000000000..911f9e37e4 --- /dev/null +++ b/src/v2/examples/vue-20-tree-view/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-tree-view", + "version": "1.0.0", + "description": "Example of a simple tree view implementation showcasing recursive usage of components.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-tree-view/sandbox.config.json b/src/v2/examples/vue-20-tree-view/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-tree-view/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-tree-view/style.css b/src/v2/examples/vue-20-tree-view/style.css new file mode 100644 index 0000000000..39c9133b8c --- /dev/null +++ b/src/v2/examples/vue-20-tree-view/style.css @@ -0,0 +1,15 @@ +body { + font-family: Menlo, Consolas, monospace; + color: #444; +} +.item { + cursor: pointer; +} +.bold { + font-weight: bold; +} +ul { + padding-left: 1em; + line-height: 1.5em; + list-style-type: dot; +} diff --git a/src/v2/examples/vue-20-two-way-currency-filter/currency-validator.js b/src/v2/examples/vue-20-two-way-currency-filter/currency-validator.js new file mode 100644 index 0000000000..80ab295e34 --- /dev/null +++ b/src/v2/examples/vue-20-two-way-currency-filter/currency-validator.js @@ -0,0 +1,61 @@ +var currencyValidator = { + format: function(number) { + return (Math.trunc(number * 100) / 100).toFixed(2); + }, + parse: function(newString, oldNumber) { + var CleanParse = function(value) { + return { value: value }; + }; + var CurrencyWarning = function(warning, value) { + return { + warning: warning, + value: value, + attempt: newString + }; + }; + var NotAValidDollarAmountWarning = function(value) { + return new CurrencyWarning( + newString + " is not a valid dollar amount", + value + ); + }; + var AutomaticConversionWarning = function(value) { + return new CurrencyWarning( + newString + " was automatically converted to " + value, + value + ); + }; + + var newNumber = Number(newString); + var indexOfDot = newString.indexOf("."); + var indexOfE = newString.indexOf("e"); + + if (isNaN(newNumber)) { + if ( + indexOfDot === -1 && + indexOfE > 0 && + indexOfE === newString.length - 1 && + Number(newString.slice(0, indexOfE)) !== 0 + ) { + return new CleanParse(oldNumber); + } else { + return new NotAValidDollarAmountWarning(oldNumber); + } + } + + var newCurrencyString = currencyValidator.format(newNumber); + var newCurrencyNumber = Number(newCurrencyString); + + if (newCurrencyNumber === newNumber) { + if (indexOfE !== -1 && indexOfE === newString.length - 2) { + return new AutomaticConversionWarning(newNumber); + } else { + return new CleanParse(newNumber); + } + } else { + return new NotAValidDollarAmountWarning( + newNumber > newCurrencyNumber ? newCurrencyNumber : oldNumber + ); + } + } +}; diff --git a/src/v2/examples/vue-20-two-way-currency-filter/index.html b/src/v2/examples/vue-20-two-way-currency-filter/index.html new file mode 100644 index 0000000000..5ee238cee4 --- /dev/null +++ b/src/v2/examples/vue-20-two-way-currency-filter/index.html @@ -0,0 +1,90 @@ + + + + Two-way Currency Filter + + + + +
+ + + + + +

Total: ${{ total }}

+
+ + + + diff --git a/src/v2/examples/vue-20-two-way-currency-filter/package.json b/src/v2/examples/vue-20-two-way-currency-filter/package.json new file mode 100644 index 0000000000..ef67bd57a8 --- /dev/null +++ b/src/v2/examples/vue-20-two-way-currency-filter/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-two-way-currency-filter", + "version": "1.0.0", + "description": "Using lifecycle hooks and DOM events in place of the hidden behavior of two-way filters", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} diff --git a/src/v2/examples/vue-20-two-way-currency-filter/sandbox.config.json b/src/v2/examples/vue-20-two-way-currency-filter/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-two-way-currency-filter/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/examples/vue-20-wrapper-component/index.html b/src/v2/examples/vue-20-wrapper-component/index.html new file mode 100644 index 0000000000..fc2b21cc78 --- /dev/null +++ b/src/v2/examples/vue-20-wrapper-component/index.html @@ -0,0 +1,90 @@ + + + + Wrapper Component + + + + + + + + +
+ + + + + + + + + diff --git a/src/v2/examples/vue-20-wrapper-component/package.json b/src/v2/examples/vue-20-wrapper-component/package.json new file mode 100644 index 0000000000..92fe02c5c7 --- /dev/null +++ b/src/v2/examples/vue-20-wrapper-component/package.json @@ -0,0 +1,14 @@ +{ + "name": "vue-20-wrapper-component", + "version": "1.0.0", + "description": "In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.", + "main": "index.html", + "scripts": { + "start": "serve" + }, + "keywords": [], + "license": "MIT", + "devDependencies": { + "serve": "^11.2.0" + } +} \ No newline at end of file diff --git a/src/v2/examples/vue-20-wrapper-component/sandbox.config.json b/src/v2/examples/vue-20-wrapper-component/sandbox.config.json new file mode 100644 index 0000000000..5866ed7445 --- /dev/null +++ b/src/v2/examples/vue-20-wrapper-component/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "static" +} diff --git a/src/v2/guide/migration.md b/src/v2/guide/migration.md index cdfc996e61..78599d9ae6 100644 --- a/src/v2/guide/migration.md +++ b/src/v2/guide/migration.md @@ -1089,17 +1089,17 @@ Some users have enjoyed using two-way filters with `v-model` to create interesti As an example, we'll now walk the migration of a two-way currency filter: - + -It mostly works well, but the delayed state updates can cause strange behavior. For example, click on the `Result` tab and try entering `9.999` into one of those inputs. When the input loses focus, its value will update to `$10.00`. When looking at the calculated total however, you'll see that `9.999` is what's stored in our data. The version of reality that the user sees is out of sync! +It mostly works well, but the delayed state updates can cause strange behavior. For example, try entering `9.999` into one of those inputs. When the input loses focus, its value will update to `$10.00`. When looking at the calculated total however, you'll see that `9.999` is what's stored in our data. The version of reality that the user sees is out of sync! To start transitioning towards a more robust solution using Vue 2.0, let's first wrap this filter in a new `` component: - + This allows us add behavior that a filter alone couldn't encapsulate, such as selecting the content of an input on focus. Now the next step will be to extract the business logic from the filter. Below, we pull everything out into an external [`currencyValidator` object](https://gist.github.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e): - + This increased modularity not only makes it easier to migrate to Vue 2, but also allows currency parsing and formatting to be: @@ -1110,7 +1110,7 @@ Having this validator extracted out, we've also more comfortably built it up int We're still limited however, by filters and by Vue 1.0 in general, so let's complete the upgrade to Vue 2.0: - + You may notice that: diff --git a/src/v2/guide/render-function.md b/src/v2/guide/render-function.md index 1678966d76..f0a35eba8c 100644 --- a/src/v2/guide/render-function.md +++ b/src/v2/guide/render-function.md @@ -641,6 +641,4 @@ For this component, `children` will give you both paragraphs, `slots().default` You may be interested to know that Vue's templates actually compile to render functions. This is an implementation detail you usually don't need to know about, but if you'd like to see how specific template features are compiled, you may find it interesting. Below is a little demo using `Vue.compile` to live-compile a template string: -{% raw %} - -{% endraw %} + diff --git a/src/v2/guide/single-file-components.md b/src/v2/guide/single-file-components.md index fb4c5a4c5d..e576979679 100644 --- a/src/v2/guide/single-file-components.md +++ b/src/v2/guide/single-file-components.md @@ -21,7 +21,7 @@ All of these are solved by **single-file components** with a `.vue` extension, m Here's an example of a file we'll call `Hello.vue`: -Single-file component example (click for code as text) +Single-file component example (click for code as text) Now we get: