Created
October 14, 2018 18:25
-
-
Save suzusime/7ee4fdd939c10dc758f49f88eb348ea7 to your computer and use it in GitHub Desktop.
vue.jsのてすと
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | |
</head> | |
<body> | |
<div id="app"> | |
{{ message }} | |
</div> | |
<div id="app-2"> | |
<span v-bind:title="message"> | |
ここにマウスを載せてね。 | |
</span> | |
</div> | |
<div id="app-3"> | |
<span v-if="seen">私が見えますか?</span> | |
</div> | |
<div id="app-4"> | |
<ol> | |
<li v-for="todo in todos"> | |
{{todo.text}} | |
</li> | |
</ol> | |
</div> | |
<div id="app-5"> | |
<p>{{message}}</p> | |
<button v-on:click="reverseMessage">Reverse Message</button> | |
</div> | |
<div id="app-6"> | |
<p>{{message}}</p> | |
<input v-model="message"> | |
</div> | |
<div id="app-7"> | |
<ol> | |
<todo-item v-for="item in grossaryList" :key="item.id" v-bind:todo="item"></todo-item> | |
</ol> | |
</div> | |
<div id="app-8"> | |
<p>{{message}}</p> | |
</div> | |
<script> | |
var app = new Vue({ | |
el: '#app', | |
data: { | |
message: 'Hello, Vue.js.' | |
} | |
}) | |
var app2 = new Vue({ | |
el: '#app-2', | |
data: { | |
message: 'このページをロードした時刻:' + new Date().toLocaleString() | |
} | |
}) | |
var app3 = new Vue({ | |
el: '#app-3', | |
data: { | |
seen: true | |
} | |
}) | |
var app4 = new Vue({ | |
el: '#app-4', | |
data: { | |
todos: [ | |
{ text: "シナリオを書く" }, | |
{ text: "課題研究テーマ決め"} | |
] | |
} | |
}) | |
var app5 = new Vue({ | |
el: '#app-5', | |
data: { | |
message: 'Hello, Vue.js!' | |
}, | |
methods: { | |
reverseMessage: function(){ | |
this.message = this.message.split(' ').reverse().join(' ') | |
} | |
} | |
}) | |
var app6 = new Vue({ | |
el: '#app-6', | |
data: { | |
message: '初期メッセージ' | |
} | |
}) | |
Vue.component( 'todo-item', { | |
props: ['todo'], | |
template: '<li>{{todo.text}}</li>' | |
}) | |
var app7 = new Vue({ | |
el: '#app-7', | |
data: { | |
grossaryList: [ | |
{id: 0, text: '野菜'}, | |
{id: 1, text: '肉'} | |
] | |
} | |
}) | |
var app8 = new Vue({ | |
el: '#app-8', | |
data: { | |
message: 'waiting download...' | |
}, | |
created: function(){ | |
var oReq = new XMLHttpRequest(); | |
oReq.open('GET', 'https://www3.nhk.or.jp/rss/news/cat0.xml'); | |
oReq.onload = () => { | |
this.message = oReq.response; | |
} | |
oReq.send(); | |
} | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment