Vue杂记

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.