Created
October 5, 2018 09:22
-
-
Save suzusime/fbf8ab19d2af9159f2a23e8eee22f4d3 to your computer and use it in GitHub Desktop.
sample_vue
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