Vuejs基礎入門
- Vue概述
- 早期前后端分離模式
- MVVM框架
- Vue簡介
- Vue.js快速入門
- 安裝Vue環境
- Hello World程式
- vue雙向資料系結
- 文本渲染指令
- 屬性系結指令
- 系結樣式
- 使用物件語法系結樣式
- 使用三目運算系結樣式
- 直接系結行內樣式
Vue概述
早期前后端分離模式
早期的前后端分離開發模式是這樣的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table {
width: 600px;
text-align: center;
border-bottom: solid 2px #DDD;
/* 合并邊框 */
border-collapse: collapse;
}
td,th {
border-bottom: solid 1px #DDD;
height: 40px;
}
</style>
</head>
<body>
<h3>用戶資訊</h3>
<table>
<tr>
<th>用戶編號</th>
<th>用戶姓名</th>
<th>用戶性別</th>
<th>用戶年齡</th>
</tr>
<tbody id="userBox">
<!-- 這里是動態內容 -->
</tbody>
</table>
<script>
let userArr = [{
userId: 1,
userName: '張三',
userSex: '男',
userAge: 20
}, {
userId: 2,
userName: '李四',
userSex: '女',
userAge: 21
}, {
userId: 3,
userName: '王五',
userSex: '男',
userAge: 22
}]
let userBox = document.getElementById('userBox');
let str = '';
for (let i = 0; i < userArr.length; i++) {
str += '<tr>' +
'<td>' + userArr[i].userId + '</td>' +
'<td>' + userArr[i].userName + '</td>' +
'<td>' + userArr[i].userSex + '</td>' +
'<td>' + userArr[i].userAge + '</td>' +
'</tr>';
}
userBox.innerHTML = str;
</script>
</body>
</html>
以上開發模式的特點是：
1、必須直接操作DOM，動態改變DOM物件的內容與樣式，
2、必須要進行大量的字串拼接，才能拼接出動態內容，然后系結到視圖（html）上，
3、這種系結方式是單向的，即：使用javascript將動態資料系結到DOM上，但是用戶操作DOM引起的變化，卻不能反映到javascript的動態資料上，
MVVM框架
MVVM框架分為三個部分：分別是M（Model，模型層 ），V（View，視圖層），VM（ViewModel，V與M連接的橋梁，也可以看作為控制器）
1、M：模型層，主要負責業務資料相關，
2、V：視圖層，顧名思義，負責視圖相關，細分下來就是html+css層，3、VM：V與M溝通的橋梁，負責監聽M或者V的修改，是實作MVVM雙向系結的要點，
MVVM支持雙向系結，意思就是當M層資料進行修改時，VM層會監測到變化，并且通知V層進行相應的修改，反之修改V層則會通知M層資料進行修改，以此也實作了視圖與模型層的相互解耦，
Vue簡介
Vue.js : 漸進式JavaScript 框架，它就是一個前端MVVM框架， Vue.js的作者為Evan You（尤雨溪），任職于Google Creative Lab， Vue的主要特點就和它官網所介紹的那樣： 1.簡潔 2.輕量 3.快速 4. 資料驅動 5.模塊友好 6.組件化，
Vue.js快速入門
安裝Vue環境
1、打開此鏈接:https://cdn.jsdelivr.net/npm/vue/dist/vue.js
Ctrl + S 把vue.js檔案保存到本地使用，
2、或者在body標簽中加入下面這句話：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Hello World程式
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script>
//定義全域變數vm
let vm = new Vue({
el: '#app',
data: {
msg: 'Hello World!'
}
});
</script>
</body>
</html>
運行結果：
vue雙向資料系結
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" /></br>
<span>{{msg}}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Keafmd'
}
});
</script>
</body>
</html>
效果截圖：
可以看到我們操作的view控制元件資料，直接影響到了我們的vm.data，并且又進一步影響到了頁面，這就是Vue的雙向資料系結，整個程序的原理如下圖所示：
文本渲染指令
Vue使用了基于HTML的模板語法，允許開發者宣告式地將DOM系結至底層Vue實體的資料，所有Vue的模板都是合法的HTML，所以能被遵循規范的瀏覽器和HTML決議器決議，
在前面，我們一直使用的是字串差值的形式渲染文本，但是除此方法之外，vue還提供了其他幾種常見的文本渲染方式：
1. v-text：更新元素的innerText
2. v-html：更新元素的innerHTML
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<div v-html="msg"></div>
<div v-text="msg"></div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg:'<p>Keafmd!</p>'
}
});
</script>
</body>
</html>
效果截圖：
在Vue中，我們可以使用 { { } } 將資料插入到相應的模板中，這種方法是一種文本插值， 使用這種方法，如果網路慢或者JavaScript出錯的話，會將 { { } } 直接渲染到頁面中， 值得慶幸的是，Vue還提供了v-text和v-html來渲染文本或元素，這樣就避免了將 { { } } 直接渲染到頁面中，
屬性系結指令
如果想讓html標簽中的屬性，也能應用Vue中的資料，那么就可以使用vue中常用的屬性系結指令：v-bind
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<div v-bind:title="msg">DOM元素屬性系結</div>
<!-- v-bind的簡寫形式 -->
<div :title="msg">DOM元素屬性系結</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg:'Hello World!'
}
});
</script>
</body>
</html>
效果截圖：
上面展示的是v-bind的最基本的使用，第一種是完整語法，第二種是縮寫方式，
除了將元素的title屬性和vue實體的相關欄位進行系結外，還能將其他的屬性欄位進行系結，最常見的是對于樣式的系結，即class和style屬性，
系結樣式
使用v-bind指令系結class屬性，就可以動態系結元素樣式了，
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.one{
color: red;
}
.two{
color: blue;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<div :class="className">DOM元素的樣式系結</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
className:'one'
}
});
</script>
</body>
</html>
效果截圖：
通過：className:‘one’ 來系結one class屬性，使顏色修改為red
使用物件語法系結樣式
我們可以給v-bind:class 一個物件，也可以直接系結資料里的一個物件，以動態地切換class，
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.one{
color: red;
}
.two{
font-size: 48px;
}
</style>
</head>
<body>
<div id="app">
<div :class="{one:oneActive,two:twoActive}">DOM元素的樣式系結1</div>
<div :class="{one:false,two:true}">DOM元素的樣式系結2</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
oneActive:true,
twoActive:false
}
});
</script>
</body>
</html>
效果截圖：
我們可以通過系結資料里的一個物件來實作切換，也可以直接寫true或者false來控制，
使用三目運算系結樣式
可以使用三目運算子，來動態系結樣式，
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.one{
color: red;
}
</style>
<title></title>
</head>
<body>
<div id="app">
<div :class="userId==1 ? className : '' ">DOM元素的樣式系結</div>
<div :class="userId==2 ? className : '' ">DOM元素的樣式系結</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
userId:1,
className:'one'
}
});
</script>
</body>
</html>
效果截圖：
直接系結行內樣式
也可以直接系結行內樣式，
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div style="color:red;font-size: 50px;">DOM元素的樣式系結1</div>
<div :style="{color:colorValue,fontSize:fontSizeValue}">DOM元素的樣式系結2</div>
<div :style="stylelist">DOM元素的樣式系結3</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
colorValue: 'green',
fontSizeValue: '60px',
stylelist: 'color:red'
}
});
</script>
</body>
</html>
效果截圖：
注意：系結style屬性后，樣式的書寫要遵循javaScript規范， 也就是將 xxx-xxx 改寫成駝峰命名方式 xxxXxxx
看完如果對你有幫助，感謝點贊支持！
如果你是電腦端的話，看到右下角的 “一鍵三連” 了嗎，沒錯點它[哈哈]
加油！
共同努力！
Keafmd
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/229209.html
標籤：其他