Vue .js Learning Notes

1

Notes on learning about Vue .js (*updated as needed)

*CDN description omitted

1.template

(1)v-text

Embedding a string in a template

test.thml
<div id="app">
 <p v-text="message"></p>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
   message="おはよう!"
  }
})

The above is also true for the following

test.thml
<div id="app">
 <p>{{message}}</p>
</div>

<script src="js/test.js"></script>

(1) Embed an expression in Supplement (1) {{}}

test.html
<div id="app">
<p>

{{message.split("").reverse().join("")}}
</p>

<script src="js/test.js"></script>
</div>
test.js
var app = new Vue({
el:"#app",
data:{
    message:"Hello Vue"
}
})

(1) Supplementary (2) Calculated properties

test.html
<div id="app">
<p>
{{reverseMessage}}
</p>

<script src="js/test.js"></script>
</div>
test.js
var app = new Vue({
el:"#app",
competed:{
 reverseMessage:function(){
  return this.message.split("").reverse().join("")
}
}
})

(2)v-bind

Embedding attribute values

test.thml
<div id="app">
 <p v-bind:href="url">クリック</p>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
   url="https://google.com"
  }
})

(2) Supplementary (1) Another example of v-bind

test.thml
<div id="app">
 <label for="name">名前</label>
 <input type="text" v-bind:href="abc">
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
    abc:"https://google.com"
  }
})

(2) Supplementary (3) Embed attributes together

When embedding multiple attributes, v-bind="●●●" instead of v-bind: ●●●

test.thml
<div id="app">
 <label for="name">名前</label>
 <input type="text" v-bind="abc">
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
    abc:{
    size:20,
    maxlength:20
    }
  }
})

(2) Supplementary (3) Another example of v-bind

Bind to the value attribute of input When writing text, the {{}} masache syntax cannot be used (the masache syntax is a notation for text content, not for attributes)

<div id="app">
<input type="text" v-bind:value="message">
</div>

<script 
src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>

<script>
var app = new Vue({
el:"#app",
data:{
    message:"Hello Vue.js"
}
})
</script>

(3)v-bind:class①

Setting the Style Class The following example is initially listed in red, but when you press the button, it becomes a surplus The v-bind:class directive accepts an object of the form "class name: true or false" Also, when the class name is represented by a kebab case (high-phong), it is necessary to enclose it in "" (specification when dealing with javascript objects), hereinafter 'bg-blue' Instead of "class name: true", you can also do something like isActivate as follows

test.thml
<div id="app">
 <div class="small" v-bind:class="{color:isActivate,'bg-blue':true}">
  おはよう
<button v-on:click="onclick">クリック</button>
 </div>
</div>

<script src="js/test.js"></script>
<link rel="stylesheet" href="style.css">
test.js
let app = new Vue({
 el:"app",
 data:{
  isActivate:true
  },
methods:{
  onclick:function(){
  this.isActivate = false;
  }
 }
})
style.css
.color{
 color: #f00;
}
.bg-blue{
 background-color:blue;
}

(3)v-bind:class②

In the following cases, cohabiting with a normal class In a normal class, in a kebab case it is not necessary to enclose it in ""

<div id="app">
<p>
Hello <span class="bg-gray text-blue" v-bind:class="{large:isLarge,'text-danger':hasError}">Vue.js!</span>
</p>
</div>
new Vue({
  el: '#app',
  data: {
    isLarge:false,
        hasError:false
  }

})
.large {
  font-size: 36px;
}

.text-danger {
  color: red;
}

.bg-gray {
  background-color: gray;
}

.text-blue {
  color: blue;
}

(3)v-bind:class③

Representing a class with array syntax

<div id="app">
<p>
Hello <span v-bind:class="[largeClass,dangerClass]">vue.js</span>
</p>
</div>
new Vue({
  el: '#app',
  data: {
   largeClass:"large",
     dangerClass:"text-danger"
  }

})
.large {
  font-size: 36px;
}

.text-danger {
  color: red;
}

.bg-gray {
  background-color: gray;
}

.text-blue {
  color: blue;
}

(3)v-bind:class④

Define an object in data and pass it to v-bind:class

<div id="app">
<p>
Hello <span v-bind:class="classObject">vue.js</span>
</p>
</div>
new Vue({
  el: '#app',
  data: {
   classObject:{
        large:true,
        "text-danger":true
        }
  }

})
.large {
  font-size: 36px;
}

.text-danger {
  color: red;
}

.bg-gray {
  background-color: gray;
}

.text-blue {
  color: blue;
}

(3)v-bind:class⑤

Using the ternary operator to create a branch The following, isLarge ? largeClass: ' is a shortcut in the javascript if syntax that says 'do nothing' if isLarge executes largeClass if true and if false.

<div id="app">
<p>
Hello <span v-bind:class="isLarge ? largeClass : ' '  ">vue.js</span>
</p>
</div>
new Vue({
  el: '#app',
  data: {
    largeClass: {
      large: true,
      "bg-gray": true
    },
    dangerClass: {
      "text-danger": true,
    },
    isLarge: true
  }

})
.large {
  font-size: 36px;
}

.text-danger {
  color: red;
}

.bg-gray {
  background-color: gray;
}

.text-blue {
  color: blue;
}

(4)v-bind:src

test.thml
<div id="app">
   <img v-bind:src="path">
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
  path:"./images/takamiya.png" 
 }
})

(5) Calculated properties

Using computed, definitions are done in methods, references are made by properties Used to change properties later. It needs to be stated in the function (I will add return, but in the data of the component it is necessary to return an object (in the form of return{}), but in the calculation property it is only necessary to simply return the value as return (not in the form of return{}))

test.thml
<div id="app">
  <div>{{message}}</div>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
   ohayou:"おはよう"
 },
 computed:{
   message:function(){
     return this.ohayou + "こんにちわ";
   }
  }
})

