1. temeplate
<div id="app">{{message}}</div> <script src="vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'thanks' }, computed: { }, methods: { }, filters: { } }) </script>
2. code dictionary
1. v-for
This is a 'cyclic event' code, this example v- for cyclic through elements form movies, need to create a new code snippet "item inmovies", we creat a 'className' = item to 'through the array[movies]', and let it in mustache like this --- {{item}} .
Notice, need ul and li
<div id="app"> <ul> <li v-for="item in movies">{{item}}</li> </ul> </div> <script src="vue.js"></script> <script> const app = new Vue({ el: '#app', data: { movies: ['price', 'kingdom', 'prime minister'] } }) </script>
2. v-on (@)
Syntactic sugur: @
v-on can use to binding element, this example we use v-on:click to bind add from methods, this is a click event.
<div id="app"> <h3>{{counter}}</h3> <button v-on:click="add">+</button> </div> <script src="vue.js"></script> <script> const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { add: function () { console.log('add one') this.counter++ } } }) </script>Modifier:
1.1 .stop
To prevent bubble.
<div> <button v-on:click.stop="add">+</button> </div>1.2 .prevent
Prevent submit
<input type="submit" value="提交" @click.prevent="submitClick"> <script> methods: { submitClick() { console.log('hh') } } </script>1.3 .enter keyCode
<input type="submit" value="提交" @click.enter="submitClick"> <script> methods: { submitClick() { console.log('hh') } } </script>1.4 .native
1.5 .once
Can only click once.
<button v-on:click.once="add">+</button>
3. v-once
Beacuse Vue is 'response layout', so when we don't need elements be change, that is just only render the code once, we can use v-once to restrain.
<div id="app" v-once>{{message}}</div>
4. v-html
v-html can analysis element, then display it in HTML.
<div id="app"> <div v-html="url"></div> </div>
5. v-text
Generally don't have to.
display element as string, will overwrite string from <div>...</div> .
<div id="app"> <div v-tect="message"></div> </div>
6. v-pre
Direct display <div>...</div>.
<div id="app"> <div v-pre>{{message}}</div> </div>Output: {{message}}.
7. v-cloak
To avoid slow loading resulting in code leakage, we can use v-cloak and CSS Style to hide code generated by loading slowly.
Principle: before loading, beacuse v-bloak in div and its style is display:none, so it doesn't display until it's loaded.
<style> [v-cloak] { display: none; } </style> <div id="app"> <div v-cloak>{{message}}</div> </div>
8. v-bind (:)
Syntactic sugar: :
Dynamic binding.
1.bind URL (href) and Img (src)
<div id="app"> <a v-bind:href="aHref"></a> <a v-bind:src="imgURL"></a> <button v-on:click="add">+</button> </div> <script src="vue.js"></script> <script> const app = new Vue({ el: '#app', data: { counter: 0, aHref: 'http://www.google.com', imgURL: 'bg.png' } }) </script>2.1 bind className (key-value):
<div v-bind:class= "{active: isAcitve, line: isLine}">{{message}}</div> <script> const app = new Vue({ el: '#app', data: { message: 'hey', isAcitve: true, isLine: flase } }) </script>Because isActive: true, isLInes: flase, that is active = true, so eventually div wii be given classNane of 'active'.
2.2 bind className (array):
Generally don't have to
<div v-bind:class= "['active', 'title', 'line']">{{message}}</div> Also can use variate in array, the diffenence between them is the use of ' '
<div v-bind:class= "[active, title, line]">{{message}}</div> <script> const app = new Vue({ el: '#app', data: { message: 'hey', active: 'aaa', title: 'bbb', line: 'ccc' } }) </script>2.2 bind methods
Notice, methods is going to add ( )
<div :class="getClass()">{{message}}</div>2.3 Dynamic binding style
<div :style="{fontSize: finalSize + 'px'}">{{message}}</div> data: { message: 'thanks', finalSize: 100 },
9. v-if v-else v-else-if
Similar like if else else if in JS.
Input reuse solution: can use different key=" ".
10. v-show
When the condition is flase, v-if will be destroyed, but v-show will add inline style "display:none".
v-show Be usually use to show when there is a high frequency of hide switching.