[TOC] #VUE Basics

Based on label

v-cloak

Example code:


      
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="Lib/vue - 2.4.0. Js." "></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					msg:123,}});</script>
	</body>
</html>

Copy the code

Cloak **{{MSG}} will display the default value and then the real data will be displayed as soon as possible


      
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="Lib/vue - 2.4.0. Js." "></script>
	</head>
	<body>
		<div id="app">
			<p v-cloak>{{msg}}</p>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					msg:12344234,}});</script>
	</body>
</html>
Copy the code

In CSS, add:

[v-cloak] {
    display: none;
}
Copy the code

If it does not work, consider two points:

  1. The display property of the V-cloak is overwritten by a higher layer, so raise the level:
[v-cloak] {
    display: none ! important;
}
Copy the code
  1. Styles are placed in the CSS file imported by @import, can be placed in the CSS file imported by link, or inline styles

v-text

Similar to v-cloak, but comes with a blink solution

The difference between:

  1. V-cloak needs to solve the flicker problem itself, v-text does not
  2. V-cloak only replaces the contents of {{key}}, while V-text overwrites the contents of the element
<template>
  <div id="app">
		<p v-cloak>{{msg}}+++++++++</p>
		<p v-text="msg">+++++++++</p>
	</div>
</template>

<script>
export default{
	
	data(){
		return {
			msg:213}; }}</script>
Copy the code

Results page:

V-html

This is kind of like Android, and it overrides the properties that are in there as well

TextView. SetText (Html. FromHtml (MSG));Copy the code

Example code:

<template>
  <div id="app">	
		<p v-cloak>{{htmlMsg}}</p>
		<p v-text="htmlMsg"></p>
		<p v-html="htmlMsg"></p>
	</div>
</template>

<script>
export default{
	data(){
		return {
			msg:213.htmlMsg:
 Ling Yu is so handsome ~! Painted painted (omega) < / h1 >"
}; }}</script>
Copy the code

Running results:

V-bind

Binding properties, which can be abbreviated as:

		<input type="button" value="Button" :title="htmlMsg"/>
		<input type="button" value="Button" v-bind:title="htmlMsg"/>
Copy the code

Note that v-bind can write JS expressions

v-on

Event binding mechanism

<template>
  <div id="app">
		
		<p v-cloak>{{htmlMsg}}</p>
		<p v-text="htmlMsg"></p>
		<p v-html="htmlMsg"></p>
		<input type="button" value="Button" :title="htmlMsg"/>
		<input type="button" value="Button" v-bind:title="htmlMsg" v-on:click="showAlert(htmlMsg)"/>
		
	</div>
</template>

<script>
export default{
	
	data(){
		return {
			msg:213.htmlMsg:
 Ling Yu is so handsome ~! Painted painted (omega) < / h1 >"

		};
	},
	methods: {showAlert:function(msg){
			alert(msg)
		}
	}
	 
}
</script>
Copy the code

V-model

Label for two-way binding of data

Summary exercise: horse racing

<template>
	<div>

		<p v-text="msg"></p>


		<input type="button" value="Start" v-on:click="startRun()" />
		<input type="button" value="The end" v-on:click="stopRun()" />

	</div>

</template>
<script>
	export default {
		data() {
			return {
				msg: "Ling Yu is so handsome! Painted painted (omega)".myInterval: null}; },methods: {
			startRun: function () {
				if (this.myInterval ! =null) return;
				this.myInterval = setInterval((a)= > {
					var startStr = this.msg.substring(0.1);
					var endStr = this.msg.substring(1);
					var result = endStr + startStr;
					this.msg = result;
				}, 300);
			},
			stopRun: function () {
				clearInterval(this.myInterval);
				this.myInterval=null; }}},</script>
Copy the code

Event modifier

  • .stop prevents bubbling
  • . Prevent Prevents default events
  • .capture Uses event capture mode to add event listeners
  • .self fires the callback only if the event is fired on that element (for example, not a child element)
  • The. Once event is triggered only once

Several methods of class style binding

Conventional methods

 <h1 class="red big">{{msg}}</h1>
Copy the code

V – the bind method

  <h1 v-bind:class="['red','big']">{{msg}}</h1>