(5) Supplementary (1) Rewrite with method

test.thml
<div id="app">
  <div>{{message()}}</div>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
   ohayou:"おはよう"
 },
 methods:{
   message:function(){
     return this.ohayou + "こんにちわ";
   }
  }
})

(5) Supplementary (2) Do not define in data

When using the computed property, the variable is not defined in data: (error if defined) Note that [event] is a dynamic argument as v-on:[]

test.thml
<div id="app">
  <button v-on:[event]="up">クリック</button>
  <p>{{number}}クリックされています</p>
  <p>{{kaitou}}</p>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
        number:0,
        event:"click"
    },
methods:{
        up:function(){
        this.number+=1;
        }
    },
computed:{
        kaitou:function(){
        if(this.number > 2){
                return "2より上"
        }else{
                return ""
            }
        }
    }
})

Computed properties have no arguments and are cached (stored) Since the calculated property is cached, processing does not occur each time it is called, but the method is processed each time it is called What can be done with a compute property can be done in a method, but it is used to clarify the intent, such as a simple calculation without arguments. Also, if you put the method in {{}}, it will fire every time you redraw the screen.

(5) Supplementary (3) Caution on method replacement

If you click v-on"up", {{kaitou2()}} will also fire in addition to {{kaitou}} Both the "method" and "prop" logs of consolo .log are displayed (originally intended to fire only "prop") Conversely, if you click v-on "upup", only {{kaitou2}} will fire. Methods in {{}} fire every time they are redrawn

test.thml
<div id="app">
  <button v-on:[event]="up">クリック</button>
        <p>{{number}}クリックされています</p>
        <p>{{kaitou}}</p>

  <button v-on:[event]="upup">クリック</button>
        <p>{{number2}}クリックされています</p>
        <p>{{kaitou2()}}</p>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
        number:0,
        number2:0,
        event:"click"
    },
    methods:{
        up:function(){
        this.number+=1;
        },
        upup:function(){
            this.number2+=1;
        },
        kaitou2:function () {
            if(this.number2 > 3){
                return "3以上だよ"
            }
            console.log("method")
        }

    },
    computed:{
        kaitou:function () {
            if(this.number > 3){
                return "3以上だよ"
            }
            console.log("prop")
        }
    }
})

If you use dynamic properties, use computed properties instead of methods By the way, the calculated property needs return

(5) Supplementary (4) Calculated properties are also getter and setter

<div id="app">
<p>
最初の金額<input type="text" v-model="basePrice">
</p>
<p>
税込み金額<input type="text" v-model="taxIncludedprice">
</p>
</div>
var app = new Vue({
  el: "#app",
  data: {
    basePrice: 100
  },
  computed: {
    taxIncludedprice: {
      get: function() {
             //parseIntは整数を返す関数
        return parseInt(this.basePrice * 1.08)
      },
      set: function(taxIncludedprice) {
            //Math.ceilは小数点以下を切り上げしたものを返す関数
        this.basePrice = Math.ceil(taxIncludedprice/1.08)
      }
    }
  }
})

(5) Supplementary (5) Calculation properties and methods

Below, the calculated property is cached, and the same value is output even if it can be said to be random, but the method is processed each time, so the random value is different

<div id="app">
  <h2>コンピューテッド</h2>
         <li>{{ram}}</li>
     <li>{{ram}}</li>
     <li>{{ram}}</li>
  <h2>メソッド</h2>
        <li>{{ramd()}}</li>
    <li>{{ramd()}}</li>
    <li>{{ramd()}}</li>
</div>
var app = new Vue({
  el: "#app",
  data: {
    basePrice: 100
  },
  computed: {
    ram: function() {
      //jsでランダムな数を返す関数
      return Math.random()
    }
  },
  methods: {
    ramd: function() {
      return Math.random()
    }
  }
})

(6)v-on:click

Below you will click "Good Morning" → "Hello"

test.thml
<div id="app">
  <button v-on:click="onclick">クリック</button>
  <div>{{message}}</div>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
    message:"おはよう"
 },
 methods:{
     onclick:function(){
     this.message="こんにちわ";
        }
    }
})

(7) v-on:click event object

To reference an event object from an event handler, simply set e as the first argument of the event handler

test.thml
<div id="app">
  <button v-on:click="onclick">クリック</button>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 methods:{
     onclick:function(e){
     console.log(e);
        }
    }
})

If the first argument is any other value, set the $event

test.thml
<div id="app">
  <button v-on:click="onclick('こんちゃ',$event)">クリック</button>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 methods:{
     onclick:function(message,event){
     console.log(message,e);
        }
    }
})

(7) Supplementary (1) Alternative examples

test.thml
<div id="app">
   <button v-on:mousemove="change(3,$event)">
            クリック
   </button>
   <p>{{x}},{{y}}</p>
</div>

