1小時入門Vue
Vue基礎語法
輸出hello world
首先在一個標準html中建立一個vue.js，而後引入，最終代碼以下：html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue學習</title>
<script src="./vue.js"></script>
</head>
<div id="root">{{ content }}</div>
<script>
new Vue({
el: "#root",
data: {
content: "hello world"
}
})
</script>
</html>
- **掛載點：**這裏的
<div id="root">{{ content }}</div>指的就是vue實例掛載點，由於el中的#id元素是和上面的id是對應的，vue實例只會處理掛載點裏面的內容，若是把{{ content }}放在掛載點外，則是無效的。 - **模版：**在掛載點內部的內容叫作模版，也能夠把模版也在實例中：
<div id="root"></div>
<script>
new Vue({
el: "#root",
template: "<h1>{{ content }}</h1>",
data: {
content: "hello world"
}
})
</script>
- **實例:**用
new Vue能夠建立一個實例，而vue就會根據你的掛載點el和template來最終最終的內容，而後把內容放在掛載點上
另外，data中的content是隨便定義的，你也能夠叫number、msg，都是能夠的，而後用{{對應的結果值}}就能夠輸出了，這種表達式叫插值表達式vue
vue指令
數據展現
接下來講下vue中的指令，上面的hello world咱們能夠用指令輸出：數組
<div id="root">
<div v-text="content"></div>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "hello world"
}
})
</script>
</html>
v-text是<h1>中的內容由content這個變量和指定，他告訴div你顯示這個content這個變量，也能夠用v-html來寫，那他們倆有何區別呢？緩存
<div id="root">
<div v-text="content"></div>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "<h1>hello world</h1>"
}
})
</script>
這個例子中你能夠將v-text替換成v-html測試下，會發現v-text會直接輸出content中的內容<h1>hello world</h1>,進行了轉譯，而v-html不會將其轉譯，也就有了<h1>標籤的效果dom
綁定指令
若是我想在頁面上點擊hello，而後讓hello變成world，應該如何作呢？這就要用的vue中的v-on指令，代碼以下:ide
<div id="root">
<div v-on:click="handleClick">{{ content }}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "hello"
},
methods: {
handleClick: function () {
this.content = "world"
}
}
})
</script>
- 首先是在<div>標籤上綁定了click事件，當這個事件被觸發的時候，就會調用你定義的handleClick事件，這個方法定義在vue實例中的
methods這個對象裏，只要把handleClick寫在methods，就會自動執行這個方法 - 由於改變vue中的數據跟咱們以前的直接操做Dom不一樣，這裏是直接改變數據的：
this.content = "world"，由於vue會自動幫你去更新Dom this.content是你在data下定義的contentv-on:click能夠簡寫爲@click
屬性和雙向數據綁定
屬性綁定
<div>上能夠增長title屬性，這樣就能夠在觸碰hello world的時候，就會有一個title提示，提示語如何可變呢，咱們能夠在data中定義一個title，而後用`v-bind`來和data的數據項(title)進行綁定： ``` <div id="root" v-bind:title="title">hello world</div> <script> new Vue({ el: "#root", data: { title: "i am a title" } }) </script> ``` * `v-bind`能夠簡寫成`:` #### 雙向數據綁定性能
<div id="root">
<div :title="title">hello world</div>
<input />
<div>{{ content }}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
title: "i am a title",
content: "this is a content"
}
})
</script>
這裏先說下單項綁定，單項綁定的意思，也就是這裏的content裏的數據是由data 下定義的數據(content)來決定的，可是div這裏的內容並不能夠改變，也就是數據決定頁面的顯示，可是頁面沒法決定你數據裏的內容，這裏想經過<input>的值來去改變data下content的值，這就須要用到雙向綁定的語法:v-model了學習
<div id="root">
<div :title="title">hello world</div>
<input v-model="content" />
<div>{{ content }}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
title: "i am a title",
content: "this is a content"
}
})
</script>
vue中的計算屬性和偵聽器
計算屬性
若是我想實現經過在兩個文本框中分別輸入姓 和 名，而後在下面的div中顯示完整的姓名，由於我學過雙向綁定了，我可能會用v-model來去解決這個問題，代碼以下：測試
<div id="root">
姓：<input v-model="firstName" />
名：<input v-model="lastName" />
<div>{{ firstName }}{{ lastName }}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: ''
}
})
</script>
可是這樣寫，太複雜了，由於我會用兩個插值表達式：{{ firstName }}和{{ lastName }}，那有沒有好的方法嗎？代碼以下：優化
<div id="root">
姓：<input v-model="firstName" />
名：<input v-model="lastName" />
<div>{{ fullName }}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: ''
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
這裏用到了vue中的computed計算屬性，會把兩個值(firstName和lastName)來計算一個新值(fullName)，computed有一個好處，就是當你(firstName和lastName)的值若是沒發生變化，不會從新計算，那會取上一次計算的緩存值，只有當firstName和lastName其中一個值發生改變的時候，纔會從新計算，因此說computed的性能仍是很高的
偵聽器
若是我有一個需求，當你firstName或者lastName發生改變的時候，在頁面下方的一個count值會加1，這要如何作呢，這要用到vue中的偵聽器watch，代碼以下：
<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 ++
}
}
})
</script>
偵聽器是我去針對某一個數據的變化，一旦這個數據發生改變，我就能夠去watch中去加上個人業務邏輯，可是這樣寫仍是有點複雜，能夠這樣優化，代碼以下：
<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: {
fullName: function() {
this.count ++
}
}
})
</script>
我去監聽一個計算屬性的變化
其餘一些重要的指令
需求：我有一個div，div中內容是hello world，下方有一個button，button名字叫toggle，我能夠經過這個button來控制hello world的顯示和隱藏，也就是當有hello world的時候，我點擊toggle隱藏，再次點擊，就會隱藏
v-if
<div id="root">
<div v-if="show">hello world</div>
<button @click="handleCLick">toggle</button>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleCLick: function() {
this.show = !this.show
}
}
})
</script>
這裏會根據show屬性爲true或者false來進行顯示和隱藏，在頁面查看元素也就是當爲true就刪除dom，爲false就新增dom
v-show
<div id="root">
<div v-show="show">hello world</div>
<button @click="handleCLick">toggle</button>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleCLick: function() {
this.show = !this.show
}
}
})
</script>
在頁面查看元素會發現，v-show是控制了hello world的這個div的顯示和隱藏(display屬性會變成none)，若是頻繁點擊，推薦用v-show，由於不會頻繁操做dom
v-for
而v-for是當我有一個數據進行循環展現的時候用到的，好比一個數組[1, 2, 3]：
<div id="root">
<div v-show="show">hello world</div>
<button @click="handleCLick">toggle</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true,
list: [1, 2, 3]
},
methods: {
handleCLick: function() {
this.show = !this.show
}
}
})
</script>
- 這裏的
v-for="item in list"換成v-for="item of list"是同樣的效果，都是能夠的
更多文檔
- 1. 1小時入手vue
- 2. vue入門1
- 3. vue 入門小結
- 4. 1 小時 SQL 極速入門（二）
- 5. 1 小時 SQL 極速入門（一）
- 6. 1 小時 SQL 極速入門(三）
- 7. 1小時ASP入門，很是簡單
- 8. VUE 入門基礎(1)
- 9. Vue入門知識（1）
- 10. VUE入門實踐（1）
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Neo4j數據庫入門教程 - NoSQL教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 1小時入手vue
- 2. vue入門1
- 3. vue 入門小結
- 4. 1 小時 SQL 極速入門（二）
- 5. 1 小時 SQL 極速入門（一）
- 6. 1 小時 SQL 極速入門(三）
- 7. 1小時ASP入門，很是簡單
- 8. VUE 入門基礎(1)
- 9. Vue入門知識（1）
- 10. VUE入門實踐（1）