GitHub
/
Vue.js
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix root v-else not rendering in prod and switched examples to minified vue for better prod coverage (#3943) 

* fix root v-else not rendering in production and switched examples to minified vue for better prod coverage

* add dev build comment to examples

* convert tabs to spaces in todomvc example for consistency
dev
Chris Fritz 8 years ago
committed by Evan You
parent
95bf0c000e
commit
4f5a47d750
14 changed files with 99 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      examples/commits/index.html
  2. 3
      examples/elastic-header/index.html
  3. 3
      examples/firebase/index.html
  4. 6
      examples/grid/index.html
  5. 3
      examples/markdown/index.html
  6. 3
      examples/modal/index.html
  7. 3
      examples/move-animations/index.html
  8. 3
      examples/select2/index.html
  9. 3
      examples/svg/index.html
  10. 129
      examples/todomvc/index.html
  11. 3
      examples/tree/index.html
  12. 2
      package.json
  13. 8
      src/compiler/parser/index.js
  14. 6
      test/e2e/specs/grid.js

3
examples/commits/index.html
View File

@ -18,7 +18,8 @@
font-weight: bold; font-weight: bold;
} }
</style> </style>
<script src="../../dist/vue.js"></script> <!-- Delete ".min" for console warnings in development -->
<script src="../../dist/vue.min.js"></script>
</head> </head>
<body> <body>
<div id="demo"> <div id="demo">

3
examples/elastic-header/index.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title> <title></title>
<script src="../../dist/vue.js"></script> <!-- Delete ".min" for console warnings in development -->
<script src="../../dist/vue.min.js"></script>
<script src="http://dynamicsjs.com/lib/dynamics.js"></script> <script src="http://dynamicsjs.com/lib/dynamics.js"></script>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<!-- template for the component --> <!-- template for the component -->

3
examples/firebase/index.html
View File

@ -5,7 +5,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<!-- Vue --> <!-- Vue -->
<script src="../../dist/vue.js"></script> <!-- Delete ".min" for console warnings in development -->
<script src="../../dist/vue.min.js"></script>
<!-- Firebase --> <!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script> <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
<!-- VueFire --> <!-- VueFire -->

6
examples/grid/index.html
View File

@ -4,13 +4,14 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Vue.js grid component example</title> <title>Vue.js grid component example</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="../../dist/vue.js"></script> <!-- Delete ".min" for console warnings in development -->
<script src="../../dist/vue.min.js"></script>
</head> </head>
<body> <body>
<!-- component template --> <!-- component template -->
<script type="text/x-template" id="grid-template"> <script type="text/x-template" id="grid-template">
<table> <table v-if="filteredData.length">
<thead> <thead>
<tr> <tr>
<th v-for="key in columns" <th v-for="key in columns"
@ -30,6 +31,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<p v-else>No matches found.</p>
</script> </script>
<!-- demo root element --> <!-- demo root element -->

3
examples/markdown/index.html
View File

@ -6,7 +6,8 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/marked@0.3.6"></script> <script src="https://unpkg.com/marked@0.3.6"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script> <script src="https://unpkg.com/lodash@4.16.0"></script>
<script src="../../dist/vue.js"></script> <!-- Delete ".min" for console warnings in development -->
<script src="../../dist/vue.min.js"></script>
</head> </head>
<body> <body>

3
examples/modal/index.html
View File

@ -3,7 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Vue.js Modal Example</title> <title>Vue.js Modal Example</title>
<script src="../../dist/vue.js"></script> <!-- Delete ".min" for console warnings in development -->
<script src="../../dist/vue.min.js"></script>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>

3
examples/move-animations/index.html
View File

@ -29,7 +29,8 @@
} }
</style> </style>
<script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script> <script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
<script src="../../dist/vue.js"></script> <!-- Delete ".min" for console warnings in development -->
<script src="../../dist/vue.min.js"></script>
</head> </head>
<body> <body>
<div id="el"> <div id="el">

3
examples/select2/index.html
View File