<script src="js/test.js"></script>
<link rel="stylesheet" href="style.css">
test.js
let app = new Vue({
 el:"app",
 data:{
        message:"おはよう",
        x:0,
        y:0
    },
 methods:{
        change:function(e,event){
        this.x = event.clientX*e,
        this.y = event.client*e
    }
})

(7) Supplementary (2) Alternative examples

<div id="app">
<button v-on:click="onclick">
Click
</button>
<p>
{{now}}
</p>
</div>

<script 
src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script>
var app = new Vue({
el:"#app",
data:{
    now:""
},
methods:{
    onclick:function(){
        this.now = new Date().toLocaleString();
        }
    }
})
</script>

(8)v-on:focus,v-on:blur

focus fires when focused, blur fires when out of focus

test.thml
<div id="app">
  <input 
   v-bind:class="{color:borderColor}" 
   v-on:focus="setColor('red')" 
   v-on:blur="setColor('black')">

<script src="js/test.js"></script>
<link rel="stylesheet" href="style.css">
test.js
let app = new Vue({
 el:"app",
 data:{
        border:true
    },
 methods: {
        setColor(color) {
          this.border = color;
        }
    }
})
style.css
.color{
    borderColor:"black";
}

(9)v-on:change

Launch if the value changes between being focused and when it is out of focus

test.thml
<div id="app">
  <input type="text" v-on:change="ischange">
</div>

<script src="js/test.js"></script>
<link rel="stylesheet" href="style.css">
test.js
let app = new Vue({
 el:"app",
 data:{
        borderColor:true
    },
 methods: {
        ischange:function(){
            alert("valueが変化 !!")
        }
    }
})

(10)v-on:mouseover,mouseout

mouseover ignites when the mouse is applied, mouseout ignites when the mouse is removed

test.thml
<div id="app">
   <button v-on:mouseover="myOver" v-on:mouseout="myOut">
            クリック
   </button>
   <p>{{message}}</p>
</div>

<script src="js/test.js"></script>
<link rel="stylesheet" href="style.css">
test.js
let app = new Vue({
 el:"app",
 data:{
        message:"おはよう"
    },
 methods:{
        myOver:function(){
            this.message="当たりました"
        },
        myOut:function(){
            this.message="外れました"
        }
    }
})

(10) Supplementary (1) About mousemove

mousemove ignites when you move the mouse

test.thml
<div id="app">
   <button v-on:mousemove="change">
            クリック
   </button>
   <p>{{x}},{{y}}</p>
</div>

<script src="js/test.js"></script>
<link rel="stylesheet" href="style.css">
test.js
let app = new Vue({
 el:"app",
 data:{
        message:"おはよう",
        x:0,
        y:0
    },
 methods:{
        change:function(e){
        this.x = e.clientX,
        this.y = e.clientY
    }
})

See here for a list of event handlers

(11)v-on:keyup,v-on:keydowns

For keyups and keydowns, use one set of key modifiers

test.thml
<div id="app">
<form>
   <label for="name>氏名</label>
   <input type="text" id="name" v-on:keyup.esc="clear" v-model="name">
</form>
</div>

<script src="js/test.js"></script>
<link rel="stylesheet" href="style.css">
test.js
let app = new Vue({
 el:"app",
 data:{
        name:""
    },
 methods:{
        clear:function(){
            this.name=""
        }
    }
})

(11) Supplementary (1) List of aliases

.enter
.tab
.delete
.esc
.space
.down
.left
.right

(12)v-on:submit

Launch on submit Be sure to add the preventDefault() method when using submit

test.thml
<div id="app">
 <form v-on:submit="onsubmit">
   <label for="email">メール</label>
   <input type="email" value="送信">
   <input type="submit">
  </form>   
</div>

<script src="js/test.js"></script>
<link rel="stylesheet" href="style.css">
test.js
let app = new Vue({
 el:"app",
 data:{
        message:"おはよう"
    },
 methods:{
        onsubmit:function(e){
            if(confirm("送信しますか?")===false){
            e.preventDefault();
            return;
            }
        }
    }
})

(12) Supplement (1) v-on:submit.prevent

Since submit assumes page transition, if there is no page transition, add .prevent to avoid unintended screen transitions and screen updates.  See this site for more information

<div id="app">
  <h2>
    TO_DO List
  </h2>
  <form v-on:submit.prevent>
    <input type="text">
    <button v-on:click="addItem">
      Add
    </button>
  </form>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script>
var app = new Vue({
  el: "#app",
  methods: {
    addItem: function() {
      alert();

    }
  }
})
</script>

(13)v-on:click.once

If you add the event modifier once, it will only be triggered once.

test.thml
<div id="app">
  <button v-on:click.once="onclick">クリック</button>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 methods:{
     onclick:function(e){
     console.log(e);
        }
    }
})

(14) modifier .lazy

The event modifier lazy can be used to bind to a form element after it has taken focus

test.html
<div id="app">
  <form>
    <label for="name">氏名</label>
    <input typt="text" id="name" v-model.lazy="NAME">
  </form>
</div>
<p>{{NAME}}</p>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
   NAME:""
})

(14) Supplement (1) Modifier.trim

trim removes leading and trailing whitespace

<div id="app">
<p>
<input type="text" v-model.trim="message">
</p>
<p>
<input type="text" v-model="message">
</p>

<p>
    {{selected}}
    </p>
    <pre>{{$data}}</pre>

</div>
new Vue({
  el: '#app',
  data: {
   message:""
  }
})

(15) Supplement (2) Modifier.number

In html input, even if you specify number in the type attribute, the entered number becomes a string

<div id="app">
<p>
<input type="number" v-model="age">
</p>

<p>
    {{age+10}}
    </p>
    <pre>{{$data}}</pre>

</div>
new Vue({
  el: '#app',
  data: {
   age:0
  }
})

Therefore, if you add number, you convert the character type to a numeric type

<div id="app">
<p>
<input type="number" v-model.number="age">
</p>

<p>
    {{age+10}}
    </p>
    <pre>{{$data}}</pre>

</div>
new Vue({
  el: '#app',
  data: {
   age:0
  }
})

(15)v-model

Linking the NAME of the text box and the data object

(15) Supplement (1) Text Box

test.thml
<div id="app">
  <form>
  <label for="name">氏名</label>
  <input type="text" id="name" v-model="NAME">
  </form>
  <div>{{NAME}}</div>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app"
 data:""
})

(15) Supplement (2) Radio button

Various forms can be accommodated by changing the type attribute of the input element The value attribute of the radio button and the NAME are linked

