系列文章目录
文章目录
- 系列文章目录
- 一、按键修饰符
- 二、checkbox单选与多选
- 三、radio
- 四、v-model修饰符
- 五、vue生命周期
- 六、vue与后端交互
一、按键修饰符
@keydown 当用户按下键盘键时触发，如果按住不放的话，会重复触发此事件
@keyup 当用户按下键盘键当按键恢复时触发，如果按住不放的话，会重复触发此事件
@keypress 当用户释放键盘上的字符键时触发，对退格没有响应
触发顺序 keydown>keypress>keyup 在vue中只有keydown能够赶上数据双向绑定的刷新速度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>按下任意键触发<input type="text" v-model="mytext1" @keydown="pressbtn1" />输入：{{mytext1}}</p>
<p>按下字符键触发<input type="text" v-model="mytext2" @keyup="pressbtn2" />输入：{{mytext2}}</p>
<p>按下释放后触发<input type="text" v-model="mytext3" @keypress="pressbtn3" />输入：{{mytext3}}</p>
<p><input type="text" v-model="mytext4" @keydown="pressbtn4" @keyup="pressbtn5" @keypress="pressbtn6">输入：{{mytext4}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data: {
mytext1:'',
mytext2:'',
mytext3:'',
mytext4:'',
},
methods:{
pressbtn1(){
console.log(this.mytext1)
},
pressbtn2(){
console.log(this.mytext2)
},
pressbtn3(){
console.log(this.mytext3)
},
pressbtn4(){
console.log('keydown')
},
pressbtn5(){
console.log('keyup')
},
pressbtn6(){
console.log('keypress')
},
},
})
</script>
</body>
</html>二、checkbox单选与多选
单选：
通过v-model来设置其对应的变量，value来对应选中后之前所对应变量的值
<input type="checkbox" @change="chooise_one();summation1()" v-model="lists" :value="commodity">多选：
通过v-model来设置其对应的变量，value来对应选中后之前所对应变量的值，区别在于多选情况，多选的地方会将所有的value在变量中组装为一个数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>商品名</th>
<th>商品单价</th>
<th>商品数量</th>
<th>全选/全不选 <input type="checkbox" @change="chooise_all();summation1()" v-model="chooiseAll"></th>
</tr>
</thead>
<tbody>
<tr v-for="commodity in commoditys">
<td>{{commodity.name}}</td>
<td>{{commodity.price}}</td>
<!-- 计算机把小数转换成二级制，会出现无限循环的情况。再把无限循环的二级制转化成十进制的时候，变成了一个无限循环的数字。-->
<td><button @click="reduce_commdity(commodity)">-</button>{{commodity.number}}<button @click="commodity.number++;summation1()">+</button></td>
<td><input type="checkbox" @change="chooise_one();summation1()" v-model="lists" :value="commodity"></td>
</tr>
</tbody>
</table>
<p>总计：{{sum}}￥</p>
</div>
<script>
new Vue({
el: '#app',
data: {
commoditys:[{
'name':'梨子',
'price':125.6,
'number':20,
},
{
'name':'苹果',
'price':25.6,
'number':10,
},
{
'name':'土豆',
'price':5.6,
'number':30,
},
],
lists:[],
chooiseAll:'',
sum:0,
},
methods: {
chooise_all() {
if (this.chooiseAll){
this.lists = this.commoditys
} else {
this.lists = []
}
},
chooise_one() {
if (this.commoditys.length !== this.lists.length){
this.chooiseAll = false
} else {
this.chooiseAll = true
}
},
chooise_one() {
this.chooiseAll = this.commoditys.length === this.lists.length;
},
summation1() {
var sums = 0
for(i=0;i<this.lists.length;i++){
sums += this.lists[i].price * this.lists[i].number
}
this.sum = sums
},
reduce_commdity(commodity) {
var i = 0
if (commodity.number <= 1){
alert('商品数不能小于1')
} else {
commodity.number --
}
},
},
})
</script>
</body>
</html>三、radio
针对于radio，每个选项共用一个变量，选择一个之后值会替换到变量中
<input type="radio" v-model="gender" value="1">男
<input type="radio" v-model="gender" value="2">女
<input type="radio" v-model="gender" value="0">未知四、v-model修饰符
lazy修饰符，取代change事件
number修饰符，输入字符串转换为有效的数值型
trim修饰符，过滤字符串首尾的空格
<div id="app">
<p>lazy修饰符，取代change事件<input type="text" v-model.lazy="text1">输入：{{text1}}</p>
<p>number修饰符，输入字符串转换为有效的数值型<input type="text" v-model.number="text2">输入：{{typeof(text2)}}</p>
<p>trim修饰符，过滤字符串首尾的空格<input type="text" v-model.trim="text3">输入：{{text3}}</p>
<p><button @click="showApp1">显示app1组件</button></p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
text1:'',
text2:'',
text3:'',
key:false,
},
methods: {
showApp1(){
this.key=!this.key
}
},
})五、vue生命周期
vue是组件化开发，每一个组件都是一个vue对象，每个vue对象有自己的生命周期，vue从创建到销毁的整个过程就是生命周期
vue生命周期钩子函数有8个，这八个生命周期钩子函数，都在不同的时间点触发。
钩子函数 | 触发时间点 |
beforeCreate | 创建Vue实例之前调用 |
created | 创建Vue实例成功后调用（可以在此处发送异步请求后端数据） |
beforeMount | 渲染DOM之前调用 |
mounted | 渲染DOM之后调用 |
beforeUpdate | 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） |
updated | 重新渲染完成之后调用 |
beforeDestroy | 销毁之前调用 |
destroyed | 销毁之后调用 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<child v-if="key">
<p>显示了app1</p>
</child>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
})
Vue.component('Child', {
template: `
<p>显示了app1</p>
`,
data() {
return {
name: ''
}
},
beforeCreate(){
console.log('beforeCreate')
},
created(){
console.log('create')
this.times = setInterval(() => {
console.log('触发定时器')
},3000)
},
beforeMount(){
console.log('beforeMount')
},
mounted(){
console.log('mounted')
},
beforeUpdate(){
console.log('beforeUpdate')
},
updated(){
console.log('update')
},
beforeDestroy(){
console.log('beforeDestroy')
},
destroyed(){
clearInterval(this.times)
console.log('destroy')
},
})
</script>
</body>
</html>六、vue与后端交互
前端与后端通信的三种方法：
在与后端的通信中如果需要使用this也就是之前的vue对象中的内容需要用箭头函数来进行
第一种js原生的fetch
fetch(api接口地址).then(此处为response).then(此处为error)
第一种使用js原生的fetch与后端交互
fetch('http://127.0.0.1:8000/api/v1/shopping/').then(data => data.json()).then(data => {
this.commoditys = data
})
fetch('http://127.0.0.1:8000/api/v1/shopping/').then(function (res){return res.json()})第二种jQuery的ajax进行通信
$.ajax({
此处编写请求地址、类型、头、数据等，在回调函数中获取response
})
第一种使用jquery的ajax来获取后端数据
$.ajax({
'url':'http://127.0.0.1:8000/api/v1/shopping/',
'type':'get',
success: data => {
this.commoditys = data
}
})第三种使用axios
axios.请求方式(地址,携带的数据,请求的配置).then(此为response).then(此为error)
axios.get('http://127.0.0.1:8000/api/v1/shopping/').then(data => {
console.log(data.data)
this.commoditys = data.data
})
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
