Vue.jsラーニングItem 1-クイックスタート
6401 ワード
Vueデータバインドのクイックガイドで始めます.詳細な概要に興味がある場合は、このブログを参照してください.
試してみるjsの最も簡単な方法はJSPedble Hello Worldの例を使用することです.ブラウザの新しいラベルページで開き、基本的な例をいくつか確認します.パッケージマネージャでダウンロード/インストールが好きな場合は、インストールチュートリアルを表示します.
Hello World
双方向バインド
レンダーリスト(Render List)
ユーザー入力の処理
統合
前例がVueにjsの動作原理には基礎概念がある.私はあなたが今多くの疑問を持っていることを知っています.続けて読んで、後のチュートリアルで一つ一つ答えます.
試してみるjsの最も簡単な方法はJSPedble Hello Worldの例を使用することです.ブラウザの新しいラベルページで開き、基本的な例をいくつか確認します.パッケージマネージャでダウンロード/インストールが好きな場合は、インストールチュートリアルを表示します.
Hello World
<div id="app">
{{ message }}
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
双方向バインド
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
レンダーリスト(Render List)
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
})
ユーザー入力の処理
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
統合
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
{ text: 'Add some todos' }
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({ text: text })
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
})
前例がVueにjsの動作原理には基礎概念がある.私はあなたが今多くの疑問を持っていることを知っています.続けて読んで、後のチュートリアルで一つ一つ答えます.