[Vue之按键修饰符、表单控制、购物车案例、v-model进阶、vue生命周期钩子、itsdangerous模块加密解密]
1 按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按键修饰符</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name" @keyup="handelKey1"> # 按键即触发
<input type="text" v-model="name" @keyup.enter="handelKey2"> # 指定按回车才触发
<!-- <button @click="handelClick">点我</button>--> # 点击事件 点击后触发
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: ''
},
methods: {
handelKey1(ev) {
console.log(ev) # 按下任意键后触发打印
if (ev.keyCode == 13) { # 判断按下ceyCode == 13（即回车键）的键后才触发
console.log('按下了回车')
}
},
handelKey2() {
console.log('回车键按下了') # 指定按回车键触发 无需判断
},
handelClick(ev) {
console.log(ev) # 点击事件、、点击后触发
}
}
})
</script>
</html>
2 表单控制
checkbox选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控制</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>checkbox的选中与不选中</h1>
<p>用户名： <input type="text" v-model="name"></p>
<p>密码： <input type="password" v-model="password"></p>
<p><input type="checkbox" v-model="isRem">记住密码</p>
<button @click="submit">登录</button>
<hr>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
password: '',
isRem: false,
},
methods: {
submit() {
console.log(this.name)
console.log(this.password)
console.log(this.isRem)
}
}
})
</script>
</html>
radio单选，checkbox多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控制</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>性别单选：radio</h1>
<input type="radio" v-model="gender" value="1">男
<input type="radio" v-model="gender" value="2">女
<input type="radio" v-model="gender" value="3">其他
<br>
您选择的性别是：{{gender}}
<hr>
<h1>爱好多选：checkbox</h1>
<input type="checkbox" v-model="hobby" value="1">篮球
<br>
<input type="checkbox" v-model="hobby" value="2">足球
<br>
<input type="checkbox" v-model="hobby" value="3">美女
<br>
您的爱好是：{{hobby}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
gender: '',
hobby:[],
},
})
</script>
</html>
3 购物车案例
3.1 简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车简单案例</title>
<script src="./js/vue.js"></script>
</head>
<style>
table, th {
border: 1px solid black;
text-align: center;
}
</style>
<body>
<div id="app">
<table>
<tr>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
<th>选择</th>
</tr>
<tr v-for="good in goods_list">
<th>{{good.name}}</th>
<th>{{good.price}}</th>
<th>{{good.number}}</th>
<th><input type="checkbox" v-model="checkGroup" :value="good"></th>
</tr>
</table>
<hr>
<!-- 您选中了：{{checkGroup}}-->
<br>
总价格是：{{getprice()}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
goods_list: [
{name: '今瓶没', price: 99, number: 2},
{name: '西柚记', price: 59, number: 1},
{name: '水壶转', price: 89, number: 5},
],
checkGroup: [],
},
methods: {
getprice() {
let total = 0
// if (this.checkGroup.length > 0) {
// for(i=0;i<this.checkGroup.length;i++){
// total+=this.checkGroup[i].price*this.checkGroup[i].number
// }
// }
// if (this.checkGroup.length > 0) {
// for (value of this.checkGroup) {
// total += value.price * value.number
// }
// }
if (this.checkGroup.length > 0) {
for (i in this.checkGroup) {
total += this.checkGroup[i].price * this.checkGroup[i].number
}
}
return total
}
}
})
</script>
</html>
3.2 加入全选全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车简单案例</title>
<script src="./js/vue.js"></script>
</head>
<style>
table, th {
border: 1px solid black;
text-align: center;
}
</style>
<body>
<div id="app">
<table>
<tr>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
<th>选择(全选/全不选) <input type="checkbox" v-model="allChecked" @change="handleChange"></th>
</tr>
<tr v-for="good in goods_list">
<th>{{good.name}}</th>
<th>{{good.price}}</th>
<th>{{good.number}}</th>
<th><input type="checkbox" v-model="checkGroup" :value="good" @change="changeOne"></th>
</tr>
</table>
<hr>
<!-- 您选中了：{{checkGroup}}-->
<br>
总价格是：{{getprice()}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
goods_list: [
{name: '今瓶没', price: 99, number: 2},
{name: '西柚记', price: 59, number: 1},
{name: '水壶转', price: 89, number: 5},
],
checkGroup: [],
allChecked: false,
},
methods: {
getprice() {
let total = 0
// if (this.checkGroup.length > 0) {
// for(i=0;i<this.checkGroup.length;i++){
// total+=this.checkGroup[i].price*this.checkGroup[i].number
// }
// }
// if (this.checkGroup.length > 0) {
// for (value of this.checkGroup) {
// total += value.price * value.number
// }
// }
if (this.checkGroup.length > 0) {
for (i in this.checkGroup) {
total += this.checkGroup[i].price * this.checkGroup[i].number
}
}
return total
},
handleChange() {
//通过判断allChecked是true或者false，实现checkGroup全有值或空
if (this.allChecked) {
this.checkGroup = this.goods_list
} else {
this.checkGroup = []
}
},
changeOne() {
if (this.checkGroup.length == this.goods_list.length) {
this.allChecked = true
} else {
this.allChecked = false
}
}
}
})
</script>
</html>
3.3 加入数量加减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车简单案例</title>
<script src="./js/vue.js"></script>
</head>
<style>
table, th {
border: 1px solid black;
text-align: center;
}
</style>
<body>
<div id="app">
<table>
<tr>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
<th>选择(全选/全不选) <input type="checkbox" v-model="allChecked" @change="handleChange"></th>
</tr>
<tr v-for="good in goods_list">
<th>{{good.name}}</th>
<th>{{good.price}}</th>
<th><button @click="handle1(good)">-</button>{{good.number}}<button @click="good.number++">+</button></th>
<th><input type="checkbox" v-model="checkGroup" :value="good" @change="changeOne"></th>
</tr>
</table>
<hr>
<!-- 您选中了：{{checkGroup}}-->
<br>
总价格是：{{getprice()}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
goods_list: [
{name: '今瓶没', price: 99, number: 2},
{name: '西柚记', price: 59, number: 1},
{name: '水壶转', price: 89, number: 5},
],
checkGroup: [],
allChecked: false,
},
methods: {
getprice() {
let total = 0
// if (this.checkGroup.length > 0) {
// for(i=0;i<this.checkGroup.length;i++){
// total+=this.checkGroup[i].price*this.checkGroup[i].number
// }
// }
// if (this.checkGroup.length > 0) {
// for (value of this.checkGroup) {
// total += value.price * value.number
// }
// }
if (this.checkGroup.length > 0) {
for (i in this.checkGroup) {
total += this.checkGroup[i].price * this.checkGroup[i].number
}
}
return total
},
handleChange() {
//通过判断allChecked是true或者false，实现checkGroup全有值或空
if (this.allChecked) {
this.checkGroup = this.goods_list
} else {
this.checkGroup = []
}
},
changeOne() {
if (this.checkGroup.length == this.goods_list.length) {
this.allChecked = true
} else {
this.allChecked = false
}
},
handle1(good){
if(good.number>1){
good.number--
}else {
good.number=1
}
}
}
})
</script>
</html>
4 v-model进阶
'''
v-model.lazy：等待input框的数据绑定失去焦点之后再变化
v-model.number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
v-model.trim：去除首和末尾的空格
'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model进阶</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <input type="text" v-model.lazy="name"> 输入内容是：{{name}}-->
<!-- <input type="text" v-model.number="name"> 输入内容是：{{name}}-->
<input type="text" v-model.trim="name"> 输入内容是：{{name}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: ''
},
})
</script>
</html>
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>AAA</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <child v-if="isShow"></child>-->
</div>
</body>
<script>
//定义一个组件
Vue.component('child', {
template: `
<div>
{{name}}
<br>
{{age}}
<button @click="name='Darker1'">更新数据1</button>
<button @click="name='Darker2'">更新数据2</button>
</div>`,
data() {
return {
name: 'Darker1',
age: 19
}
},
beforeCreate() {
console.group('当前状态：beforeCreate')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
created() {
console.group('当前状态：created')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
beforeMount() {
console.group('当前状态：beforeMount')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
mounted() {
console.group('当前状态：mounted')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
//用的最多，向后端加载数据，创建定时器等
console.log("页面已被vue实例渲染, data, methods已更新");
console.log('mounted')
this.t = setInterval(function () {
console.log('daada')
}, 3000)
clearInterval(this.t)
},
beforeUpdate() {
console.group('当前状态：beforeUpdate')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
updated() {
console.group('当前状态：updated')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
beforeDestroy() {
console.group('当前状态：beforeDestroy')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},
destroyed() {
console.group('当前状态：destroyed')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
//组件销毁，清理定时器
clearInterval(this.t)
this.t = null
console.log('destoryed')
},
})
var vm = new Vue({
el: '#app',
data: {
isShow: true
},
methods:{
init(){
console.log('init')
},
},
mounted() {
console.log('mounted执行；了')
//ajax向后端获取数据
this.init()
},
})
</script>
</html>
itsdangerous模块加密解密
from itsdangerous.jws import TimedJSONWebSignatureSerializer # 导入模块itsdangerous
from django.conf import settings
def dumps(json,expires): # 序列化加密函数
"""
将字典加密，返回加密字符串
:param json: 字典
:return: 字符串
"""
serializer = TimedJSONWebSignatureSerializer('aaadad',expires) # aaadad 为盐 可自行填写
json_str = serializer.dumps(json).decode()
return json_str
# 反序列化解密函数
def loads(json_str,expires): # expires为过期时间 可写None
"""
将加密字符串解密
:param json_str: 加密字符串
:return: 字典
"""
serializer = TimedJSONWebSignatureSerializer('aaadad', expires) # 解密盐需保持一致
try:
json = serializer.loads(json_str)
except:
return None
else:
return json
info = {"name":'lqz'}
a = dumps(info,1) # 序列化后加密
print(a)
'''
eyJhbGciOiJIUzUxMiIsImlhdCI6MTYyNjMzMzU3OCwiZXhwIjoxNjI2MzMzNTc5fQ.eyJuYW1lIjoibHF6In0.9969J4QCiULUhpHWgAJeHe4nUyI-3CLE7Ixxack-36nb5eVl_RuZ86Im7RXJWHGEXyUGRmuNdUt0Ux3_HKJA4g
'''
b = loads(a,1) # 反序列化解密
print(b)
# {'name': 'lqz'}
浙公网安备 33010602011771号