@ -3,7 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Vue.js custom directive integration example (select2)</title> <title>Vue.js custom directive integration example (select2)</title>
<script src="../../dist/vue.js"></script> <!-- Delete ".min" for console warnings in development -->
<script src="../../dist/vue.min.js"></script>
<script src="https://unpkg.com/jquery"></script> <script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/select2@4.0.3"></script> <script src="https://unpkg.com/select2@4.0.3"></script>
<link href="https://unpkg.com/select2@4.0.3/dist/css/select2.min.css" rel="stylesheet"> <link href="https://unpkg.com/select2@4.0.3/dist/css/select2.min.css" rel="stylesheet">

3
examples/svg/index.html
View File

@ -4,7 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Vue.js SVG example</title> <title>Vue.js SVG example</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="../../dist/vue.js"></script> <!-- Delete ".min" for console warnings in development -->
<script src="../../dist/vue.min.js"></script>
</head> </head>
<body> <body>

129
examples/todomvc/index.html
View File

@ -1,68 +1,69 @@
<!doctype html> <!doctype html>
<html data-framework="vue"> <html data-framework="vue">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Vue.js • TodoMVC</title> <title>Vue.js • TodoMVC</title>
<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css"> <link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css">
<script src="https:unpkg.com/director/build/director.js"></script> <script src="https:unpkg.com/director/build/director.js"></script>
<style>[v-cloak] { display: none; }</style> <style>[v-cloak] { display: none; }</style>
</head> </head>
<body> <body>
<section class="todoapp"> <section class="todoapp">
<header class="header"> <header class="header">
<h1>todos</h1> <h1>todos</h1>
<input class="new-todo" <input class="new-todo"
autofocus autocomplete="off" autofocus autocomplete="off"
placeholder="What needs to be done?" placeholder="What needs to be done?"
v-model="newTodo" v-model="newTodo"
@keyup.enter="addTodo"> @keyup.enter="addTodo">
</header> </header>
<section class="main" v-show="todos.length" v-cloak> <section class="main" v-show="todos.length" v-cloak>
<input class="toggle-all" type="checkbox" v-model="allDone"> <input class="toggle-all" type="checkbox" v-model="allDone">
<ul class="todo-list"> <ul class="todo-list">
<li v-for="todo in filteredTodos" <li v-for="todo in filteredTodos"
class="todo" class="todo"
:key="todo.id" :key="todo.id"
:class="{ completed: todo.completed, editing: todo == editedTodo }"> :class="{ completed: todo.completed, editing: todo == editedTodo }">
<div class="view"> <div class="view">
<input class="toggle" type="checkbox" v-model="todo.completed"> <input class="toggle" type="checkbox" v-model="todo.completed">
<label @dblclick="editTodo(todo)">{{ todo.title }}</label> <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
<button class="destroy" @click="removeTodo(todo)"></button> <button class="destroy" @click="removeTodo(todo)"></button>
</div> </div>
<input class="edit" type="text" <input class="edit" type="text"
v-model="todo.title" v-model="todo.title"
v-todo-focus="todo == editedTodo" v-todo-focus="todo == editedTodo"
@blur="doneEdit(todo)" @blur="doneEdit(todo)"
@keyup.enter="doneEdit(todo)" @keyup.enter="doneEdit(todo)"
@keyup.esc="cancelEdit(todo)"> @keyup.esc="cancelEdit(todo)">
</li> </li>
</ul> </ul>
</section> </section>
<footer class="footer" v-show="todos.length" v-cloak> <footer class="footer" v-show="todos.length" v-cloak>
<span class="todo-count"> <span class="todo-count">
<strong>{{ remaining }}</strong> {{ remaining | pluralize }} left <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
</span> </span>
<ul class="filters"> <ul class="filters">
<li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li> <li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li>
<li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li> <li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li>
<li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li> <li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li>
</ul> </ul>
<button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining"> <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
Clear completed Clear completed
</button> </button>
</footer> </footer>
</section> </section>
<footer class="info"> <footer class="info">
<p>Double-click to edit a todo</p> <p>Double-click to edit a todo</p>
<p>Written by <a href="http://evanyou.me">Evan You</a></p> <p>Written by <a href="http://evanyou.me">Evan You</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer> </footer>
<script> <script>
// for testing // for testing
if (navigator.userAgent.indexOf('PhantomJS') > -1) localStorage.clear() if (navigator.userAgent.indexOf('PhantomJS') > -1) localStorage.clear()
</script> </script>
<script src="../../dist/vue.js"></script> <!-- Delete ".min" for console warnings in development -->
<script src="app.js"></script> <script src="../../dist/vue.min.js"></script>
</body> <script src="app.js"></script>
</body>
</html> </html>

