Skip to content

Instantly share code, notes, and snippets.

@simics-ja

simics-ja/01-basic.html

Last active March 21, 2019 09:08
Show Gist options
  • Save simics-ja/a7c1426e3f92d4ac95f420d9a31851c8 to your computer and use it in GitHub Desktop.
Save simics-ja/a7c1426e3f92d4ac95f420d9a31851c8 to your computer and use it in GitHub Desktop.
Download ZIP
[Vue.jsの基本ディレクティブまとめ] JS Fiddleで動作確認だ！ #vuejs
Raw
01-basic.html
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
Raw
01-basic.js
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
Raw
02-v-bind.html
<body>
<div id="app">
<!--
この書き方はできないのでv-bindを使う．
<a href="{{url}}">Vue.js</a>
-->
<a v-bind:href="url">Vue.js</a>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Raw
02-v-bind.js
var app = new Vue({
el: '#app',
data: {
url: 'https://jp.vuejs.org'
}
})
Raw
03-v-if.html
<body>
<div id="app">
<!-- v-ifを使うとスイッチするたびにDOM要素ごと書き換わるので，頻繁なスイッチには向かない． -->
<p v-if="toggle">
Hello
</p>
<p v-else>
No message
</p>
<hr />
<p v-if="type === 'A'">
Type = A
</p>
<p v-else-if="type === 'B'">
Type = B
</p>
<p v-else>
Ohter type
</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Raw
03-v-if.js
var app = new Vue({
el: '#app',
data: {
toggle: false,
type: 'B'
}
})
Raw
04-v-show.html
<body>
<div id="app">
<!-- v-showはCSSのdisplayプロパティでスイッチするので，v-ifより処理が軽い． -->
<p v-show="toggle">
{{ message }}
</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Raw
04-v-show.js
var app = new Vue({
el: '#app',
data: {
toggle: false,
message: 'Hello'
}
})
Raw
05-v-for.html
<body>
<div id="app">
<ol>
<li v-for="shout in shouts">{{ shout }}</li>
</ol>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Raw
05-v-for.js
var app = new Vue({
el: '#app',
data: {
shouts: ['way', 'wayway', 'yeah']
}
})
Raw
06-v-on.html
<body>
<div id="app">
<button v-on:click="onclick">
Click me!
</button>
<p v-show="toggle">
Hello
</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Raw
06-v-on.js
var app = new Vue({
el: '#app',
data: {
toggle: false,
},
methods: {
onclick: function() {
this.toggle = !this.toggle;
}
}
})
Raw
07-v-model.html
<body>
<div id="app">
<!-- dataオブジェクトを媒介して片方のinputを書き換えるともう一方の中身も書き換えられる -->
<p>
<input type="text" v-model="message">
</p>
<p>
<input type="text" v-model="message">
</p>
<pre>{{ $data }}</pre>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Raw
07-v-model.js
var app = new Vue({
el: '#app',
data: {
message: 'Hello',
},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment