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">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: ''
},
methods: {
handelKey1(ev) {
console.log(ev)
if (ev.keyCode == 13) {
console.log('按下了回车')
}
},
handelKey2() {
console.log('回车键按下了')
},
handelClick(ev) {
console.log(ev)
}
}
})
</script>
</html>
2 表单控制
<!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>
<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: {
name: '',
password: '',
isRem: false,
gender: '',
hobby:[],
},
methods: {
submit() {
console.log(this.name)
console.log(this.password)
console.log(this.isRem)
}
}
})
</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>
<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 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>
<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 in this.checkGroup) {
total += this.checkGroup[i].price * this.checkGroup[i].number
}
}
return total
},
handleChange() {
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>
<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 in this.checkGroup) {
total += this.checkGroup[i].price * this.checkGroup[i].number
}
}
return total
},
handleChange() {
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进阶
lazy:等待input框的数据绑定时区焦点之后再变化
number:数字开头,只保留数字,后面的字母不保留;字母开头,都保留
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.trim="name"> 输入内容是:{{name}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: ''
},
})
</script>
</html>
5 Vue生命周期钩子
<!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">
</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执行;了')
this.init()
},
})
</script>
</html>