Vue快速入門（一）
阿新 • • 發佈：2022-04-11
目錄
Vue快速入門（一）
介紹
Vue.js 是什麼
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架
版本
- 主流：2.x
- 最新：3.x
官網教程：https://cn.vuejs.org/v2/guide/instance.html
特點
- 採用元件化模式，提高程式碼複用率、且讓程式碼更好維護
- 宣告式編碼，讓編碼人員無需直接操作DOM，提高開發效率
- 使用虛擬DOM+優秀的Diff演算法，儘量複用DOM節點
M-V-VM思想
MVVM 是Model-View-ViewModel
-
Model：vue物件的data屬性裡面的資料，這裡的資料要顯示到頁面中 -
View：vue中資料要顯示的HTML頁面，在vue中，也稱之為“檢視模板” （HTML+CSS） -
ViewModel：vue中編寫程式碼時的vm物件，它是vue.js的核心，負責連線 View 和 Model資料的中轉，保證檢視和資料的一致性，所以前面程式碼中，data裡面的資料被顯示中p標籤中就是vm物件自動完成的（雙向資料繫結：JS中變數變了，HTML中資料也跟著改變）
安裝
CDN引入
# 對於製作原型或學習，你可以這樣使用最新版本： <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> # 對於生產環境： <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
下載到本地
其實就是直接在瀏覽器中開啟https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然後複製下來，建立一個js檔案再貼上進去
<script src="js/vue.js"></script>
快速使用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<h1>Vue</h1>
<div id="app">
{{ word }}
</div>
</body>
<script>
let vm = new Vue({
el:'#app',
data:{
word:'Hello Vue!'
}
})
</script>
</html>
雙向資料繫結測試
vm.word = 'Hello,HammerZe' // 修改js中變數的值
$('#app').text('餓死了') // 修改HTML的div中的值
模板語法
插值語法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插值</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li>字串：{{name}}</li>
<li>數值：{{age}}</li>
<li>陣列：{{list1}}</li>
<li>物件：{{obj1}}</li>
<li>字串：{{link1}}</li>
<li>運算：{{10+20+30+40}}</li>
<li>三目運算子：{{10>20?'是':'否'}}</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: '#box', // 在box這個div中可以寫 vue的語法
data: {
name: 'Darker', // 字串
age: 18, // 數值
list1: [1,2,3,4], // 陣列
obj1: {name: 'Darker', age: 19}, // 物件
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
}
})
</script>
</html>
指令
文字指令
| 指令 | 釋義 |
|---|---|
| v-html | 讓HTML渲染成頁面 |
| v-text | 標籤內容顯示js變數對應的值 |
| v-show | 放1個布林值：為真 標籤就顯示；為假 標籤就不顯示 |
| v-if | 放1個布林值：為真 標籤就顯示；為假 標籤就不顯示 |
v-show與 v-if的區別：
- v-show：標籤還在，只是不顯示了（本質display: none）
- v-if：直接操作DOM，刪除/插入 標籤
v-html：讓HTML渲染成頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="box">
<ul>
<li v-html="link1"></li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: '#box', // 在box這個div中可以寫 vue的語法
data: {
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
}
})
</script>
</html>
v-text：標籤內容顯示js變數對應的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-text="link1"></li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: '#box', // 在box這個div中可以寫 vue的語法
data: {
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
}
})
</script>
</html>
v-show：顯示/隱藏內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<h3>案例：控制元件通過按鈕來控制顯示和小事</h3>
<button @click="handleClick()">點我</button>
<br>
<div v-show="isShow">isShow</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
isShow: true,
},
methods: {
handleClick(){
this.isShow = !this.isShow // this指的是當前的vue物件
},
}
})
</script>
</html>
v-if：顯示/刪除內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<h3>案例：控制元件通過按鈕來控制顯示和消失</h3>
<button @click="handleClick()">點我</button>
<br>
<div v-if="isCreated">isCreated</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
isCreated:true
},
methods: {
handleClick(){
this.isCreated = !this.isCreated // this指的是當前的vue物件
},
}
})
</script>
</html>
事件指令
| 指令 | 釋義 |
|---|---|
| v-on | 觸發事件（不推薦） |
| @ | 觸發事件（推薦） |
| @[event] | 觸發event事件（可以是其他任意事件） |
v-on:click 可以縮寫成@click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件指令</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<button v-on:click="handleClick1">點我1</button>
<!-- 下面這個用的多 -->
<button @click="handleClick2">點我2</button>
<!-- 如果不傳引數，是沒有區別的 -->
<button @click="handleClick3()">點我3-1(帶括號)</button>
<!-- 如果要傳引數 -->
<button @click="handleClick3(1,22,333)">點我3-2(帶括號+引數)</button>
<!-- 傳入事件 -->
<button @click="handleClick4($event)">點我4(帶事件引數)</button>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
},
methods: {
handleClick1() {
console.log('點我1')
},
handleClick2() {
console.log('點我2')
},
handleClick3(a,b,c) {
console.log(a,b,c)
},
handleClick4(event) {
console.log(event)
},
}
})
</script>
</html>
屬性指令
| 指令 | 釋義 |
|---|---|
| v-bind | 直接寫js的變數或語法（不推薦） |
| : | 直接寫js的變數或語法（推薦） |
v-bind:class=’js變數’可以縮寫成：:class=’js變數’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性指令</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<style>
.red {
color: rgba(255, 104, 104, 0.7);
}
.purple {
color: rgba(104, 104, 255, 0.7);
}
</style>
</head>
<body>
<div id="box">
<img v-bind:src="url" alt="" height="100">
<br>
<button @click="handleClick">點我變色</button>
<div :class="isActive?'red':'purple'">
<h1>我是一個div</h1>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=205441424,1768829584&fm=26&gp=0.jpg',
change: 'red',
isActive: true
},
methods: {
handleClick() {
this.isActive = !this.isActive
},
}
})
</script>
</html>
【待續】