創建一個 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 值的要求是必須在每次循環中唯一。