目錄
前端開發之Vue框架
一、JS迴圈的幾種方式
1、v-for可迴圈的變數
迴圈陣列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for迴圈</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>迴圈陣列</h1>
<div v-for="(item,index) in dataList">
<p>列表索引第：{{index}} 位，值：{{item}}</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {
// 陣列
dataList: ['1', '2', '3', '4', '5']
}
})
</script>
</html>
迴圈物件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for迴圈</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>迴圈物件</h1>
<div v-for="(value,key) in dataObj">
<p>值：{{value}}，鍵：{{key}}</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {
// 物件
dataObj: {
name: 'kang',
age: 18,
gender: 'male'
}
}
})
</script>
</html>
迴圈字元：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for迴圈</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>迴圈字元</h1>
<div v-for="(item,index) in dataStr">
<p>值：{{item}}，對應索引位置：{{index}}</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {
// 字元
dataStr: 'Happy every day'
}
})
</script>
</html>
迴圈數字：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for迴圈</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>迴圈數字</h1>
<div v-for="(item,index) in 10">
<p>值：{{item}}，對應索引位置：{{index}}</p>
</div>
</div>
</body>
</html>
2、js的迴圈方式
基於索引的迴圈：自定義數字或根據陣列內資料的個數迴圈
<script>
// 方式一：自定義迴圈
for (i = 0; i < 10; i++) {
console.log(i)
}
// 方式二：基於索引迴圈
var a = [1,2,3,4,5]
for (i = 0; i < a.length; i++) {
console.log(i)
}
</script>
js的in迴圈：獲取到的是索引位置
<script>
var a = [1, 2, 3, 4, 5]
for (i in a) {
console.log(i,a[i]) // i:索引的位置，a[i]：值
}
</script>
js的of迴圈：根據陣列內資料的個數迴圈，獲取到的是值（迴圈物件會報錯）
<script>
var a = [100, 2,99, 4, 2]
for (i of a) {
console.log(i)
}
</script>
js的forEach迴圈：
<script>
var b = [1212,223,344,45,624]
b.forEach(function (item,index){
console.log(item,index)
})
</script>
jq的Each迴圈：需要引入jqery的cdn
<script>
// 迴圈物件
var a = {
'name': 'kangkang',
'age': '18',
'gender': 'male'
}
$.each(a,function(key,value){
console.log(key,value)
} )
// 迴圈陣列
var b = [1212, 223, 344, 45, 624]
$.each(b, function (index, item) {
console.log(index, item)
})
</script>
二、Key值的解釋
在使用Vue的v-for迴圈時，其底層原理是將被迴圈的資料依次新增到頁面中，若已被迴圈的資料區域性發生改變時，按常規的理解，其底層還要重新進行一次迴圈，更新資料，但在Vue中可以在被迴圈的標籤上指定一個key屬性，指定該屬性的值為當前被迴圈的值的索引位置，這樣當資料只是傳送區域性改變時，其底層就只會將區域性的資料根據索引位置新增到頁面中，這樣做的效果是可以提高虛擬dom操作的效率，從而提高迴圈效率，注意：key值必須為唯一值
<div v-for="item in 10" :key="item">{{item}}</div>
三、陣列、物件的檢測與更新
在已經被迴圈渲染的頁面上，將資料中新增一個鍵值對，發現資料並沒有被同步渲染出來，這是因為Vue中存在一個小的BUG，只需要用Vue.set(this.info, 'hobby', '籃球') 設定一下即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for迴圈</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<div v-for="(key,value) in dataObj">
<p>值：{{key}}，鍵：{{value}}</p>
</div>
<button @click="handleClick">點我新增資料</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {
// 物件
dataObj: {
name: 'kang',
age: 18,
gender: 'male'
},
}
,
methods: {
handleClick() {
this.dataObj['hobby'] = 'read'
// Vue.set(this.dataObj, 'hobby', 'read')
}
}
})
</script>
</html>
四、input事件
常用的input事件
| 方法 | 描述 |
|---|---|
| click | 單擊時觸發 |
| input | 當輸入框進行輸入的時候，觸發的事件 |
| change | 當元素的值發生改變時，觸發的事件 |
| blur | 當輸入框失去焦點的時候，觸發的事件 |
| focus | 當獲得焦點，觸發事件 |
程式碼用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for迴圈</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>點選事件 --- click</h1>
<input type="text" @click="handleClick">
<h1>輸入事件 --- input</h1>
<input type="text" @input="handleInput">
<h1>輸入框發文字生改變觸發 --- change</h1>
<input type="text" @change="handleChange">
<h1>輸入框失去焦點觸發 --- blur</h1>
<input type="text" @blur="handleBlur">
<h1>輸入框獲得焦點觸發 --- focus</h1>
<input type="text" @focus="handleFocus">
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {},
methods: {
handleClick() {
alert('觸發了click事件')
},
handleInput() {
alert('觸發了input事件')
},
handleChange() {
alert('觸發了change事件')
},
handleBlur() {
alert('觸發了blur事件')
},
handleFocus(){
alert('觸發了focus事件')
}
}
})
</script>
</html>
五、v-model雙向資料繫結
簡介：
在input框中輸入數值時，輸入後就會被js變數拿到，如果使用的是：value="變數"，的方式，頁面中輸入框變化，變數不會變，只有使用v-model才能夠做到資料雙向繫結
程式碼用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model雙向資料繫結</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>常規資料繫結</h1>
<input type="text" :value="data_str">------>{{data_str}}
<h1>v-model 雙向資料繫結</h1>
<input type="text" v-model="model_str">------>{{model_str}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {
data_str: '',
model_str: '',
}
})
</script>
</html>
六、過濾案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<p>請輸入要搜尋的內容：<input type="text" v-model="myText" @input="handleInput"></p>
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
},
methods: {
handleInput() {
this.newDataList = this.dataList.filter(
item => item.indexOf(this.myText) >= 0
)
}
}
})
</script>
</html>
七、事件修飾符（瞭解）
| 修飾符 | 描述 |
|---|---|
| .stop | 自己的事件結束後不會父標籤冒泡（阻止事件冒泡） |
| .self | 只處理自己的事件，子標籤冒泡的事件不處理 |
| .prevent | 阻止a連結的跳轉 |
| .once | 事件只會觸發一次（適用於抽獎頁面） |
程式碼用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for迴圈</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>stop事件修飾</h1>
<div @click="handleDiv">
<p><span @click.stop="handleSpan">我是div的子標籤span1</span></p>
<p><span>我是div的子標籤span2</span></p>
</div>
<h1>self事件修飾</h1>
<div @click.self="handleDiv">
<p><span @click="handleSpan">我是div的子標籤span1</span></p>
<p><span>我是div的子標籤span2</span></p>
</div>
<h1>prevent阻止a標籤跳轉</h1>
<p><a href="https://www.baidu.com" @click.prevent="handleA">點我進入百度搜尋</a></p>
<h1>once事件只會觸發一次</h1>
<span @click.once="handleA">點我觸發事件</span>
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {} ,
methods: {
handleDiv() {
alert('觸發了div標籤事件')
},
handleSpan() {
alert('觸發了span1標籤事件')
},
handleA() {
alert('a標籤被點選了')
}
}
})
</script>
</html>
八、按鍵修飾符
簡介：
指，只要按下鍵盤上的某一個案件就會觸發函式執行
程式碼介紹：
@keyup="handleKeyUp" # 只要按下某個鍵就會觸發函式
@keyup.enter # enter為指定的案件，只有按下enter才會觸發函式
@keyup.13 # 13是與鍵盤上某個按鍵的參照數，指只有按下對應的按鍵才會觸發函式
程式碼用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for迴圈</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<input type="text" @keyup.x="handleKeyup">
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {},
methods: {
handleKeyup(data) {
console.log(data)
}
}
})
</script>
</html>
九、表單控制
簡介：
表單控制指，可以監聽並input標籤type屬性的，實時完成資料雙向繫結
- text型別：
- 字元，繫結字元型別變數
- radio：
- 單選，繫結字元型別變數
- ckeckbox：
- 多選，繫結陣列型別變數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單控制</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<p>使用者名稱：</p>
<p><input type="text" v-model="username"></p>
<p>性別：</p>
<p>
男：<input type="radio" v-model="gender" value="男">
女：<input type="radio" v-model="gender" value="女">
</p>
<p>愛好：</p>
<p>
閱讀：<input type="checkbox" v-model="hobby" value="read">
程式設計：<input type="checkbox" v-model="hobby" value="python">
運動：<input type="checkbox" v-model="hobby" value="sports">
</p>
<br>
<hr>
<span>使用者輸入：
<p>{{username}}</p>
<p>{{gender}}</p>
<p>{{hobby}}</p>
</span>
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {
username: '',
gender: '',
hobby: []
},
})
</script>
</html>
十、補充
1、數字過濾方法
// 補充1 ：陣列的過濾方法
// var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
// var newDataList = dataList.filter(function (item) {
// return false // return true表示這個值保留,false 表示這個值不要
// })
// console.log(newDataList)
2、字串indexof方法
判斷子字串是否在當前字串中,如果在返回的是索引，如果不在返回0以下數字
// var s = 'lqz is handsome'
// var s1 = 'qqq'
// var i = s.indexOf(s1)
// console.log(i)
3、箭頭函式
es6 的箭頭函式寫法---》函式中套函式，this指向有問題，有了箭頭函式，箭頭函式沒有自己的this，用的都是上一級的this
1、 無引數，無返回值箭頭函式
var f = () => {
console.log('函式')
}
2、有一個引數，沒有返回值的箭頭函式 括號可以去掉,可以加
var f = item => {
console.log(item)
}
3、有多個引數，沒有返回值的箭頭函式 括號不能去掉
var f = (item, key) => {
console.log(item)
}
4、有一個引數，一個返回值
var f = (item)=> {
return item + 'lqz'
}
var f = item => {
return item + 'lqz'
}