0%

Vue 筆記 - Vue 的實體與特性

vue.js

Vue 的實體

Vue 的實體是透過 new 這個關鍵字來建立的。

1
2
3
var app = new Vue({
//實體屬性
});

Vue 的起手式

在 body 中的第一個 <div> 標籤中給一個 id,並且在實體中,先寫入一個 el (element 的意思),會與 HTML 中 id 標籤名稱相同,下方給一個 data 的物件。

注意:在實體屬性中,是物件的表示方式。

所以起手式如下:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">

</div>

<script>
var vm = new Vue({
el:'#app',
data: {
//資料內容
},
})
</script>

Vue 的實體基本屬性

1
2
3
4
5
6
7
8
9
10
var vm = new Vue({
el: "#app", //用來掛載 Vue 實體元素
data: { }, //要綁定的資料
props: { }, //接收外部資料的屬性
methods: { }, //定義 vue 實體內使用的函式
watch: { }, //觀察實體內資料變動
computed: { }, //自動計算的屬性
template: "...", //提供 Vue 變更後的樣板
component: { } //定義子元素
});

el 與 data 的詳述

el

用來把 vue 實體與網頁 DOM 元素做綁定的關鍵實體,當 vue 實體沒有 el 屬性時,就只能透過 vm.$mount()手動編譯。

data

用來存放與實體綁定的資料,當實體建立後,可能過 vm.\$data`` 取得 data 內的資料,實體內則是用 this.xxx 取得。在子元件時,需要用 function() 的形式回傳。

data 內的屬性開頭名稱不可以為 $_

實際操作

今天透過 Vue 建立一個 hello Vue!

1
2
3
4
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message">
</div>
1
2
3
4
5
6
7
8
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'hello! Vue!',
},
})
</script>
  • 概念有點像 ES6,變數中給予什麼內容,透過大括號會呈現在網頁上。
  • 使用 v-model 建立資料,對應到 datamessage 的內容,就會渲染在網頁上。

因為 inputp 段落都是使用相同的資料,所以在 input 輸入新的資料, p 段落會跟著更新。

CodePen