MyBatis Plus陣列list存入資料庫
1.Vue模板語法
1.1 模板語法概述
1.如何理解前端渲染？
把資料填充到HTML標籤中
2.前端渲染方式
-
原生js拼接字串
-
使用前端模板引擎
-
使用vue特有的模板語法
3. 原生js拼接字串
基本上就是將資料以字串的方式拼接到HTML標 籤中，前端程式碼風格大體上如下圖所示。
缺點：不同開發人員的程式碼風格差別很大，隨著業 務的複雜，後期的維護變得逐漸困難起來。
4. 使用前端模板引擎
下面程式碼是基於模板引擎art-template的一段代 碼，與拼接字串相比，程式碼明顯規範了很多， 它擁有自己的一套模板語法規則。
優點：大家都遵循同樣的規則寫程式碼，程式碼可讀性 明顯提高了，方便後期的維護。
缺點：沒有專門提供事件機制。
5. 模板語法概覽
插值表示式
指令
事件繫結
屬性繫結
樣式繫結
分支迴圈結構
1.2 指令
1.什麼是指令？
-
什麼是自定義屬性
-
指令的本質就是自定義屬性
-
指令的格式：以v-開始（比如：v-cloak）
官網：https://cn.vuejs.org/v2/api/
2. v-cloak指令用法
插值表示式存在的問題：“閃動”
如何解決該問題：使用v-cloak指令
解決該問題的原理：先隱藏，替換好值之後再顯示最終的值
// v-cloak指令 的用法 /* 1. 提供樣式 [v - cloak] { display: none } <style> [v-cloak] { display: none } </style>*/ // 2. 在插值表示式所在的標籤中新增 v-cloak 指令 <div v-cloak> {{msg}} </div>
3.資料繫結指令
v-text 填充純文字
① 相比插值表示式更加簡潔
<div v-text='msg'></div>
v-html 填充HTML片段
① 存在安全問題
② 本網站內部資料可以使用，來自第三方的資料不可以用
<divv-html='msg1'></div>
data: {
msg1: '<h3> html </h3>'
}
v-pre 填充原始資訊
① 顯示原始資訊，跳過編譯過程（分析編譯過程）
<div v-pre='msg'>{{msg}} </div>
-
資料響應式
如何理解響應式
① html5中的響應式（螢幕尺寸的變化導致樣式的變化）
② 資料的響應式（資料的變化導致頁面內容的變化，可在控制檯控制資料）
什麼是資料繫結
① 資料繫結：將資料填充到標籤中
v-once 只編譯一次
① 顯示內容之後不再具有響應式功能
v-once的應用場景:如果顯示的資訊後續不需要再修改，那麼可以使用v-once，這樣可以提高效能。
1.3 雙向資料繫結指令
1.什麼是雙向資料繫結？
2.雙向資料繫結分析
v-model指令用法
<input type='text' v-model='uname'/>
在頁面中修改資料，控制檯裡面的資料也會跟著變化
在控制檯裡面修改資料，頁面資料也會一起被修改
3.MVVM設計思想
① M(model) --（模型資料）
② V(view) --（檢視，本質上來說是DOM元素）
③ VM(View-Model)--（控制邏輯，把View和Model結合在一起）
1.4 事件繫結
1.Vue如何處理事件？
v-on指令用法
<button v-on:click='num++'>按鈕</button>
v-on簡寫形式
<button @click='num++'>按鈕</button>
2.事件函式的呼叫方式
函式定義方式：
直接繫結函式(方法)名稱
<button @click='handle'>按鈕2</button>
呼叫函式
<button @click='handle()'>按鈕3</button>
3.事件函式引數傳遞
普通引數和事件物件
-
如果事件直接繫結函式名稱，那麼會預設傳遞事件物件作為事件函式的第一個引數
<button @click='handle2'>按鈕2</button>handle2: function (event) { console.log(event.target.innerHTML); }
-
如果事件繫結函式呼叫，那麼事件物件必須作為最後一個傳遞的引數，並且事件物件的名稱必須是$event，是固定的
<button @click='handle1(1,6,$event)'>按鈕1</button>handle1: function (p1, p2, event) { console.log(p1, p2); // tagName 標籤名 console.log(event.target.tagName); // innerHTML 標籤裡的內容 console.log(event.target.innerHTML); this.num++; }
-
4.事件修飾符
.stop 阻止冒泡
1.傳統方式阻止冒泡
handle1: function () {
// 傳統方式阻止冒泡
event.stopPropagation();
}
2.事件修飾符阻止冒泡
<button @click.stop='handle1'>按鈕1</button>
.prevent 阻止預設行為
1.傳統方式阻止預設行為
handle3: function (event) {
// 傳統方式阻止預設行為
event.preventDefault();
}
2.事件修飾符阻止冒泡
<a href="http://www.baidu.com" @click.prevent='handle3'>跳轉</a>
.stop .prevent 可串聯使用
<!-- 阻止冒泡和阻止預設行為可串聯使用 -->
<button @click.stop.prevent='handle1'> <a href="http://www.baidu.com">跳轉按鈕</a></button>
5.按鍵修飾符
.enter 回車鍵 .delete刪除鍵
// .enter 回車鍵 密碼: <input type="password" v-model='pwd' v-on:keyup.enter='handel'> // .delete刪除鍵 使用者名稱:<input type="text" v-model='uname' v-on:keyup.delete='clearContent'> <script> var vm = new Vue({ el: '#app', data: { uname: '', pwd: '' }, methods: { clearContent: function () { this.uname = '' }, handel: function () { console.log(this.uname, this.pwd); } } }) </script>
6.自定義按鍵修飾符
全域性 config.keyCodes 物件
Vue.config.keyCodes.f1 = 112
<body>
<div id="app">
<!-- 未知Ascll碼值，新增事件物件$event，用來獲取鍵盤Ascll碼值 -->
<!-- <input type="text" v-on:keyup='handel'> -->
<!-- 已知ASCALL碼值也可以如下直接新增數字 -->
<!-- <input type="text" v-on:keyup.65='handel'> -->
<input type="text" v-on:keyup.f1='handel'>
</div>
<script src="vue.js"></script>
<script>
// 已知Ascall碼值 f1為自定義修飾符別名
Vue.config.keyCodes.f1 = 65;
var vm =new Vue({
el: '#app',
data: {},
methods: {
handel: function (event) {
//Ascll碼值打印出來
console.log(event.keyCode);
}
}
})
</script>
</body>
案例：簡單計算器
需求：實現簡單的加法計算，分別輸入數值a和數值b，點選計算按鈕，結果顯示在下面。
案例分析：
① 通過v-model指令實現數值a和數值b的繫結
② 給計算按鈕繫結事件，實現計算邏輯
③ 將計算結果繫結到對應位置
<body>
<div id="app">
<h1>簡單計算器</h1>
<div>
<span>數值A</span>
<span>
<input type="text" v-model='a'>
</span>
</div>
<div>
<span>數值B</span>
<span>
<input type="text" v-model='b'>
</span>
</div>
<div>
<button v-on:click='handel'>計算</button>
</div>
<div>
<span>計算結果:</span>
<span v-text='result'></span>
</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
a: '',
b: '',
result: ''
},
methods: {
handel: function () {
this.result = parseInt(this.a) + parseInt(this.b);
}
}
})
</script>
</body>
1.5 屬性繫結
1.Vue如何動態處理屬性？
v-bind指令用法:
<a v-bind:href="url">百度</a>
縮寫形式
<a :href="url">百度</a>
2.v-model的低層實現原理分析
<input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
1.6 樣式繫結
1.class樣式處理
物件語法
<body>
<div id="app">
<div v-bind:class="{active:isActive,error:isError}">123</div>
<button v-on:click='handel'>切換</button>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
isActive: true,
isError: true
},
methods: {
handel: function () {
// 控制isActive的值在true和false之間進行切換
this.isActive = !this.isActive,
this.isError = !this.isError
}
}
})
</script>
陣列語法
<body>
<div id="app">
<div v-bind:class='[activeClass,errorClass]'>1213</div>
<button v-on:click='handle'>切換</button>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error'
},
methods: {
handle: function () {
this.activeClass = '',
this.errorClass = ''
}
}
})
</script>
</body>
樣式處理細節
1、物件繫結和陣列繫結可以結合使用
<div v-bind:class='[activeClass,errorClass,{text:isText}]'>1213</div>
2、class繫結的值可以簡化操作
<div v-bind:class='arrClass'></div> <div v-bind:class='objClass'></div> data: { activeClass: 'active', errorClass: 'error', isText: true, // 簡化操作 // 陣列簡化 arrClass: ['active', 'error'], // 物件簡化 objClass: { active: true, error: true } }
3、預設的class如何處理?預設的class會保留
<div class="base" v-bind:class='objClass'></div>
2.style樣式處理
物件語法
<div v-bind:style='{width:widthStyle,height:heightStyle,border:borderStyle}'></div>
陣列語法
<div v-bind:style='[objStyle,overrideStyle]'></div>
具體使用參考如下程式碼：
<body>
<div id="app">
<div v-bind:style='{width:widthStyle,height:heightStyle,border:borderStyle}'></div>
<div v-bind:style='objStyle'></div>
<div v-bind:style='[objStyle,overrideStyle]'></div>
<button v-on:click.style='handel'>切換</button>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
widthStyle: '100px',
heightStyle: '200px',
borderStyle: '1px solid #ccc',
// 物件簡化
objStyle: {
width: '200px',
height: '100px',
border: '1px solid #ccc'
},
// 陣列
overrideStyle: {
border: '5px solid red',
background: 'blue'
}
},
methods: {
handel: function () {
this.heightStyle = '100px';
this.objStyle.width = '100px'
}
}
})
</script>
</body>
1.7 分支迴圈結構
1.分支結構
v-if
v-else
v-else-if
v-show
<body>
<div id="app">
<div v-if='score>=90'>優秀</div>
<div v-else-if='score<90&&score>=80'>良好</div>
<div v-else-if='score<80&&score>=70'>中等</div>
<div v-else-if='score<90&&score>=60'>及格</div>
<div v-else>掛科</div>
<div v-show=flag>測試v-show</div>
<button v-on:click='handel'>切換狀態</button>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 53,
flag: false
},
methods: {
handel: function () {
this.flag = !this.flag
}
}
})
</script>
</body>
2.v-if與v-show的區別
v-if控制元素是否渲染到頁面 (基本上不會發生改動用v-if)
v-show控制元素是否顯示（已經渲染到了頁面，頻繁改動用v-show）
3.迴圈結構
v-for遍歷陣列
<div v-text='item' v-for='item in fruits'></div>
<div v-for='(item,index) in fruits'>{{item + ' ---' + index}}</div>
key的作用：幫助Vue區分不同的元素，從而提高效能
<div :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</div>
示例程式碼：
<body>
<div id="app">
<div v-text='item' v-for='item in fruits'></div>
<div v-for='(item,index) in fruits'>{{item + ' ---' + index}}</div>
<div :key='item.id' v-for='item in myFruits'>
<span>{{item.ename}}</span>
<span>---</span>
<span>{{item.cname}}</span>
</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
fruits: ['banner', 'orange', 'apple'],
myFruits: [{
id: 1,
ename: 'banana',
cname: '香蕉'
},
{
id: 2,
ename: 'apple',
cname: '蘋果'
}, {
id: 3,
ename: 'orange',
cname: '橙子'
}
]
},
methods: {
}
})
</script>
</body>