ã¬ã¤ã
åºæ¬çãªä½¿ãæ¹
- ã¤ã³ã¹ãã¼ã«
- ã¯ããã«
- Vue ã¤ã³ã¹ã¿ã³ã¹
- ãã³ãã¬ã¼ãæ§æ
- ç®åºããããã£ã¨ã¦ã©ããã£
- ã¯ã©ã¹ã¨ã¹ã¿ã¤ã«ã®ãã¤ã³ãã£ã³ã°
- æ¡ä»¶ä»ãã¬ã³ããªã³ã°
- ãªã¹ãã¬ã³ããªã³ã°
- ã¤ãã³ããã³ããªã³ã°
- ãã©ã¼ã å ¥åãã¤ã³ãã£ã³ã°
- ã³ã³ãã¼ãã³ãã®åºæ¬
ã³ã³ãã¼ãã³ãã®è©³ç´°
- ã³ã³ãã¼ãã³ãã®ç»é²
- ããããã£
- ã«ã¹ã¿ã ã¤ãã³ã
- ã¹ããã
- åç & éåæã³ã³ãã¼ãã³ã
- ç¹å¥ãªåé¡ã«å¯¾å¦ãã
ãã©ã³ã¸ã·ã§ã³ã¨ã¢ãã¡ã¼ã·ã§ã³
- Enter/Leave ã¨ãã©ã³ã¸ã·ã§ã³ä¸è¦§
- ç¶æ ã®ãã©ã³ã¸ã·ã§ã³
åå©ç¨ã¨æ§æ
- ããã¯ã¹ã¤ã³
- ã«ã¹ã¿ã ãã£ã¬ã¯ãã£ã
- æç»é¢æ°ã¨JSX
- ãã©ã°ã¤ã³
- ãã£ã«ã¿ã¼
ãã¼ã«
- åä¸ãã¡ã¤ã«ã³ã³ãã¼ãã³ã
- ãã¹ã
- TypeScript ã®ãµãã¼ã
- ãããã¯ã·ã§ã³ç°å¢ã¸ã®é ä¿¡
ã¹ã±ã¼ã«ã¢ãã
- ã«ã¼ãã£ã³ã°
- ç¶æ 管ç
- ãµã¼ããµã¤ãã¬ã³ããªã³ã°
- ã»ãã¥ãªãã£
å é¨
- ãªã¢ã¯ãã£ãã®æ¢æ±
移è¡
- Vue 1.x ããã®ç§»è¡
- Vue Router 0.7.x ããã®ç§»è¡
- Vuex 0.6.x ãã 1.0 ã¸ã®ç§»è¡
ãã®ä»
- ä»ã®ãã¬ã¼ã ã¯ã¼ã¯ã¨ã®æ¯è¼
- Vue.js ã³ãã¥ããã£ã¸åå ãã¾ããã!
- ãã¼ã ã«ä¼ãã
v2.x 以åã®ããã¥ã¡ã³ãã§ãã v3.x ã®ããã¥ã¡ã³ããè¦ããå ´åã¯ãã¡ã
ã¯ããã«
æçµæ´æ°æ¥: 2020å¹´11æ7æ¥
Vue.js ã¨ã¯ï¼
Vue (çºé³ã¯ / v j u Ë / ã view ã¨åæ§ï¼ã¯ã¦ã¼ã¶ã¼ã¤ã³ã¿ã¼ãã§ã¤ã¹ãæ§ç¯ããããã®ããã°ã¬ãã·ããã¬ã¼ã ã¯ã¼ã¯ã§ããä»ã®ä¸ææ¿(ã¢ããªã·ãã¯: monolithic)ãªãã¬ã¼ã ã¯ã¼ã¯ã¨ã¯ç°ãªããVue ã¯å°ããã¤é©ç¨ãã¦ãããããã«è¨è¨ããã¦ãã¾ããä¸æ ¸ã¨ãªãã©ã¤ãã©ãªã¯ view 層ã ãã«ç¦ç¹ãå½ã¦ã¦ãã¾ãããã®ããã使ãå§ããã®ããä»ã®ã©ã¤ãã©ãªãæ¢åã®ããã¸ã§ã¯ãã«çµ±åããã®ããã¨ã¦ãç°¡åã§ããã¾ããã¢ãã³ãªãã¼ã«ããµãã¼ãã©ã¤ãã©ãªã¨ä½µç¨ãããã¨ã§ãæ´ç·´ãããã·ã³ã°ã«ãã¼ã¸ã¢ããªã±ã¼ã·ã§ã³ã®éçºãå¯è½ã§ãã
ããªãã Vue ã«ã¤ãã¦ãã£ã¨æ·±ãå¦ã¶åã«æ¦è¦ãç¥ãããã®ãªããä¸æ ¸ã¨ãªãååã¨ãµã³ãã«ããã¸ã§ã¯ããå ã«èª¬æãããããªãä½æãã¦ããã®ã§ããããè¦ãã¨ããã§ãããã
ããªããçµé¨è±å¯ãªããã³ãã¨ã³ãéçºè ã§ã Vue.js ã¨ä»ã®ã©ã¤ãã©ãª/ãã¬ã¼ã ã¯ã¼ã¯ãæ¯è¼ãããå ´åãä»ã®ãã¬ã¼ã ã¯ã¼ã¯ã¨ã®æ¯è¼ã確èªãã¦ãã ããã
ã¯ããã«
å ¬å¼ã¬ã¤ãã¯ãHTMLãCSS ãã㦠JavaScript ã®ä¸ã¬ãã«ã®ããã³ãã¨ã³ãã®ç¥èãåæã«ãã¦ãã¾ããããã³ãã¨ã³ãã®éçºãåãã¦ã§ãããªãã°ãæåã®ã¹ãããã¨ãã¦ããã¬ã¼ã ã¯ã¼ã¯ã«ç´æ¥å ¥éããã®ã¯è¯ãã¢ã¤ãã¢ã§ã¯ãªãããããã¾ãããåºç¤ãå¦ãã§æ»ã£ã¦ãã¾ãããï¼ä»ã®ãã¬ã¼ã ã¯ã¼ã¯ã§ã®ä»¥åã®çµé¨ã¯å½¹ã«ç«ã¡ã¾ãããå¿ é ã§ã¯ããã¾ããã
Vue.js ã試ãã«ã¯ãHello World example ãæãç°¡åã§ããæ°è»½ã«ä»ã®ã¿ããéãã¦ãåºæ¬çãªä¾ã試ãã¦ã¿ã¾ãããããããã¯ãåç´ã« index.html
ãä½æã ã以ä¸ã®ã³ã¼ã㧠Vue ãå°å
¥ãããã¨ãã§ãã¾ã:
<!-- éçºãã¼ã¸ã§ã³ã便å©ãªã³ã³ã½ã¼ã«ã®è¦åãå«ã¾ãã¦ãã¾ã -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
or:
<!-- æ¬çªãã¼ã¸ã§ã³ããµã¤ãºã¨é度ã®ããã«æé©åããã¦ãã¾ã -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
Vue ã®ä»ã®ã¤ã³ã¹ãã¼ã«æ¹æ³ã«ã¤ãã¦ãã¤ã³ã¹ãã¼ã« ãã¼ã¸ã§ç´¹ä»ãã¦ãã¾ãã注æç¹ã¨ãã¦ãåå¿è
ã vue-cli
ã§å§ãããã¨ã¯æ¨å¥¨ãã¾ããï¼ç¹ã«ãNode.js ãã¼ã¹ã®ãã¼ã«ã«ã¤ãã¦ã¾ã 詳ãããªãå ´åï¼ã
ããã¤ã³ã¿ã©ã¯ãã£ãã«å¦ã³ããå ´åãã¹ã¯ãªã¼ã³ãã£ã¹ãã¨ãã¤ã§ãä¸æåæ¢ãã¦ã³ã¼ãã試ããç°å¢ãçµã¿åãããã Scrimba ã®ä¸é£ã®ãã¥ã¼ããªã¢ã« ãå©ç¨å¯è½ã§ãã
宣è¨çã¬ã³ããªã³ã°
Vue.js ã®ã³ã¢ã¯ãåç´ãªãã³ãã¬ã¼ãæ§æã使ã£ã¦å®£è¨çã«ãã¼ã¿ã DOM ã«æç»ãããã¨ãå¯è½ã«ããã·ã¹ãã ã§ã:
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
ããã§åãã¦ã® Vue ã¢ããªã±ã¼ã·ã§ã³ãä½æã§ãã¾ããï¼ä¸è¦ããã¨ãã ãã³ãã¬ã¼ããæç»ãã¦ããããã«è¦ãã¾ãããVue.js ã¯å
é¨ã§å¤ãã®ä½æ¥ãè¡ã£ã¦ãã¾ãããã¼ã¿ã¨ DOM ã¯é¢é£ä»ããããããã¦å
¨ã¦ããªã¢ã¯ãã£ãã«ãªã£ã¦ãã¾ããã©ã®ããã«ãã¦ãããåããã®ã§ããããï¼ãã©ã¦ã¶ã® JavaScript ã³ã³ã½ã¼ã«ãéãã¦ãapp.message
ã®å¤ãå¤ãã¦ã¿ã¾ããããæç»ããããµã³ãã«ããä¸è¨ã«å¿ãã¦æ´æ°ãããã®ã確èªã§ããã§ãããã
ããã§ãã HTML ãç´æ¥æä½ããå¿
è¦ããªããã¨ã«æ³¨æãã¦ãã ãããVue ã¢ããªã±ã¼ã·ã§ã³ã¯ãèªèº«ãåä¸ã® DOM è¦ç´ (ä¸ã®ä¾ã§ã¯ #app
è¦ç´ ) ã«ã¢ã¿ããããå®å
¨ã«å¶å¾¡ãã¾ããHTML ã¯ã¨ã³ããªãã¤ã³ãã«ã¯ãªãã¾ãããã»ãã®ãã¹ã¦ã®ãã¨ã¯æ°ããä½ããã Vue ã¤ã³ã¹ã¿ã³ã¹ã®ä¸ã§èµ·ããã¾ãã
æååã®å±éã«å ãã¦ã以ä¸ã®ããã«è¦ç´ ã®å±æ§ãæç¸ï¼ãã¤ã³ãã£ã³ã°ï¼ãããã¨ãã§ãã¾ã:
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
ããã§æ°ããå±æ§ãåºã¦ãã¾ãããv-bind
å±æ§ã¯ãã£ã¬ã¯ãã£ãã¨å¼ã°ãã¦ãã¾ãããã£ã¬ã¯ãã£ã㯠Vue.js ã«ãã£ã¦æä¾ãããç¹å¥ãªå±æ§ã示ãããã« v-
æ¥é è¾ãã¤ãã¦ãã¾ããããã¯ããªãã®æ¨æ¸¬éããæç»ããã DOM ã«ç¹å®ã®ãªã¢ã¯ãã£ããªæ¯èããä¸ãã¾ããããã§å®£è¨ããã¦ããã®ã¯ãããã®è¦ç´ ã® title
å±æ§ã Vue ã¤ã³ã¹ã¿ã³ã¹ã® message
ããããã£ã«ãã£ã¦æ´æ°ãã¦ä¿åãããã¨ãããã¨ã«ãªãã¾ãã
åã³ JavaScript ã³ã³ã½ã¼ã«ãéãã¦ãapp2.message = 'some new message'
ãæã¡è¾¼ãã¨ãããä¸åº¦æç¸ãããHTMLï¼ãã®ã±ã¼ã¹ã§ã¯ title
å±æ§ï¼ãæ´æ°ãããã®ã確èªã§ããã§ãããã
æ¡ä»¶åå²ã¨ã«ã¼ã
è¦ç´ ã®æç¡ãåãæ¿ãããã¨ãé常ã«ã·ã³ãã«ã«ã§ãã¾ã:
<div id="app-3">
<span v-if="seen">Now you see me</span>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
ã³ã³ã½ã¼ã«ãã app3.seen = false
ãå
¥åãã¦ã¿ã¾ããããã¡ãã»ã¼ã¸ãæ¶ããã¯ãã§ãã
ãã®ä¾ã¯ãããã¹ãããã¼ã¿ã«æç¸ã§ããã ãã§ã¯ãªãã DOM ã®æ§é ã«ãã¼ã¿ãæç¸ã§ãããã¨ã示ãã¦ãã¾ããããã« Vue ã¯ãè¦ç´ ã Vue ã«ãã£ã¦æ¿å ¥/æ´æ°/åé¤ãããã¨ããèªåçã«ãã©ã³ã¸ã·ã§ã³ã¨ãã§ã¯ã(é·ç§»å¹æ)ãé©ç¨ã§ããå¼·åãªãã©ã³ã¸ã·ã§ã³å¹æã·ã¹ãã ãæä¾ãã¾ãã
Vue.js ã«ã¯ããªãã®æ°ã®ãã£ã¬ã¯ãã£ãããããããããç¬èªã«ç¹å¥ãªæ©è½ãæã£ã¦ãã¾ããä¾ãã°ãv-for
ãã£ã¬ã¯ãã£ãã使ãã°ã¢ã¤ãã ã®ãªã¹ããé
åå
ã®ãã¼ã¿ã使ã£ã¦è¡¨ç¤ºãããã¨ãã§ãã¾ã:
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
- {{ todo.text }}
ã³ã³ã½ã¼ã«ã§ app4.todos.push({ text: 'New item' })
ã¨å
¥åãã¦ã¿ã¾ãããããªã¹ãã«æ°ããã¢ã¤ãã ã追å ãããã¯ãã§ãã
ã¦ã¼ã¶ã¼å ¥åã®å¶å¾¡
ã¦ã¼ã¶ã¼ãããªãã®ã¢ããªã±ã¼ã·ã§ã³ã¨å¯¾è©±ã§ããããã«ãv-on
ãã£ã¬ã¯ãã£ãã使ã£ã¦ã¤ãã³ããªã¹ããå ããVue ã¤ã³ã¹ã¿ã³ã¹ã®ã¡ã½ãããå¼ã³åºããã¨ãã§ãã¾ã:
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
{{ message }}
reverseMessage
ã¡ã½ããã®ä¸ã§ã¯ DOM æä½ãè¡ã£ã¦ãã¾ãããã¢ããªã±ã¼ã·ã§ã³ã®ç¶æ
ã®ã¿ãæ´æ°ãã¦ãããã¨ã«æ³¨æãã¦ãã ããããã¹ã¦ã® DOM æä½ã Vue ã«ä»»ããããã®ã§ãèå¾ã®ãã¸ãã¯ãæ¸ããã¨ã«éä¸ãããã¨ãã§ãã¾ãã
Vue ã¯å
¥åã¨ã¢ããªã±ã¼ã·ã§ã³ã®ç¶æ
ã®ãåæ¹åãã¤ã³ãã£ã³ã°ããç°¡åã«è¡ãã v-model
ãã£ã¬ã¯ãã£ããæä¾ãã¾ã:
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
{{ message }}
ã³ã³ãã¼ãã³ãã«ããæ§æ
ã³ã³ãã¼ãã³ãã·ã¹ãã 㯠Vue.js ã«ãããããã²ã¨ã¤ã®éè¦ãªæ½è±¡æ¦å¿µã§ãããå°ãããèªå·±å®çµçã§ãï¼å¤ãã®å ´åï¼åå©ç¨å¯è½ãªã³ã³ãã¼ãã³ãããçµã¿åããããã¨ã§ã大è¦æ¨¡ã¢ããªã±ã¼ã·ã§ã³ãæ§ç¯ãããã¨ãå¯è½ã«ãªãã¾ããã¢ããªã±ã¼ã·ã§ã³ã®ã¤ã³ã¿ã¼ãã§ã¤ã¹ã«ã¤ãã¦èãã¦ã¿ãã¨ãã»ã¼ãã¹ã¦ã®ã¿ã¤ãã®ã¤ã³ã¿ã¼ãã§ã¤ã¹ã¯ã³ã³ãã¼ãã³ãããªã¼ã¨ãã¦æ½è±¡åãããã¨ãã§ãã¾ã:
Vue ã«ããã¦ã¯ããã³ã³ãã¼ãã³ããã¯æ¬è³ªçã«ã¯ãããããå®ç¾©ããããªãã·ã§ã³ãæ㤠Vue ã¤ã³ã¹ã¿ã³ã¹ã§ããVue ã使ã£ã¦ã³ã³ãã¼ãã³ããç»é²ããã®ã¯ããã£ã¦ç°¡åã§ã:
// todo-item ã¨å¼ã°ããæ°ããã³ã³ãã¼ãã³ããå®ç¾©
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
var app = new Vue(...)
ããã§ä»ã®ã³ã³ãã¼ãã³ãã®ãã³ãã¬ã¼ããããã®ã³ã³ãã¼ãã³ããå©ç¨ã§ããããã«ãªãã¾ã:
<ol>
<!-- todos é
åã«ããå todo ã«å¯¾ã㦠todo-item ã³ã³ãã¼ãã³ãã®ã¤ã³ã¹ã¿ã³ã¹ãä½æãã -->
<todo-item></todo-item>
</ol>
ããããããã§ã¯å ¨ã¦ã® todo ã§åãããã¹ããæç»ããã¦ãã¾ãã ãã§ããã¾ãé¢ç½ãããã¾ããã親ã®ã¹ã³ã¼ãããåã³ã³ãã¼ãã³ãã¸ã¨ãã¼ã¿ã渡ããããã«ãã¹ãã§ããããããã£ãåãåããããã«ã³ã³ãã¼ãã³ãã®å®ç¾©ãå¤ãã¦ã¿ã¾ããã:
Vue.component('todo-item', {
// todo-item ã³ã³ãã¼ãã³ãã¯ã«ã¹ã¿ã å±æ§ã®ãã㪠"ããããã£" ã§åãåãã¾ãã
// ãã®ããããã£ã¯ todo ã¨å¼ã°ãã¾ãã
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
ãããããã¨ã§ãç¹°ãè¿ãããã³ã³ãã¼ãã³ãããããã« v-bind
ã使ã£ã¦ todo ã渡ããã¨ãã§ãã¾ã:
<div id="app-7">
<ol>
<!--
å todo-item ã®å
容ã表ã todo ãªãã¸ã§ã¯ããä¸ãã¾ãã
ããã«ããå
容ã¯åçã«å¤åãã¾ãã
ã¾ãå¾è¿°ãã "key" ãåã³ã³ãã¼ãã³ãã«æä¾ããå¿
è¦ãããã¾ãã
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
ãã®ãµã³ãã«ã¯ä¸èªç¶ã§ã¯ããã¾ãããã¢ããªã±ã¼ã·ã§ã³ãããå°ããªåä½ã«åå²ãããã¨ã«æåããã¾ãããããã£ã®ã¤ã³ã¿ã¼ãã§ã¤ã¹ã«ãã£ã¦åã³ã³ãã¼ãã³ãã¯é©åã«ççµåãªç¶æ
ã«ãªãã¾ãããããããããã« <todo-item>
ã³ã³ãã¼ãã³ãããããè¤éãªãã³ãã¬ã¼ãããã¸ãã¯ã使ã£ã¦ã親ã³ã³ãã¼ãã³ãã«å½±é¿ãä¸ãããã¨ãªãæ¹è¯ãããã¨ãã§ãã¾ãã
大è¦æ¨¡ãªã¢ããªã±ã¼ã·ã§ã³ã§ã¯ãéçºãè¡ããããããããã«ãã¢ããªã±ã¼ã·ã§ã³å ¨ä½ãã³ã³ãã¼ãã³ãã«åå²ãããã¨ãå¿ è¦ã§ããã³ã³ãã¼ãã³ãã«ã¤ãã¦ã¯ã¬ã¤ãã®å¾åã§ãã詳ãã話ãã¾ãããã³ã³ãã¼ãã³ããé§ä½¿ãã(æ¶ç©ºã®)ã¢ããªã±ã¼ã·ã§ã³ã®ãã³ãã¬ã¼ããã©ããããã®ã«ãªãããããã«è¼ãã¦ããã¾ã:
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
ã«ã¹ã¿ã è¦ç´ ã¨ã®é¢ä¿
Vue ã®ã³ã³ãã¼ãã³ãã Web Components Spec ã®ä¸é¨ã®ãã«ã¹ã¿ã è¦ç´ (Custom Element)ãã«ããä¼¼ã¦ãããã¨ã«æ°ä»ããããããã¾ããããã㯠Vue ã®ã³ã³ãã¼ãã³ãæ§æ㯠Web Components ãææ¬ã«ãã¦ããããã§ããä¾ãã°ãVue ã³ã³ãã¼ãã³ã㯠Slot API 㨠is
ã¨ããç¹å¥ãªå±æ§ãå®è£
ãã¦ãã¾ããããããªãããããã¤ãéè¦ãªéããããã¾ã:
Web Components ã®ä»æ§ã¯ç¢ºå®ãã¾ããããå ¨ã¦ã®ãã©ã¦ã¶ã«ãã¤ãã£ãå®è£ ããã¦ããããã§ã¯ããã¾ãããSafari 10.1 以ä¸ãChrome 54 以ä¸ãFirefox 63 以ä¸ã Web Components ããã¤ãã£ãã§ãµãã¼ããã¦ãã¾ããä¸æ¹ãVue ã³ã³ãã¼ãã³ãã¯ã©ããªããªãã£ã« (polyfill) ãå¿ è¦ã¨ããããµãã¼ããããå ¨ã¦ã®ãã©ã¦ã¶ (IE9 ã¨ãã以ä¸) ã§åãåä½ããã¾ããå¿ è¦ã«å¿ãã¦ãVue ã³ã³ãã¼ãã³ãã¯ãã¤ãã£ããªã«ã¹ã¿ã è¦ç´ å ã§æ±å (wrap) ãããã¨ãã§ãã¾ãã
Vue ã³ã³ãã¼ãã³ãã¯ãã¯ãã¹ã³ã³ãã¼ãã³ããã¼ã¿ããã¼ãã¯ãããã«ã¹ã¿ã ã¤ãã³ãéä¿¡ããã«ããã¼ã«ã¨ã®çµ±åãªã©ããã¬ã¼ã³ãªã«ã¹ã¿ã è¦ç´ å ã§ã¯å©ç¨ã§ããªãããã¤ãã®éè¦ãªæ©è½ãæä¾ãã¾ãã
Vue ã¯å é¨çã«ã¯ã«ã¹ã¿ã è¦ç´ ã使ã£ã¦ãã¾ããããã«ã¹ã¿ã è¦ç´ ã¨ãã¦ä½¿ç¨ã¾ãã¯é å¸ããå ´åã«ã¯ãåªããç¸äºéç¨æ§ ãããã¾ããVue CLI ã¯ãèªåèªèº«ããã¤ãã£ãã®ã«ã¹ã¿ã è¦ç´ ã¨ãã¦ç»é²ãããã㪠Vue ã³ã³ãã¼ãã³ãã®æ§ç¯ããµãã¼ããã¦ãã¾ãã
æºåãã§ãã¾ãããï¼
Vue.js ã®ã³ã¢ã®åºæ¬çãªæ©è½ã«ã¤ãã¦ç°¡åã«ç´¹ä»ãã¾ãããããã®ã¬ã¤ãã®æ®ãã®é¨åã§ã¯ãåºæ¬çãªæ©è½ã ãã§ãªãä»ã®é«åº¦ãªæ©è½ã«ã¤ãã¦ãã£ã¨è©³ããæ±ãã®ã§ãå ¨ã¦ã«ç®ãéãããã«ãã¦ãã ããï¼
Video by Vue Mastery. Watch Vue Masteryâs free Intro to Vue course.