Skip to content

Instantly share code, notes, and snippets.

@KMR-zoar

KMR-zoar/index.html

Created March 23, 2018 02:01
Show Gist options
  • Save KMR-zoar/17a558ee27944b525967379f86866ca4 to your computer and use it in GitHub Desktop.
Save KMR-zoar/17a558ee27944b525967379f86866ca4 to your computer and use it in GitHub Desktop.
Download ZIP
Vue.js 入門
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<!--
Vue.js 入門: http://www.tohoho-web.com/ex/vuejs.html
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue Test</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
#app-2 .error {
color: red;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app-1">{{ message }}</div>
<script>
var app1 = new Vue({
el: "#app-1",
data: { message: 'Hello World!'}
})
</script>
<div id="app-2">
<input type="text" v-model="message">
<div class="error" v-if="error.require">必須項目です。</div>
<div class="error" v-if="error.tooLong">長すぎます。</div>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
watch: {
message: function(newVal, oldVal) {
this.error.require = (newVal.length < 1) ? true : false;
this.error.tooLong = (newVal.length > 5) ? true : false;
}
},
data: {
message: 'Hello',
error: {
require: false,
tooLong: false
}
}
})
</script>
<div id="app-101">
<div v-text="message"></div>
<div>{{ message }}</div>
</div>
<script>
var app101 = new Vue({
el: '#app-101',
data: {
message: 'Hello!'
}
})
</script>
<div id="app-102">
<div v-text="message"></div>
<div v-html="message"></div>
</div>
<script>
var app102 = new Vue({
el: '#app-102',
data: {
message: '<b>Hello!</b>'
}
})
</script>
<div id="app-103">
<input type="checkbox" @click="change" checked>
<span v-show="seen">Hello!</span>
</div>
<script>
var app103 = new Vue({
el: '#app-103',
data: { seen: true },
methods: {
change: function(e) {
this.seen = e.target.checked
}
}
})
</script>
<div id="app-104">
<input type="checkbox" @click="change" checked>
<span v-if="seen">Hello!</span>
</div>
<script>
var app104 = new Vue({
el: '#app-104',
data: { seen: true },
methods: {
change: function(e) {
this.seen = e.target.checked
}
}
})
</script>
<div id="app-105">
<input type="checkbox" @click="change" checked>
<span v-if="seen">Hello!</span>
<span v-else>Bye!</span>
</div>
<script>
var app105 = new Vue({
el: '#app-105',
data: { seen: true },
methods: {
change: function(e) {
this.seen = e.target.checked
}
}
})
</script>
<div id="app-106">
<input type="radio" name="app106-type" onclick="app106.type='A'" checked>
<input type="radio" name="app106-type" onclick="app106.type='B'">
<input type="radio" name="app106-type" onclick="app106.type='C'">
<span v-if="type=='A'">Good morning.</span>
<span v-else-if="type=='B'">Hello!</span>
<span v-else>Bye!</span>
</div>
<script>
var app106 = new Vue({
el: '#app-106',
data: { type: 'A'}
})
</script>
<div id="app-107">
<ul>
<li v-for="color in colorList">{{ color }}</li>
</ul>
</div>
<script>
var app107 = new Vue({
el: '#app-107',
data: { colorList: [ 'Red', 'Green', 'Blue' ]}
})
</script>
<div id="app-108">
<button v-on:click.once="hello">Hello</button>
<button @click="hello">Hello</button>
</div>
<script>
var app108 = new Vue({
el: '#app-108',
methods: {
hello: function(){
alert("Hello!");
}
}
})
</script>
<div id="appo">
<span v-bind:title="message">
マウスカーソルが合いました
</span>
</div>
<script>
var appo = new Vue({
el: '#appo',
data: {
message: 'Hello Vue!'
}
})
</script>
<div id="app-109">
<input type="button" v-bind:value="message">
<input type="button" :value="message">
</div>
<script>
var app109 = new Vue({
el: '#app-109',
data: { message: 'Hello!'}
})
</script>
<duv id="app-120">
<input type="text" v-model="message">
<div>Message: {{ message }}</div>
</duv>
<script>
var app120 = new Vue({
el: '#app-120',
data: { message: 'Hello!' }
})
</script>
<div id="app-122">
<button onclick="location.reload();">{{ caption }}</button>
<div>Message: <span v-cloak>{{ message }}</span></div>
<div>Message: <span>{{ message }}</span></div>
</div>
<script>
window.setTimeout(function() {
var app122 = new Vue({
el: '#app-122',
data: {
message: 'Hello!',
caption: '再表示'
}
})
}, 1000);
</script>
<div id="app-140">
<my-element-140></my-element-140>
</div>
<script>
Vue.component('my-element-140', {
template: '<strong>Hello!</strong>'
});
var app140 = new Vue({
el: '#app-140',
})
</script>
<div id="app-141">
<my-component-141></my-component-141>
</div>
<script>
var MyComponent141 = Vue.extend({
template: '<string>Hello!</string>'
})
Vue.component('my-component-141', MyComponent141)
var app141 = new Vue({
el: '#app-141'
})
</script>
<div id="app-142">
<div>{{ message }}</div>
</div>
<script>
var app142 = new Vue({
el: '#app-142',
data: {
message: 'Hello!'
}
})
app142.message = 'Bye!';
console.log(app142.$el.textContent);
Vue.nextTick(function(){
console.log(app142.$el.textContent);
})
</script>
<div id="app-143">
<input type="button" @click="addBlue" value="Add">
<input type="button" @click="deleteBlue" value="Delete">
<input type="button" @click="changeRed" value="Change">
<ul>
<li v-for="(value, key) in colorList">{{ key }} = {{ value }}</li>
</ul>
</div>
<script>
var app143 = new Vue({
el: '#app-143',
data: {
colorList: {
red: '#f00',
green: '#0f0'
}
},
methods: {
addBlue: function() {
Vue.set(this.colorList, 'blue', '#00f')
},
deleteBlue: function() {
Vue.delete(this.colorList, 'blue')
},
changeRed: function() {
app143.colorList.red = '#ff0000'
}
}
})
</script>
<div id="app-144">
<div v-font16>Hello!</div>
</div>
<script>
Vue.directive('font16', {
inserted: function(el) {
el.style.fontSize = '16pt'
}
})
var app144 = new Vue({
el: '#app-144'
})
</script>
<div id="app-145">
<div>{{ message | toupper }}</div>
</div>
<script>
Vue.filter('toupper', function(value) {
return value.toUpperCase()
})
var app145 = new Vue({
el: '#app-145',
data: { message: 'Hello!'}
})
</script>
<script>
var res = Vue.compile('<div>{{ message }}</div>');
new Vue({
data: { message: 'Hello!' },
render: res.render,
staticRenderFns: res.staticRenderFns
})
</script>
<div id="app-202">
<my-element-202 values="Hello!"></my-element-202>
</div>
<script>
Vue.component('my-element-202', {
props: [ 'values' ],
template: '<div>{{ values }}</div>'
})
var app102 = new Vue({
el: '#app-202'
})
</script>
<div id="app-203">
<div id="el-203"></div>
</div>
<script>
var MyElement203 = Vue.extend({
props: [ 'message' ],
template: '<div>{{ message }}</div>'
})
var vm = new MyElement203({
propsData: { message: 'Hello!'}
}).$mount('#el-203');
var app203 = new Vue({
el: '#app-203'
})
</script>
<div id="app-204">
<div><input v-model="message"></div>
<div>Message: {{ upperMessage }}</div>
</div>
<script>
var app204 = new Vue({
el: '#app-204',
data: {
message: 'Hello!'
},
computed: {
upperMessage: function() {
return this.message.toUpperCase();
}
}
})
</script>
<div id="app-205">
<button @click="toUpper">Upper</button>
<button @click="toLower">Lower</button>
<div>{{ message }}</div>
</div>
<script>
var app205 = new Vue({
el: '#app-205',
data: {
message: 'Hello'
},
methods: {
toUpper: function() {
this.message = this.message.toUpperCase();
},
toLower: function() {
this.message = this.message.toLowerCase();
}
}
})
</script>
<div id="app-206">
<form>
<input type="text" name="text1" :value="message">
<input type="button" @click="change" value="Change">
</form>
<div>変更前: {{ oldmsg }}</div>
<div>変更後: {{ newmsg }}</div>
</div>
<script>
var app206 = new Vue({
el: '#app-206',
data: {
message: 'new',
newmsg: 'new',
oldmsg: 'old'
},
watch: {
message: function (newVal, oldVal) {
this.newmsg = newVal;
this.oldmsg = oldVal;
}
},
methods: {
change: function (e) {
this.message = e.target.form.text1.value;
}
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment