創建一個 vue 實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入門</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({
el: "#root",
data: {
msg: "Hello, vue.js world!"
}
})
</script>
</body>
</html>
掛載點，模板與實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入門</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
{{msg}}
<!--<h1>Hi, {{msg}}</h1>-->
</div>
<script>
new Vue({
el: "#root",
template: "<h1>Hi, {{msg}}</h1>",
data: {
msg: "Hello, vue.js world!"
}
})
</script>
</body>
</html>
- 實例：使用
new關鍵字，生成一個實例 - 掛載點：實例中
el後面的 dom 元素就是掛載點。 - 模板：實例中
template後面指定的 html 內容就是模板。也可以直接在掛載點的內部
實例中數據，事件與方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入門</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!-- v-on:click 綁定一個 click 事件，處理函數是 handleClick, 它被定義在實例的 methods 中-->
<div v-on:click="handleClick">
{{content}}
<!--<div v-text="content"></div>-->
</div>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "Hello"
},
methods: {
handleClick: function() {
this.content = "world"
}
}
})
</script>
</body>
</html>
數據展示
像這樣通過 {{DATA}} 來傳遞的方式稱爲差值表達式。除了使用差值表達式之外，還可以使用以下方式來綁定：
-
v-text：轉義內容，以文本方式顯示(如<h1>Hello</h1>顯示<h1>Hello</h1>) -
v-html：不轉義內容，以 html 方式顯示(如<h1>Hello</h1>顯示粗體的Hello)
綁定事件
v-on:ACTION="FUNC"：點擊後執行某操作，FUNC 函數定義在實例的 methods 中。其中 v-on: 可以簡寫成 @ 符號，即可以等價爲 @ACTION="FUNC"，如：@click="handleClick"
方法定義
方法寫在 vue 實例的 methods 後面，要操作原 dom 的值使用 this 關鍵字。
原來我們操作 html 內容時，是面向 dom 元素去編程，現在在 vue 中我們是面向 data 數據編程。當 data 發生改變，頁面自動就會發生變化
屬性綁定和雙向數據綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性綁定和雙向數據綁定</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!--模板內容-->
<div v-bind:title="title">hello world</div>
<input v-model="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
title: "this is hello world",
content: "this is content"
}
})
</script>
</body>
</html>
title 是 html 的一個屬性，功能是當鼠標放到內容上，顯示 title 後面的值，起到提示的作用。
屬性綁定
v-bind:ATTR="xxx" 模板指令用於綁定 html 屬性。模板指令等號(=)後面跟的是一個 js 表達式，在裏面可以寫 js。其中 v-bind: 可以簡寫成 :。
雙向數據綁定
-
單向綁定：數據決定頁面顯示，但頁面無法影響數據內容。 -
雙向綁定：頁面內容發生改變時，數據也會被改變。data 發生改變了，頁面顯示內容也發生改變。
想要實現雙向綁定，就要使用：v-model 模板指令，它包含了屬性綁定的功能。
計算屬性和偵聽器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算屬性和偵聽器</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!--模板內容-->
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: "",
lastName: "",
count: 0,
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
},
watch: {
//firstName: function() {
// this.count ++
//},
//lastName: function() {
// this.count ++
//}
fullName: function() {
this.count ++
}
}
})
</script>
</body>
</html>
計算屬性
在實例中使用 computed 計算屬性是指一個屬性是通過其他屬性計算而來。在以上實例中我們使用 computed 來計算生成 fullName。computed 會使用上一次的緩存，只有當一個或多個屬性值發生變化是它纔會重新計算。
偵聽器
場景：當我們修改 firstName 或 lastName 後，count 就增加 1，如何來實現呢？
我們使用 watch 偵聽器，它是指去偵聽某一個數據的變化，一量數據發生變化，就可以在偵聽器裏做相關業務邏輯操作。
v-if, v-show 與 v-for 指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if, v-show 與 v-for 指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!--模板內容-->
<div v-show="show">hello world</div>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="(index, item) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true,
list: [1, 2, 3]
}
methods: {
handleClick: function() {
this.show = !this.show
}
}
})
</script>
</body>
</html>
點擊 toggle 按鈕來顯示/隱藏 hello world。
v-if 和 v-show
-
v-if：是否存在，添加/刪除 dom 元素。 -
v-show：是否顯示，顯示/隱藏 dom 元素，display:none。
v-for
將數據循環展示到頁面中，添加 key 值會提高渲染性能。key 值的要求是必須在每次循環中唯一。