test.thml
<div id="app">
  <form>
  <label for="name">氏名</label>
  <input type="radio" id="apple" value="りんご" v-model="NAME">
  <input type="radio" id="apple" value="オレンジ" v-model="NAME">
  <input type="radio" id="apple" value="もも" v-model="NAME">
  </form>
  <div>{{NAME}}</div>
</div>

(15) Supplement (3) Check Box

The value of the check box is managed as true or false

test.html
<div id="app">
  <form>
  <label for="name">氏名</label>
  <input type="checkbox" id="apple" v-model="NAME">
  </form>
  <div>{{NAME}}</div>
</div>

<!--true-->

(15) Supplementary (4) Check box (plural)

The value of the check box is passed to the v-model with the value attribute When multiple displays are to be displayed, NAME must be an array []

test.thml
<div id="app">
  <form>
  <label for="apple">apple</label>
  <input type="checkbox" id="apple" value="apple" v-model="NAME">
  <label for="orange">orange</label>
  <input type="checkbox" id="orange" value="orange" v-model="NAME">
  <label for="pine">pine</label>  
  <input type="checkbox" id="pine" value="pine" v-model="NAME">
  </form>
  <div>{{NAME}}</div>
</div>
test.js
let app = new Vue({
 el:"app"
 data:{
   NAME:[]
})

(15) Supplement (5) Pull-down box

NAME contains the value specified by value IF THERE IS NO VALUE, TEXT IS ENTERED (IN THIS CASE, APPLE OR ORANGE)

test.thml
<div id="app">
  <form>
  <label for="fruit">お気に入りのフルーツは?</label>
 <select id="fruit" v-model="NAME">
    <option value="">選択して下さい</option>
    <option value="apple">APPLE</option>
    <option value="orange">ORANGE</option>
    <option value="grape">GRAPE</option>
  </select>
  </form>
  <div>{{NAME}}</div>
</div>

(15) Supplementary (5) Separate example, stand-alone

<div id="app">
<select v-model="selected">
<option disabled value="">Please select one</option>
<option value=red>Red</option>
<option value=green>Green</option>
</select>
<p>
    {{selected}}
    </p>

</div>

new Vue({
  el: '#app',
  data: {
   selected:""
  }
})

(15) Supplementary (5) Separate examples, plurality

<div id="app">
<select v-model="selected" multiple>
<option disabled value="">Please select one</option>
<option value=red>Red</option>
<option value=green>Green</option>
</select>
<p>
    {{selected}}
    </p>

</div>
new Vue({
  el: '#app',
  data: {
   selected:[]
  }
})

(16)v-if,v-else,v-else-if

Invoke only when the specified expression is true

test.html
<div id="app">
  <form>
  <label for="name">氏名</label>
  <input type="checkbox" id="apple" v-model="NAME">
  </form>

  <div>{{NAME}}</div>  
  <div v-if="NAME">
     <h1>チェックしたね</h1>  
  </div>
</div>

<!--true-->
test.js
let app = new Vue({
 el:"app"
 data:{
   NAME:""
})

(16) Supplement (1) V-else

v-else should be directly under v-if

test.html
<div id="app">
  <p v-if="ok">了解</p>
  <p v-else>了解しない</p>
</div>
test.js
let app = new Vue({
 el:"app"
 data:{
   ok:"true"
})

(16) Supplement (2) v-else-if

test.html
<div id="app">
  <p v-if="ok">了解</p>
 <p v-else-if="ok2>まあ了解</p>
  <p v-else>了解しない</p>
</div>
test.js
let app = new Vue({
 el:"app"
 data:{
   ok:"false"
   ok2:"true"
})

(16) Supplementary (3) V-IF example

<div id="app">
    <p v-if="toggle">
        Hello
    </p>
</div>

<script 
src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>

<script>
var app = new Vue({
el:"#app",
data:{
    toggle:false
}
})
</script>

(16) Supplementary (4) V-show example

Displaying and hiding using the display function of CSS Low drawing cost compared to v-if

<div id="app">
    <p v-show="toggle">
        Hello
    </p>
</div>

<script 
src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>

<script>
var app = new Vue({
el:"#app",
data:{
    toggle:false
}
})
</script>

(17) fieldset tag legend tag

The fieldset tag is a tag for grouping input items of a form defined by the form tag, and by grouping, it is possible to easily move between groups with the tab key. Forms grouped by tags can be titled

test.html
<body>
    <div id="app" class="test">
       <fieldset>
        <legend>支払い方法</legend>
        カード:<input type="radio" name="pay" 
         value="credit" v-model="payday">
        振り込み:<input type="radio" name="pay" 
         value="bank" v-model="payday">

        <div v-if="paypay==='credit'">
            カード番号:<input type="text" key="credit"> 
        </div>
        <div v-if="paypay==='bank'">
            口座番号:<input type="text" key="bank">
        </div>
   </fieldset>
    </div>
test.js
new Vue({
    el:'#app',
    data:{
       payday:"credit"
    }
});

(18) v-for (retrieve values from array)

Retrieves values from a specified array or object in order (the following retrieves values from an array in order)

test.html
<body>
<!--bootcampを導入-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <div id="app">
      <table class="table">
          <th>no</th><th>ISBNナンバー</th><th>名前</th><th>値段</th>
          <tr v-for="b in ebooks">
              <td>{{b.isbn}}</td>
              <td>{{b.title}}</td>
              <td>{{b.price}}円</td>    
          </tr>
      </table>
    </div>
    <script src="js/test.js"></script>
</body>
</html>
test.js
new Vue({
    el:'#app',
    data:{
       ebooks:[
           {
            isbn:"978-4-7981-5757-3",
            title:"卵焼きレシピ",
            price:2800
           },
           {
            isbn:"978-4-7981-5757-3",
            title:"トカゲの飼い方",
            price:2000
           },
           {
            isbn:"",
            title:"なぞなぞの本",
            price:3000
           }
        ]
    }
});

If you take the second argument, you can add index (numerical value).

<tr v-for="(b,num) in ebooks">
              <td>{{num}}{{b.isbn}}</td>
              <td>{{num}}{{b.title}}</td>
              <td>{{num}}{{b.price}}円</td>    
</tr>

(18) Supplement (1) v-for (from object)

<div id="app">
<ul>
<li v-for="value in user">
    {{value}}
</li>
</ul>
<hr>
<ul>
<li v-for="(value,key) in user">
    {{key}}:{{value}}
</li>

</ul>
</div>

<script 
src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script>
var app = new Vue({
el:"#app",
data:{
    user:{
        firstName:"Taro",
        lastName:"Suzuki",
        age:34
    }
}
})
</script>

(19) v-for (enumerate numbers)

The following is an example of changing the value between 1 and 10

test.thml
<div id="app">
  <p v-for= "a in 10">{{a}}</p> 
</div>
test.js
let app = new Vue({
 el:"app"
})

(20)v-on:click.stop

stop is one of the event modifiers For example, in the following example, if you click click on click 2, click 1 will also ignite. This is the default specification for Vue .js

test.thml
<div id="app">
 <div v-on:click="oya">
     クリック1
     <div v-on:click="ko"> クリック2</div>
 </div>

<p>{{message1}}</p>
<p>{{message2}}</p>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app"
 data:""
})

In order not to ignite click 1 even if you click click 2 above, it is as follows.

test.thml
<div id="app">
 <div v-on:click="oya">
     クリック1
     <div v-on:click.stop="ko"> クリック2</div>
 </div>

<p>{{message1}}</p>
<p>{{message2}}</p>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app"
   data:{
        message1:"テスト1",
        message2:"テスト2"

    },
    methods:{
        oya:function(){
            this.message1="反応1"
        },
        ko:function(){
            this.message2="反応2"
        }
    }
})

