htmlオブジェクトの生成
ｈ（タグ名、属性情報、内部の要素）
<script>
import { h } from 'vue'
export default {
name: 'HelloWorld',
data() {
return {
title: 'HelloWorld',
message:'This is sample message.',
}
},
render() {
return h('div',{
class:'alert alert-warning'
},
[
h('h2', this.title),
h('p', this.message)
])
}
}
</script>
<template>
<div id="app">
<HelloWorld />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
テキストではなく、HTMLのコードそのものを扱うことができる
export default {
name :'HelloJSX',
data() {
return {
title: 'HelloJSX',
message:'This is sample message.',
}
},
render(h) {
return (
<div class="alert alert-primary">
<h2>{ this.title }</h2>
<p>{ this.message }</p>
</div>
)
}
}
App.vue
<template>
<div id="app">
<HelloJSX />
</div>
</template>
<script>
import HelloJSX from './components/HelloJSX.jsx'
export default {
name: 'app',
components: {
HelloJSX
}
}
</script>
export default {
name :'HelloJSX',
props: {
title: String,
msg: String
},
render(h) {
return (
<div class="alert alert-primary">
<h2>{ this.title }</h2>
<p>{ this.msg }</p>
</div>
)
}
}
<HelloJSX title="OK, Vue3"
msg="※属性で設定したメッセージ。" /> //ここで指定できる
export default {
name :'HelloJSX',
props: {
title: String,
msg: String
},
data() {
return {
cls_title: 'text-danger h1',
cls_msg: 'text-primary h5'
}
},
render(h) {
return (
<div class="alert alert-primary">
<h2 class={this.cls_title}>{ this.title }</h2>
<p class={this.cls_msg}>{ this.msg }</p>
</div>
)
}
}
算出プロパティ：処理を含めることができるデータで、メソッドとの違いは結果をキャッシュできるため、処理を高速にさばくことができる。
2倍と2乗の算出プロパティ
<template>
<div class="alert alert-primary">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<hr>
<p class="h5">val: {{val}}</p>
<div class="form-group text-left">
<label>* 2:</label>
<input type="number"
v-model="a" class="form-control">
</div>
<div class="form-group text-left">
<label>^ 2:</label>
<input type="number"
v-model="b" class="form-control">
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
title: String,
},
data() {
return {
message: '算術プロパティの利用。',
val: 0,
}
},
computed: {
a: {
get() {
return this.val * 2
},
set(value) {
this.val = Math.floor(value / 2)
},
},
b: {
get() {
return this.val * this.val
},
set(value) {
this.val = Math.floor(Math.sqrt(value))
},
},
},
created() {
this.val = 10
},
}
</script>
特定の値が変更された時、様々な値を変更する必要がある時に便利
<template>
<div class="alert alert-primary">
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<hr>
<div class="form-group text-left">
<label>Value:</label>
<input type="number" v-model="val"
class="form-control">
</div>
<table class="bg-white table mt-4">
<tr><th>add:</th><td>{{add}}</td></tr>
<tr><th>sub:</th><td>{{sub}}</td></tr>
<tr><th>multiple:</th><td>{{mult}}</td></tr>
<tr><th>divide:</th><td>{{div}}</td></tr>
</table>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
title: 'Watchers',
message: '値の監視',
val: 0,
add: 0,
sub: 0,
mult:0,
div: 0,
}
},
watch:{
val(newValue, oldValue) {
console.log(oldValue + ' -> ' + newValue)
this.val = newValue
var val = parseInt(this.val)
this.add = Math.floor(val + 2)
this.sub = Math.floor(val - 2)
this.mult = Math.floor(val * 2)
this.div = Math.floor(val / 2)
}
},
created(){
this.val = 6
},
}
</script>
<template>
<div class="alert alert-primary">
<h1>{{ title }}</h1>
<pre v-on:click="clear">{{ message }}</pre>
<hr>
<div id="out" class="out" v-on:click="a_event">A
<div id="mid" class="mid" v-on:click="b_event">B
<--- 伝搬をストップする場合 <div id="mid" class="mid" v-on:click.stop="b_event">B --->
<div id="in" class="in" v-on:click="c_event">C
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data: function(){
return {
title: 'Event',
message: 'イベントの伝播について。\n',
}
},
methods: {
a_event(event) {
this.message += "A-Event [" + event.target.id
+ ' → ' + event.currentTarget .id + "]\n"
},
b_event(event) {
this.message += "B-Event [" + event.target.id
+ ' → ' + event.currentTarget .id + "]\n"
},
c_event(event) {
this.message += "C-Event [" + event.target.id
+ ' → ' + event.currentTarget .id + "]\n"
},
clear() {
this.message = 'イベントの伝播について。\n'
}
},
}
</script>
<style>
pre {
font-size:16pt;
line-height: 1.25;
}
div.out {
padding: 0px;
background-color: #eee;
width:300px;
height:200px;
}
div.mid {
padding: 0px;
background-color: #ddd;
width:200px;
height:170px;
}
div.in {
padding: 0px;
background-color: #ccc;
width:100px;
height:140px;
}
</style>
キーイベント
<template>
<div class="alert alert-primary">
<h1>{{ title }}</h1>
<pre>{{ message }}</pre>
<hr>
<div>
<input type="text" class="form-control"
v-on:keypress="type"
v-on:keydown.delete="clear"
v-on:keydown.space="space"
v-on:keydown.enter="enter"></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
title: 'Event',
message: '',
}
},
methods: {
type(event) {
if (event.key == 'Enter'){ return }
this.message += event.key + ' '
event.target.value = ''
},
clear() {
this.message = ''
},
space() {
this.message += '_ '
},
enter(event) {
var res = this.message.split(' ').join('')
this.message = res.split('_').join(' ')
event.target.value = ''
}
},
}
</script>
現在コメントはありません