1、表单数据的自动收集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id="demo">
<[email protected]禁用表单自动提交-->
<form action="/xxx" @submit.prevent="handleSubmit">
<span>用户名: </span>
<input type="text" v-model="username"><br>
<span>密码: </span>
<input type="password" v-model="pwd"><br>
<span>性别: </span>
<input type="radio" id="female" value="女" v-model="sex">
<!--Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点。-->
<label for="female">女</label>
<input type="radio" id="male" value="男" v-model="se">
<label for="male">男</label><br>
<span>爱好: </span>
<input type="checkbox" id="basket" value="basket" v-model="likes">
<label for="basket">篮球</label>
<input type="checkbox" id="foot" value="foot" v-model="likes">
<label for="foot">足球</label>
<input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
<label for="pingpang">乒乓</label><br>
<span>城市: </span>
<select v-model="cityId">
<option value="">未选择</option>
<!--遍历填充下拉框-->
<option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
</select><br>
<span>介绍: </span>
<textarea rows="10" v-model="info"></textarea><br><br>
<input type="submit" value="注册">
</form>
</div>
<script>
new Vue({
el:'#demo',
data:{
username:'小兵兵',
pwd:'000000',
sex:'男',
likes: ['foot'],
allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
cityId: '2',
info: ''
},
methods:{
log(){
console.log.apply(console,arguments)
},
/**
* 收集表单数据信息
*/
handleSubmit(){
this.$options.methods.log("this==========>",this)
//调用log方法
this.$options.methods.log("username==========>",this.username)
this.$options.methods.log("passwd==========>",this.pwd)
alert('提交注册的ajax请求')
}
}
})
</script>
</body>
</html>
2、生命周期
测试一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div id="test">
<button @click="destroyVue">destory vue</button>
<!--显示与隐藏-->
<p v-if="isShow">尚硅谷IT教育</p>
</div>
<script>
//创建一个Vue实例
new Vue({
el: '#test',
data: {
isShow: true
},
mounted: function () {
this.log("this===========>", this)
/*
此时的this是Window
setInterval(function () {
console.log('setInterval this==========>',this)
this.log('setInterval this==========>', this) //会报错,log方法属于Vue实例的
},1000)
*/
//开启定时器
this.intervalId=setInterval(() => {
this.log('setInterval this==========>', this)
//显示与隐藏
this.isShow=!this.isShow
}, 1000)
},
/**
*执行生命周期销毁前的准备工作
*/
beforeDestroy(){
this.log('beforeDestroy==========>')
//清除定时器任务
clearInterval(this.intervalId)
},
methods: {
log() {
console.log.apply(console, arguments)
},
destroyVue(){
//执行生命周期销毁工作
this.$destroy()
}
},
})
</script>
</body>
</html>
测试二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<!--
1. vue对象的生命周期
1). 初始化显示
* beforeCreate()
* created()
* beforeMount()
* mounted()
2). 更新状态
* beforeUpdate()
* updated()
3). 销毁vue实例: vm.$destory()
* beforeDestory()
* destoryed()
2. 常用的生命周期方法
created()/mounted(): 发送ajax请求, 启动定时器等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器
-->
<div id="test">
<button @click="destroyVue">destory vue</button>
<p v-if="isShow">尚硅谷IT教育</p>
</div>
<script>
new Vue({
el: '#test',
data: {
isShow: true
},
beforeCreate() {
//this.log('this=========>',this) 报错
console.log('beforeCreate===========>')
},
created() {
this.log('created=============>')
},
beforeMount() {
this.log('beforeMount===========>')
},
mounted() {
this.log('mounted============>')
this.intervalId = setInterval(() => {
this.log('setInterval==========>')
this.isShow = !this.isShow
}, 1000)
},
beforeUpdate() {
this.log('beforeUpdate============>')
},
updated() {
this.log('updated============>')
},
beforeDestroy() {
this.log('beforeDestroy==========>')
// 执行收尾的工作
clearInterval(this.intervalId)
},
methods: {
//自定义log函数
log() {
console.log.apply(console, arguments)
},
//定义函数2
destroyVue: function () {
this.log('destroyVue===========>')
//执行生命周期销毁工作
this.$destroy()
}
}
})
</script>
</body>
</html>