(21)v-on:click.prevent

Prevent is also one of the event modifiers For example, in the following example, clicking on it will catch fire

test.thml
<div id="app">
 <a href="https://google.com">
     クリック
 </a>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app"
})

In order not to ignite even if you click on the above, it is as follows.

test.thml
<div id="app">
 <a v-on:click.prevent href="https://google.com">
     クリック
 </a>
</div>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app"
})

(22) v-on: []= Dynamically ignite arguments

test.thml
<div id="app">
 <button v-on:[event]="up">クリック</button>
 <p>{{number}}クリックされています</p>

<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
        number:0,
        event:"click"
    },
 methods:{
        up:function(){
        this.number+=1;
        }
    }
})

(23)v-bind:style

As a note, Haiphong – inside a javascript object enclose it in ""

test.thml
<div id="app">
 <h1 v-bind:style="Style1">Hello</h1>
</div>
<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
     Style1:{
      color:red;
      "backgound-color":blue;
      }
    }
})

(24) v-for, changing array elements and key attribute

To edit the elements of an array: shift() method to remove the first element

test.thml
<div id="app">
       <div v-for="fruit in fruits">
           <p>{{fruit}}</p>
           <input type="text">
           <button v-on:click="sentousakujo">削除</button>
       </div>
</div>
<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
        fruits:["りんご","オレンジ","パイン"]
    },
    methods:{
        sentousakujo:function () {
            this.fruits.shift();
        }
    }
})

(24) Supplementary (1) About the key attribute of the for statement

If the above continues, for example, even if you delete the beginning after putting the value apple, orage, pine in input, the input value will remain as it is as apple, orange. Therefore, if you use the key attribute and delete the beginning, the value of input will also be orange, pine An image that gives a unique key to a chunk

test.thml
<div id="app">
       <div v-for="fruit in fruits" v-bind:key="fruit">
           <p>{{fruit}}</p>
           <input type="text">
           <button v-on:click="sentousakujo">削除</button>
       </div>
</div>
<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
        fruits:["りんご","オレンジ","パイン"]
    },
    methods:{
        sentousakujo:function () {
            this.fruits.shift();
        }
    }
})

When using the v-for directive, be sure to include the key attribute.

(24) Supplementary (2) Method for touching the array

this.fruits.push() 末尾に要素を追加
this.fruits.pop()末尾の要素を削除
this.fruits.shift()先頭の要素を削除
this.fruits.unshift()先頭に要素を追加
this.fruits.splice(3, 1);4番目の要素を1つ削除

(25) About v-cloak

What prevents screen flicker You must always put a link to the CSS before the id-"app"

test.thml
<div id="app">
    <p v-cloak>{{message}}</p>
</div>
<script src="js/test.js"></script>
test.js
let app = new Vue({
 el:"app",
 data:{
   message:"おはよう"
      }
})
test.css
[v-cloak]{
  display:none
}

