3 ms·
1) @ is just a shorthand for v-on:*, like onclick,onmouseover,on submit, etc. (ie; v-on:submit is alias ed by @submit) @click="say_something('hello')" new Vu
by jaequery 9y ago
1) @ is just a shorthand for v-on:*, like onclick,onmouseover,on submit, etc. (ie; v-on:submit is alias ed by @submit)
@click="say_something('hello')"
new Vue({
methods: {
say_something (str) { ... }
}
})
2) : is just a shorthand for v-bind (ie; v-bind:disabled="is_disabled()" is aliased by :disabled="is_disabled()"). and this basically allows you to run pure javascript code inside of it.
3) the only other syntax to know is, v-for and v-if, but thats pretty self explanatory i believe.
<h3 v-if="user.name">{{name}}</h3>
<h3 v-if="!user.name">What is your name?</h3>
<h3 v-if="user.role == 'admin" && user.name == 'james'>hello super user {{name}}</h3>
i like this approach more than JSX where you have several if else clauses mixed into your HTML. it's kind of like pattern matching if you like that sort of thing.
or you can simply do <h3>{{some_message()}}</h3> and just handle the logic inside the some_message() method.
- hesarenu 9y agoIt looks way more complicated then jsx. Why invent v-if etc when JavaScript has those built in.
- jaequery 9y ago1) separation of html and js 2) shorter to write and simpler to read
- brlewis 9y ago1) v-if is not html. In html if you see <h3 ...> you immediately think, "there's a level-3 header element here". The thought "there's a level-3 header element here if..." is something new you have to learn for Vue. 2) Shorter is not always easier. For example, using quotes to delimit logical expressions makes it easy to make errors. See the misplaced quote here? <h3 v-if="user.role == 'admin" && user.name == 'james'>hello super user {{name}}</h3>
- dmitriid 9y ago> separation of html and js That's the thing. You do not really separate js and HTML. There's a weird extension to HTML. There-are JS-like expressions, JS expressions and bindings to outside JS code It's also neither shoryer to write nor easier to read.