Copy the code

Using ternary expressions

<h1 v-bind:class="['red',isBig?'big':'']">{{msg}}</h1>
Copy the code

Use ternary expressions in arrays to improve code readability

 <h1 v-bind:class="['red',{'big':isBig}]">{{msg}}</h1>
Copy the code

Use classes directly

<h1 v-bind:class="{red:true,big:isBig}">{{msg}}</h1>
Copy the code

The complete code is:

<template>
  <div>
    <! --// Normal method -->
    <h1 class="red big">{{msg}}</h1>

    <! - v - the bind method -- -- >
    <h1 v-bind:class="['red','big']">{{msg}}</h1>

    <! -- Use a ternary expression -->
    <h1 v-bind:class="['red',isBig?'big':'']">{{msg}}</h1>

    <! Use ternary expressions in arrays to improve code readability -->
    <h1 v-bind:class="['red',{'big':isBig}]">{{msg}}</h1>

    <! -- Use class directly -->
    <h1 v-bind:class="{red:true,big:isBig}">{{msg}}</h1>
  </div>

</template>

<script>
    export default {
       data(){
         return {
           msg:'Ling Yu is a handsome bitch (★ ω ★)'.isBig:true}; }}</script>

<style scoped>
  .red{
    color: red;
  }
  .big{
    font-size: 24px;
  }
</style>

Copy the code

Several ways to bind the style property

Normal operation

 <! -- General operation -->
    <p :style="{color:'red'}">{{msg}}</p>
Copy the code

Point to a class

 <! -- Point to a class -->
    <p :style="redObject">{{msg}}</p>
Copy the code

Point to an array

 <! Pointer to an array -->
    <p :style="[redObject,bigObject]">{{msg}}</p>
Copy the code

The complete code is:

<template>


  <div>
    <! -- General operation -->
    <p :style="{color:'red'}">{{msg}}</p>
    <! -- Point to a class -->
    <p :style="redObject">{{msg}}</p>
    <! Pointer to an array -->
    <p :style="[redObject,bigObject]">{{msg}}</p>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'Ling Yu is a handsome bitch (★ ω ★)'.redObject: {color:'red'},
        bigObject: {fontSize:'40px'}}; }}</script>

<style scoped>

</style>

Copy the code

Several ways to use V-for

Note: in the new version,v-for requires a key. 1. Key can only be a string or number attribute. 2

Just iterating through item

<p v-for="item in list">{{item}}</p>
Copy the code

Want item and index traversal

 <p v-for="(item , i ) in list">
    {{i+"===="+item}}
    </p>
Copy the code

#### Traversal objects

<p v-for="(key,val,i) in Handsome">
      {{i}} =={{val}} = {{key}}
    </p>
Copy the code

A digital iteration

<p v-for="i in 10">{{i}}</p>
Copy the code

The complete code is

<template>


  <div>
    <! -- if item is iterated -->
    <! --<p v-for="item in list">{{item}}</p>-->

    <! Select * from item and index;
    <! --<p v-for="(item , i ) in list">-->
    <! --{{i+"===="+item}}-->
    <! --</p>-->
    <! -- Traverse the object -->
    <! --<p v-for="(key,val,i) in Handsome">-->
      <! --{{i}} =={{val}} = {{key}}-->
    <! --</p>-->
    <! -- Digital iteration -->
    <! --<p v-for="i in 10">{{i}}</p>-->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [1.32.433.234.32.543.43655.234.4325].Handsome: {
          name: 'Ly'.age: "18".sex: "guy"}}; }}</script>

<style scoped>

</style>
Copy the code

V – if and v – show

The same

  1. Can play the role of a hidden control according to a flag

The difference between

  1. V-if re-deletes or creates elements each time
  2. V-show does not delete dom creation, but toggles the disable: None style

conclusion

  1. V-if has high switching performance consumption
  2. V-show has a high initial render cost
  3. If frequent switching is involved, v-show is recommended instead of V-if; If the element may never be displayed for the user to see, v-if is recommended. (Because if an element may never be displayed, use v-show, then it is actually added to the DOM, whereas v-if is only displayed)