Vue.js ディレクティブ
ディレクティブはHTMLタグの中にある v-text のようなVue用の特別な属性です。
<div v-text="msg"></div>
Vue 3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="bool1">v-if</h1>
<h1 v-else-if="bool2">v-else-if</h1>
<h1 v-else>v-else</h1>
<h1 v-show="bool3">v-show</h1>
<button v-on:click="exec">btn</button>
<a v-bind:href="www">aaa</a>
<input type="checkbox" v-model="bool3">
<div v-text="msg"></div>
<div v-html="msg"></div>
<div v-for="item in items" v-bind:key="item.id">
{{ item.id + "-" + item.message }}
</div>
<div v-for="n in 5">
{{ n }}
</div>
</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const www = ref('https://www.google.co.jp/')
const bool1 = ref(true)
const bool2 = ref(true)
const bool3 = ref(true)
const msg = ref("<b>bold</b>")
const items = ref([{
id: 1,
message: 'One'
},
{
id: 2,
message: 'two'
}])
const exec = () => {
bool1.value = false
}
return { www, bool1, bool2, bool3, msg, items, exec }
}
}).mount("#app")
</script>
</body>
</html>
Vue 2
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="bool1">v-if</h1>
<h1 v-else-if="bool2">v-else-if</h1>
<h1 v-else>v-else</h1>
<h1 v-show="bool3">v-show</h1>
<button v-on:click="exec">btn</button>
<a v-bind:href="www">aaa</a>
<input type="checkbox" v-model="bool3">
<div v-text="msg"></div>
<div v-html="msg"></div>
<div v-for="item in items" v-bind:key="item.id">
{{ item.id + "-" + item.message }}
</div>
<div v-for="n in 5">
{{ n }}
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
www: 'https://www.google.co.jp/',
bool1: true,
bool2: true,
bool3: true,
msg: "<b>bold</b>",
items: [{
id: 1,
message: 'One'
},
{
id: 2,
message: 'two'
}
]
},
methods: {
exec: function () {
this.bool1 = false;
}
}
})
</script>
</body>
</html>
条件分岐
<h1 v-if="bool1">v-if</h1>
<h1 v-else-if="bool2">v-else-if</h1>
<h1 v-else>v-else</h1>
条件分岐には、v-if、v-else-if、v-elseを使います。v-if単体でも使えますし、v-if、v-elseだけでも使えます。
条件表示
<h1 v-show="bool3">v-show</h1>
条件により表示/非表示を制御するなら、v-showを使います。
イベント
<button v-on:click="exec">btn</button>
<button @:click="exec">btn</button>
v-onでイベントをキャッチし、JavaScirptの処理を呼び出せます。省略して@でも同じ動きをします。
Vue 3で<script setup>の場合
<script setup>
import { ref } from 'vue'
const bool1 = ref(true)
function exec() {
bool1.value = false
}
</script>
Vue 3でcreateAppの場合
createApp({
setup() {
const bool1 = ref(true)
const exec = () => {
bool1.value = false
}
return { exec }
}
}).mount("#app")
Vue 2
var app = new Vue({
el: '#app',
methods: {
exec: function () {
this.bool1 = false;
}
}
})
画面表示とJavaScript処理の連携
<input type="checkbox" v-model="bool3">
v-modelで画面入力値とJavaScript処理の変数を同期することができます。
Vue 3で<script setup>の場合
<script setup>
import { ref } from 'vue'
const bool3 = ref(true)
</script>
Vue 3でcreateAppの場合
createApp({
setup() {
const bool3 = ref(true)
return { bool3 }
}
}).mount("#app")
Vue 2
var app = new Vue({
el: '#app',
data: {
bool3: true
}
})
HTML属性とJavaScript処理の連携
<a v-bind:href="www">aaa</a>
<a :href="www">aaa</a>
Vue 3で<script setup>の場合
<script setup>
import { ref } from 'vue'
const www = ref('https://www.google.co.jp/')
</script>
Vue 3でcreateAppの場合
createApp({
setup() {
const www = ref('https://www.google.co.jp/')
return { www }
}
}).mount("#app")
Vue 2
var app = new Vue({
el: '#app',
data: {
www: 'https://www.google.co.jp/'
}
})
v-bindで属性値とJavaScript処理の変数を同期することができます。v-bindは省略できます。
ループ
<div v-for="item in items" v-bind:key="item.id">
{{ item.id + "-" + item.message }}
</div>
<div v-for="n in 5">
{{ n }}
</div>
ループはv-forを使います。
Vue 2
var app = new Vue({
el: '#app',
data: {
items: [{
id: 1,
message: 'One'
},
{
id: 2,
message: 'two'
}
]
}
})
画面表示
<div v-text="msg"></div>
<div v-html="msg"></div>
画面表示はv-text、v-htmlを使用します。
テキストとして表示する場合は、v-text(<b>bold</b>)を使用し、HTMLとして表示する場合はv-html(bold)を使用します。
Vue 2
var app = new Vue({
el: '#app',
data: {
msg: "<b>bold</b>"
}
})
ページのトップへ戻る