後端學前端：Vue學習總結（一）
Tags: Vue
一、前言
MVVM
MVVM（Model-View-ViewModel） 是一種軟件架構設計模式，是一種事件驅動編程方式。
MVVM來源於經典的MVC模式，其中心在VM（ViewModel）層，作用有二：與View層進行雙向數據綁定；與Model層通過接口進行數據交互。
何爲雙向綁定？
單向綁定非常容易理解，就是把Model層綁定到View層。Model變，View跟着變。
那麼雙向綁定，就是在單向綁定的基礎上，將View層綁定到Model層。View變，Model跟着變。
怎麼理解？
以表單爲例，我們在輸入框中編輯信息（View變），這些信息會同步到表單的內部邏輯代碼中（Model變）。
爲什麼是Vue？
- Vue綜合了Angular的模塊化和React的虛擬DOM，博採衆長
- Vue只關注視圖層，遵從關注點分離（Soc）原則
- 生態豐富
- 對後端程序員友好-
二、Hello World
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--通過CDN引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<!--Vue要綁定的元素-->
<div id="app">{{message}}</div>
<script>
//新建Vue對象
var vm = new Vue({
el:"#app",//綁定的元素
data:{
message:"Hello World"//與模板引擎類似，單向綁定
}
})
</script>
</body>
</html>
在瀏覽器控制檯隨意更改"vm.message"的值，發現頁面會實時同步。
三、基本語法
v-bind
作用：綁定元素屬性，比如style，class，title等。
官網API鏈接：
代碼：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--通過CDN引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<!--Vue要綁定的元素-->
<div id="app">
<!--一定要在綁定了Vue的元素裏寫-->
<!--綁定了title屬性-->
<span v-bind:title="message">你好啊</span>
</div>
<script>
var vm = new Vue({
el:"#app",//綁定的元素
data:{
message:"Hello World"//與模板引擎類似，單向綁定
}
})
</script>
</body>
</html>
v-if、v-else和v-else-if
作用：嗯，就是if、else和else if（條件渲染）
官網API鏈接：
代碼：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--通過CDN引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<!--Vue要綁定的元素-->
<div id="app">
<!--簡單true或者false-->
<span v-if="ok">if表達式爲真</span>
<span v-else>if表達式爲假</span>
<!--加入表達式-->
<!--注意判斷是三個等號-->
<span v-if="item==='A'">A</span>
<span v-else-if="item==='B'">B</span>
<span v-else="item==='C">C</span>
</div>
<script>
var vm = new Vue({
el:"#app",//綁定的元素
data:{
ok:true,//直接傳一個true或者false
item:'B'
}
})
</script>
</body>
</html>
v-for
作用：循環渲染（列表渲染）
官網：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 普通循環-->
<li v-for="item in items">{{item}}</li>
<!-- 加入元素索引-->
<li v-for="(item, index) in items">
{{index}}----{{item}}
</li>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
items:["Java","Python","C++"]
}
})
</script>
</body>
</html>
v-on
作用：綁定事件
官網：
瀏覽器事件參考：
代碼：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 綁定了瀏覽器的按鈕點擊事件-->
<button v-on:click="sayHello">點擊</button>
</div>
<script>
var vm = new Vue({
el:"#app",
methods:{
sayHello:function (event) {
alert("Hello!!");
}
}
})
</script>
</body>
</html>