Vue.jsとは何ですか？
Vue.jsを使用すると、ディレクティブと呼ばれるHTML属性を使用してHTMLを拡張できます。
Vue.jsディレクティブは、HTMLアプリケーションに機能を提供します
Vue.jsは、組み込みのディレクティブとユーザー定義のディレクティブを提供します
Vue.jsディレクティブ
Vue.jsは{{ }}、データのプレースホルダーとして二重中括弧を使用します。
Vue.jsディレクティブは、プレフィックスが付いたHTML属性です v-
サンプルビュー
以下の例では、新しいVueオブジェクトがnew Vue（）で作成されています。
プロパティel：は、新しいVueオブジェクトをid = "app"でHTML要素にバインドします。
例
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.jsバインディング
VueオブジェクトがHTML要素にバインドされている場合、Vueオブジェクトが変更されるとHTML要素が変更されます。
例
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Vue.js双方向バインディング
v-modelディレクティブは、HTML要素の値をアプリケーションデータにバインドします。
これは双方向バインディングと呼ばれます。
例
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.jsループバインディング
ディレクティブを使用してv-forVueオブジェクトの配列をHTML要素の「配列」にバインドします。
例
<div id="app">
<ul>
<li v-for="x in todos">
{{
x.text }}
</li>
</ul>
</div>
<script>
myObject =
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn
JavaScript' },
{ text: 'Learn
Vue.js' },
{ text: 'Build
Something Awesome' }
]
}
})
</script>