3
examples/tree/index.html
View File

@ -20,7 +20,8 @@
list-style-type: dot; list-style-type: dot;
} }
</style> </style>
<script src="../../dist/vue.js"></script> <!-- Delete ".min" for console warnings in development -->
<script src="../../dist/vue.min.js"></script>
</head> </head>
<body> <body>

2
package.json
View File

@ -26,7 +26,7 @@
"test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr", "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr",
"test:unit": "karma start build/karma.unit.config.js", "test:unit": "karma start build/karma.unit.config.js",
"test:cover": "karma start build/karma.cover.config.js", "test:cover": "karma start build/karma.cover.config.js",
"test:e2e": "npm run build -- vue.js && node test/e2e/runner.js", "test:e2e": "npm run build -- vue.min.js && node test/e2e/runner.js",
"test:ssr": "npm run build:ssr && VUE_ENV=server jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.json", "test:ssr": "npm run build:ssr && VUE_ENV=server jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.json",
"test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2", "test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2",
"test:types": "tsc -p ./types/test/tsconfig.json", "test:types": "tsc -p ./types/test/tsconfig.json",

8
src/compiler/parser/index.js
View File

@ -130,14 +130,16 @@ export function parse (
} }
function checkRootConstraints (el) { function checkRootConstraints (el) {
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production' && !warned) {
if (el.tag === 'slot' || el.tag === 'template') { if (el.tag === 'slot' || el.tag === 'template') {
warned = true
warn( warn(
`Cannot use <${el.tag}> as component root element because it may ` + `Cannot use <${el.tag}> as component root element because it may ` +
'contain multiple nodes:\n' + template 'contain multiple nodes:\n' + template
) )
} }
if (el.attrsMap.hasOwnProperty('v-for')) { if (el.attrsMap.hasOwnProperty('v-for')) {
warned = true
warn( warn(
'Cannot use v-for on stateful component root element because ' + 'Cannot use v-for on stateful component root element because ' +
'it renders multiple elements:\n' + template 'it renders multiple elements:\n' + template
@ -150,12 +152,12 @@ export function parse (
if (!root) { if (!root) {
root = element root = element
checkRootConstraints(root) checkRootConstraints(root)
} else if (process.env.NODE_ENV !== 'production' && !stack.length && !warned) { } else if (!stack.length) {
// allow 2 root elements with v-if and v-else // allow 2 root elements with v-if and v-else
if (root.if && element.else) { if (root.if && element.else) {
checkRootConstraints(element) checkRootConstraints(element)
root.elseBlock = element root.elseBlock = element
} else { } else if (process.env.NODE_ENV !== 'production' && !warned) {
warned = true warned = true
warn( warn(
`Component template should contain exactly one root element:\n\n${template}` `Component template should contain exactly one root element:\n\n${template}`

6
test/e2e/specs/grid.js
View File

@ -82,6 +82,12 @@ module.exports = {
{ name: 'Chuck Norris', power: Infinity } { name: 'Chuck Norris', power: Infinity }
]) ])
browser
.clearValue('input[name="query"]')
.assert.count('p', 0)
.setValue('input[name="query"]', 'stringthatdoesnotexistanywhere')
.assert.count('p', 1)
browser.end() browser.end()
function assertTable (data) { function assertTable (data) {

Write Preview
Loading…
Cancel
Save