(26) Create a task management table

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タスク管理表</title>
    <!-- cssをheadタグに埋め込む -->
    <style>
        li{
            list-style:none;
        }
        /* li要素の子供であるspan要素のc */
        li>span.done{
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>タスク管理表</h2>
        <!-- submitはページ遷移を前提としているため、ページ遷移しない場合
         は.preventをつけて意図しない画面遷移、画面更新を避ける--> 
        <form v-on:submit.prevent>
            <input type="text" v-model="newItem">
            <button v-on:click="addItem">追加</button>
        </form>
     <!--v-forの第2引数をindex番号をとる-->
        <li v-for="(todo,index) in todos">
            <!-- isDoneと紐ついたチェックボックス -->
            <input type="checkbox" v-model="todo.isDone">
            <!-- text-decoration:line-throughと紐け-->
            <span v-bind:class="{done:todo.isDone}">{{todo.item}}</span>
            <!-- 削除ボタン -->
            <button v-on:click="deleteItem(index)">削除</button>
        </li>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        new Vue({
          el:'#app',
          data:{
              newItem:"",
              todos:[]
          },
          methods:{
            addItem:function(event){
                if(this.newItem === ""){
                    return;
                }
                var todo = {
                     item:this.newItem,
                     isDone:false
                 };
          //pushは配列の末尾に要素を加える
                 this.todos.push(todo);
                 this.newItem
            },
            deleteItem:function(index){
              //spliceは配列の中の指定した番号を削除する
              //以下のケースはindex番目を1つ削除する
               this.todos.splice(index,1);
            }
         }
        })
    </script>
</body>
</html>

(27) Monitoring Properties

<div id="app">
  <p>
    {{message}}
  </p>
  <p>
    <input type="text" v-model:value="message">
  </p>
</div>
var app = new Vue({
  el: "#app",
  data: {
    message: "Hello vue"
  },
  watch: {
    message: function(newValue, oldValue) {
      console.log("new:%s,old:%s", newValue, oldValue)
    }
  }
})

(28) Monitoring properties and calculated properties

Create it first with the monitoring properties

<div id="app">
 <p>
 氏:<input type="text" v-model:value="firstName">
 </p>
  <p>
 名:<input type="text" v-model:value="lastName">
 </p>
 <p>
 fullname:{{ fullName }}
 </p>
</div>
var app = new Vue({
  el: "#app",
  data: {
    firstName: "",
    lastName: "",
    fullName: ""
  },
  watch: {
    firstName: function(value) {
      this.fullName = value + " " + this.lastName
    },
    lastName: function(value) {
      this.fullName = this.firstName + " " + value
    }
  }
}) 

Next, use the calculated property

<div id="app">
 <p>
 氏:<input type="text" v-model:value="firstName">
 </p>
  <p>
 名:<input type="text" v-model:value="lastName">
 </p>
 <p>
 fullname:{{ fullName }}
 </p>
</div>
var app = new Vue({
  el: "#app",
  data: {
    firstName: "",
    lastName: "",
  },
    computed:{
    fullName:function(){
    return this.firstName+ " " + this.lastName
}
    }

})

(29) this, callback function

Suppose you have a simple program that adds up when you press the button as shown below

<div id="app">
  <p>{{ count }}</p>
  <button v-on:click="increment">カウントアップ</button>
</div>
new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function() {
      this.count += 1
    }
  }
})

If you use this callback function, this in the callback function will not work well, so assign this to another variable in advance, as shown below.

<div id="app">
  <p>{{ count }}</p>
  <button v-on:click="increment">カウントアップ</button>
</div>
new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function() {
      var me = this
      setTimeout(function() {
        me.count += 1
      })
    }
  }
})

Or use bind

<div id="app">
  <p>{{ count }}</p>
  <button v-on:click="increment">カウントアップ</button>
</div>
new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function() {
      setTimeout(function() {
        this.count += 1
      }.bind(this))
    }
  }
})

See here for more information See (43) callback function here for bind, setTimeout (44)

(30) Reading JSON data with axios

<div id="app">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
new Vue({
  el: '#app',
  data: {
    count: 0
  },
  mounted: function() {
    axios.get('https://jsonplaceholder.typicode.com/todos')
      .then(function(response) {
        console.log(response)
      })
  }
})

(31) Acquire and store data with axios

Using the axios module, an HTTP client, to retrieve JSON data in Vue .js

