I work on French translation of Vue.
All was clear from guide/syntax.md but with event.md I'm not really sure to have well understand.
In the document syntax.md at line 74, we can read
<!-- this is a statement, not an expression: -->
to describe this {{ var a = 1 }}
For Linguee, Statement means Declaration : http://www.linguee.fr/francais-anglais/search?source=anglais&query=statement
For Google Translate, Statement means Declaration : https://translate.google.fr/?um=1&ie=UTF-8&hl=fr&client=tw-ob#en/fr/statement
So I understant this :
Instruction is Instruction
Statement is Declaration
Expression is Expression
So, I can describe this :
var num = 20 + true,
bool;
str = "Hello World";
delete str;
if (num === 21) {
bool = true;
} else {
bool = false;
num = 0;
}
like this :
┌──────────────────────────────────────────────────┬───────────────────────────────┬───────────────────┬───────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Instruction │ Instruction │ Instruction │ Instruction │
├──────────────────────────────────────────────────┼──────────────────────────┬────┼──────────────┬────┼───────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ │ │ │ │ │ Control Flow │
│ │ │ │ │ ├────────────────────────────────────────────────────────┬──────────────────────────────────────────────────────────┤
│ (Declaration) statement │ │ │ │ │ Block statement │ Block statement │
├─────┬───────────────────────────────────────┬────┤ │ │ │ ├──────┬────────────────┬─────┬──────────────────────┬───┼────────┬───────────────────────┬─────────────────────┬───┤
│ │ Expression │ │ Expression │ │ Expression │ │ │ Expression │ │ Instruction │ │ │ Instruction │ Instruction │ │
│ ├─────┬────┬────┬────┬──────┬────┬──────┤ ├─────┬────┬───────────────┤ ├────────┬─────┤ │ ├─────┬─────┬────┤ ├─────────────────┬────┤ │ ├──────────────────┬────┼────────────────┬────┤ │
│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ Expression │ │ │ │ Expression │ │ Expression │ │ │
│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ├─────┬────┬──────┤ │ │ ├──────┬────┬──────┤ ├─────┬────┬─────┤ │ │
│ │ var │ op │ od │ op │ od │ op │ var │ sc │ prp │ op │ operand │ sc │ op │ var │ sc │ │ od │ op │ od │ │ var │ op │ od │ sc │ │ │ var │ op │ od │ sc │ var │ op │ od │ sc │ │
│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │
│ var num = 20 + true , bool ; str = "Hello World" ; delete str ; if ( num === 21 ) { bool = true ; } else { bool = true ; num = 0 ; } │
└─────┴─────┴────┴────┴────┴──────┴────┴──────┴────┴─────┴────┴───────────────┴────┴────────┴─────┴────┴──────┴─────┴─────┴────┴─────┴─────────────────┴────┴───┴────────┴──────────────────┴────┴────────────────┴────┴───┘
and that means
These lines are one « Expressions » and work
<!-- data: { num: NaN, bool: false } -->
{{ num = 20 + true, bool }} <!-- 21 -- >
<div v-if="num = 20 + true, bool"></div> <!-- 21 evaluated to true so this is injected in DOM -- >
<!-- data: { str: "" } -->
{{ str = "Hello World" }} <!-- "Hello World" -- >
<div v-if="str = 'Hello World'"></div> <!-- "Hello World" evaluated to true so this is injected in DOM -- >
<!-- data: { str: "" } -->
{{ delete str }} <!-- true -- >
<div v-if="delete str"></div> <!-- true evaluated to true so this is injected in DOM -- >
and same for num === 21, bool = true and num = 0
That means also
_These lines are not only « expressions » but « declaration » and « controle flow » and don't work_
<!-- data: { num: NaN, bool: false } -->
{{ var num = 20 + true, bool }} <!-- avoid using JavaScript keyword as property name: "var" -- >
<div v-if="var num = 20 + true, bool"></div> <!-- avoid using JavaScript keyword as property name: "var" -- >
```html
{{ if (num === 21) { bool = true; } else { bool = true; num = 0 ; } }}