Use JSONPlaceholder, a service that provides JSON mock data (https://jsonplaceholder.typicode.com/todos)

<div id="app">
<p>
{{message}}
</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
new Vue({
  el: '#app',
  data: {
    message: ""
  },
  mounted: function() {
    axios.get('https://jsonplaceholder.typicode.com/todos')
      .then(function(response) {
        console.log(response.data[0])
    this.message = response.data[0]
      }.bind(this))
  }
})

(31) Supplementary (1) Catch errors with catch

If you want to catch communication errors with axios, use catch

new Vue({
  el: '#app',
  data: {
    bpi: null
  },
  mounted: function() {
    axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(function(response) {
    this.bpi = response.data.bpi
      }.bind(this))
    .catch(function(error){
    console.log(error)
      })
  }
})

(31) Supplement (2) Get Bitcoin Price

Note that objects are fetched sequentially using v-for, but v-for is fetched in the order of "value" and "key name"

<div id="app">
<li v-for="(rate,currency) in bpi">{{currency}}:{{rate.rate_float}}</li>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
new Vue({
  el: '#app',
  data: {
    bpi: null
  },
  mounted: function() {
    this.appear()
  },
  methods: {
    appear: function() {
      axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then(function(response) {
          this.bpi = response.data.bpi
          console.log(response.data.bpi)
        }.bind(this))
        .catch(function(error) {
          console.log(error)
        })
    }
  }

2. Components

(1) The data object is a function

In a component, the data object must return{} as a function The component shall be Vue.component ("●●",{data,method, etc.}) that sets the component name as the first argument and the object as the second argument. In addition, components can use anything that can return html itself as a string template.

test.thml
<div id="app">
      <my-com></my-com>
      <my-com></my-com>
      <my-com></my-com>
</div>
<script src="js/test.js"></script>
test.js
Vue.component("my-com",{
    data:function () {
    return{
        number:12
        }
    },
    template:"<p>いいね{{number}}
              <button v-on:click='add'>ボタン</button></p>",
    methods:{
        add:function(){
            this.number++;
        }
    }
})

let app = new Vue({
    el:"#app",
   });

(2) Global, Local

Registering components globally allows them to be used in different instances of Vue

test.thml
<div id="app">
      <my-com></my-com>
      <my-com></my-com>
      <my-com></my-com>
</div>

<div id="app2">
      <my-com></my-com>
      <my-com></my-com>
      <my-com></my-com>
</div>
<script src="js/test.js"></script>
test.js
Vue.component:("comp",{
    data:function () {
    return{
        number:12
        }
    },
    template:"<p>いいね{{number}}
              <button v-on:click='add'>ボタン</button></p>",
    methods:{
        add:function(){
            this.number++;
        }
    }
});
let app = new Vue({
    el:"#app",
   });
let app2 = new Vue({
    el:"#ap2p",
   });

On the other hand, you can register components locally as follows:

test.thml
<div id="app">
      <my-com></my-com>
      <my-com></my-com>
      <my-com></my-com>
</div>
<script src="js/test.js"></script>
test.js
var component = {
    data:function () {
    return{
        number:12
        }
    },
    template:"<p>いいね{{number}}
              <button v-on:click='add'>ボタン</button></p>",
    methods:{
        add:function(){
            this.number++;
        }
    }
}
let app = new Vue({
    el:"#app",
    component:{
      "comp":component
     }
   });
let app2 = new Vue({
    el:"#ap2p",
   });

Global components can be used on all Vue instances, but local components can only be used on specific instances

The Case for Global Components

<div id="app">
<hello-component></hello-component> 
</div>
Vue.component("hello-component", {
    template:"<p>Hello</p>"
})

new Vue({
  el: '#app',

})

Cache of local components

<div id="app">
<hello-component></hello-component> 
</div>
var helloComponent =  {
    template:"<p>Hello</p>"
}

new Vue({
  el: '#app',
    components:{
    "hello-component":helloComponent
    } 
})

(3) Attention to component names

Kebab case separated by Haiphong Pascal case for those that start with the first letter in capital letters It is better to unify to one or the other The name of the component must be a kebab case (Haiphong) The reason is to prevent collisions between existing HTML elements and HTML elements that will be defined in the future

(4) Example of component description

Vue.component must precede the new Vue

test.html
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
</head>

<body>
    <div id="app">
      <hello-world></hello-world>
    </div>
    <script src="https://cdn.jsdelivr.net/
           npm/vue/dist/vue.js"></script>
    <script>
      Vue.component("hello-world",{
        template:"<h1>HELLO WORLD</h1>"
      })
      new Vue({
        el:"#app",
        data:{
        }
      })
    </script>
</body>
</html>

(5) Reuse of components

Components can be reused

test.html
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
</head>

<body>
    <div id="app">
      <hello-world></hello-world>
    <hello-world></hello-world>
    <hello-world></hello-world>
    <hello-world></hello-world>
    </div>
    <script src="https://cdn.jsdelivr.net/
           npm/vue/dist/vue.js"></script>
    <script>
      Vue.component("hello-world",{
        template:"<h1>HELLO WORLD</h1>"
      })
      new Vue({
        el:"#app",
        data:{
        }
      })
    </script>
</body>
</html>

(5) Supplementary (1) Component summary

<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
Vue.component("button-counter", {
  data: function() {
    return {
      count: 0
    }
  },
  template:"<button v-on:click='count++'>{{count}}</button>"
})

new Vue({
  el: '#app'
})

(6) Multiple tags in template

If there are multiple tags in template, they must be combined with div tags etc.

test.html
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
</head>

<body>
    <div id="app">
      <hello-world></hello-world>
   </div>
    <script src="https://cdn.jsdelivr.net/
           npm/vue/dist/vue.js"></script>
    <script>
      Vue.component("hello-world",{
        template:"<div><h1>HELLO WORLD</h1><p>{{message}}</p></div>",
      })
      new Vue({
        el:"#app",
        data:{
          return {
            message:"Hello Vue"
          }
        }
      })
    </script>
</body>
</html>

(7) Methods in the component

 <script>
      Vue.component("hello-world",{
        template:"<p>カウント{{count}}<button v-on:click='countUp'>Up</button><button v-on:click='countDown'>Down</button></p>",
        data:function(){
          return{
            count:0
          }
        },
        methods:{
          countUp:function(){
            this.count++
          },
          countDown:function(){
            this.count--
          }
        }
      })
      new Vue({
        el:"#app",
      })
    </script>

(8) Line breaks in template

Use 'backquotes' to break lines in a component template.

(9) From parent to child (using attributes)

Parent, but with a Vue instance as the parent and Vue.component as a child Parent component passes a value as a message attribute The child component side puts props as an array

<div id="app">
   <hello-world message="Hello vue"></hello-world>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
      Vue.component("hello-world",{
        template:
        `<h1>
          Hello World {{message}}
          </h1>`,
        props:["message"]

      })
      new Vue({
        el:"#app",
      })
</script>

(10) From parent to child (using v-bind)

For the message attribute, use v-bind to pass a value from the data property

 <div id="app">
      <hello-world v-bind:message="inputT"></hello-world>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
      Vue.component("hello-world",{
        template:
        `<h1>
          Hello World {{message}}
          </h1>`,
        props:["message"]

      })
      new Vue({
        el:"#app",
        data:{
          inputT:"helloVue"
        }
      })
</script>

(11) Data update received by the child from the parent

It is undesirable for a child component to update the value received in props as it is (it is possible but it gives a warning) Evacuate to the data object once and then update it

<script>
      Vue.component("hello-world",{
        props:["num"],
        template:`
        <div>
          値は{{current}}です
          <input type="button" v-on:click="onclick">
          </div>`,
        methods:{
          onclick:function(){
            this.current++;
          }
        },
        data:function(){
          return {
            current:this.num
          }
        }

      })
      new Vue({
        el:"#app",

      })
    </script>

(12) From child to parent (event firing)

In the child component, this.$emit ("child") means that the event has occurred, and in the parent component, v-on:child="aleart" is monitoring the event. The child component's this.$emit is a custom event, and the v-on directive is responsible for the custom event.

<div id="app">
      <hello-world v-on:child="aleart"></hello-world>
</div>
<script>
      Vue.component("hello-world",{
        template:'<button v-on:click="onclick">ボタン</button>',
        methods:{
          onclick:function(){
            this.$emit("child");
          }
        }
      })
      new Vue({
        el:"#app",
        methods:{
          aleart:function(){
            alert("受け取りました")
          }
        }
      })
</script>

(13) From the child to the parent (data passing)

First, I'm passing step data to Vue.component from parent After that, using $emit, both the argument step from the child to the parent is passed the data to plus. Then I'm defining and executing the add method on the parent side, but since it has arguments, I'm taking the arguments with e and displaying them in current (of the parent)

    <div id="app">
      <hello-world step="1" v-on:plus="add"></hello-world>
      <hello-world step="2" v-on:plus="add"></hello-world>
      <hello-world step="-1" v-on:plus="add"></hello-world>
      {{current}}
    </div>
    <script src="https://cdn.jsdelivr.net/
     npm/vue/dist/vue.js"></script>


    <script>
      Vue.component("hello-world",{
        props:["step"],
        template:`<button type="button" v-on:click="onclick">
          {{step}}</button>`,
        methods:{
          onclick:function(){
            this.$emit("plus",Number(this.step));
          }
        }
      }),
      new Vue({
        el:"#app",
        data:{
          current:0
        },
        methods:{
          add:function(e){
            this.current+=e;
          }
        }
      })
    </script>

(13) Supplementary (1) Alternative examples

<div id="app">
      <p>{{message}}</p>   
      <hello-world v-on:tochild="receivemessage"></hello-world>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>

<script>
     Vue.component("hello-world",{
       template:`<div>
       <input type="test" v-model="inputText">
       <button v-on:click="onclick">送信ボタン</button>
       </div>`,
       data:function(){
         return{
           inputText:""
         }
       },
       methods:{
         onclick:function(){
           this.$emit("tochild",this.inputText)
         }
       }
     })

     new Vue({
      el:"#app",
      data:{
        message:""
      },
      methods:{
        receivemessage:function(e){
          this.message = e;
        }
      }
     });

</script>

Slots (14)

Slots allow you to embed content specified by the caller of a component into a template

For example, in the following example, Hello vue is passed as a message attribute to a child component

<div id="app">
   <hello-world message="Hello vue"></hello-world>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
      Vue.component("hello-world",{
        template:
        `<h1>
          Hello World {{message}}
          </h1>`,
        props:["message"]

      })
      new Vue({
        el:"#app",
      })
</script>

Using slots, you can embed attributes as they are. Note that the pre hello vue is displayed when no data is passed from the caller

<div id="app">
     <hello-world>"Hello vue"</hello-world>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
        Vue.component("hello-world",{
          template:
          `<h1>
            Hello World <slot>pre Hello vue</slot>
            </h1>`,
          props:["message"]

        })
        new Vue({
          el:"#app",
        })
</script>

(15) Multiple slots

On the child component side, separate it by attaching the name attribute On the parent component side, add a slot attribute to the tag

<div id="app">
     <hello-world>
       <div slot="no1">"Hello vue"</div>
       <div slot="no2">"Hello vue2"</div>
     </hello-world>
</div>
  <script src="https://cdn.jsdelivr.net/npm/vue/
  dist/vue.js"></script>

<script>
        Vue.component("hello-world",{
          template:
          `<h1>
            Hello World <slot>pre Hello vue</slot>
            <slot name="no1">pre Hello vue</slot>
            <slot name="no2">pre Hello vue</slot>
            </h1>`,
          props:["message"]

        })
        new Vue({
          el:"#app",
        })
</script>

The above may be used, but since the div tag is visible in the parent side H1, it is common to use the template tag

<div id="app">
     <hello-world>
       <template slot="no1">"Hello vue"</template>
       <template slot="no2">"Hello vue2"</template>
     </hello-world>
</div>
  <script src="https://cdn.jsdelivr.net/npm/vue/
  dist/vue.js"></script>

<script>
        Vue.component("hello-world",{
          template:
          `<h1>
            Hello World <slot>pre Hello vue</slot>
            <slot name="no1">pre Hello vue</slot>
            <slot name="no2">pre Hello vue</slot>
            </h1>`,
          props:["message"]

        })
        new Vue({
          el:"#app",
        })
</script>

You may also use the v-slot directive

<div id="app">
     <hello-world>
       <template v-slot:no1>"Hello vue"</template>
       <template v-slot=no2>"Hello vue2"</template>
     </hello-world>
</div>
  <script src="https://cdn.jsdelivr.net/npm/vue/
  dist/vue.js"></script>

<script>
        Vue.component("hello-world",{
          template:
          `<h1>
            Hello World <slot>pre Hello vue</slot>
            <slot name="no1">pre Hello vue</slot>
            <slot name="no2">pre Hello vue</slot>
            </h1>`,
          props:["message"]

        })
        new Vue({
          el:"#app",
        })
</script>

(16) V-slot abbreviation syntax

v-slot:header is #でも表記できる The following are the same for both

<template v-slot:no1>"Hello vue"</template>
<template #no1>"Hello vue"</template>

3. Transitions

When you enclose the tag you want to animate with transition, v-enter-active, v-enter class, v-leave-active, v-leave-to are automatically set. Display is v-enter-active,v-enter, hide is v-leave-active,v-leave-to.


<div id="app">
  <button v-on:click="show=!show">
    Change
  </button>
  <transition>
    <p v-show="show">
      Hello
    </p>
  </transition>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    show: false
  }
})
.v-enter-active,
.v-leave-active{
  transition: opacity 5s;
}

.v-enter,
.v-leave-to{
  opacity: 0;
}
Share:
1
kaonashikun *
Author by

kaonashikun *

Updated on November 04, 2020