1.表单中的数据收集
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<form action="Vue练习1.html" method="get" @submit.prevent="submit()">
<!-- required是h5提供的属性 表单必须填入值-->
用户名:<input type="text" name="username" value="" required="required" placeholder="请输入用户名" v-model.trim="username" /><br>
密码:<input type="password" name="password" value="" required="required" placeholder="请输入密码" v-model.trim="password" /><br>
性别:<input type="radio" name="sex" value="1" v-model="sex" />男 <input type="radio" name="sex" value="0" v-model="sex" />女<br>
爱好:<input type="checkbox" name="hobby" value="run" v-model="hobby" />跑步
<input type="checkbox" name="hobby" value="game" v-model="hobby" />游戏
<input type="checkbox" name="hobby" value="sing" v-model="hobby" />唱歌<br>
<select name="xl" v-model="xueli">
<option value="1">本科</option>
<option value="2">研究生</option>
<option value="3">博士</option>
</select><br>
<input type="submit" value="提交" />
</form>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#box',
data: {
username: '',
password: '',
sex: '',
hobby: [],
xueli: ''
},
methods: {
submit: function() {
var jsonObj = {
'username': this.username,
'password': this.password,
'sex': this.sex,
'hobby': this.hobby,
'xueli': this.xueli
};
var jsonstr=JSON.stringify(jsonObj)
alert(jsonstr);
}
}
})
</script>
</html>
注意：
- 可以给v-model添加number修饰符，可以将用户的输入值转为数值类型。
- 给v-model添加trim修饰符，可以自动过滤用户输入的首尾空白字符串。
2.生命周期函数
（1）概念
生命周期函数也叫做钩子函数，它是Vue实例在某一个时间点会自动执行的函数。
（2）图示
其中红色border包裹起来的就是Vue的生命周期函数。
- （1）beforeCreate是vue实例创建前执行的，在所有vue生命周期函数第一位，当你打开网页，el和data还未初始化。
- （2）created完成创建，data已经初始化el尚未初始化
- （3）beforeMount载入前，此时el和data都已经初始化
- （4）mounted载入后，此时html也已经渲染完成，你的ajax数据可以在这里面请求获得
- （5）beforeUpdate 更新前状态（view层的数据变化前，不是data中的数据改变前）
- （6）updated 更新之后执行
- （7）beforeDestroy 销毁前
- （8）destroy 销毁后 （Dom元素存在，只是不再受vue控制）
（3）案例演示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="el">
<!--{{msg}}-->
<button @click="handleClick">clickMe</button>
</div>
<script>
new Vue({
el: '#el',
data: {
msg: 'hello world'
},
methods:{
handleClick: function () {
this.msg = 'data after modify';
}
},
beforeCreate: function () {
console.log('vue实例被创建前，data和el还未被初始化');
},
created: function () {
console.log('vue实例被创建成功了，data被初始化了，el还没有');
},
beforeMount: function () {
console.log('这个时候el和data都被初始化了');
},
mounted: function () {
console.log('现在html也被渲染完成');
},
beforeUpdate: function () {
console.log('view层的数据变化前，不是data，可以将我的msg注释掉，这个函数就不会被执行');
},
updated: function () {
console.log('更新之后执行');
},
beforeDestroy: function () {
console.log('beforeDestroy');
},
destroyed: function () {
console.log('destroyed');
}
})
</script>
</body>
</html>
3.自定义过滤器
（1）过滤器的创建
过滤器的本质是一个有参数，有返回值的方法。
filters:{
myCurrency:function(myInput){
return 处理后的数据
}
}
（2）过滤器的使用
语法
<any>{{表达式 | 过滤器}}</any>
（3）案例演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 让数据msg展示大写字母 -->
<h1>{{msg|daxie}}</h1>
<!-- 调用过滤器可以传递参数 -->
<h1>{{data|formatTime('YYYY年MM月DD日 HH:mm:ss')}}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'abcde',
date:new Date()
},
filters:{
daxie:function(value){
var str=value.toUpperCase();
return str
},
formatTime:function(value,formatstr){
return moment(value).format(formatstr)
}
}
})
</script>
</html>
4.获取标签对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 获取标签对象 -->
<!-- ref 给标签起个名字 -->
<h1 ref="myh1">呼呼拉埃</h1>
<h1></h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
},
mounted:function(){
var obj=this.$refs.myh1.innerHTML;
alert(obj)
}
})
</script>
</html>
5.v-cloak指令
（1）v-cloak指令的作用
当网页加载很慢的时候，vue.js文件没有完成加载时，在页面上会出现{{messa}}这种的字样，等到vue创建实例，编译模板是，DOM就会被替换掉，过程中屏幕上会出现闪动一下。这样严重影响了用户的体验，v-cloak就可以解决这样的问题。
（2）案例演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="box">
<h1 v-cloak>{{msg}}</h1>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'qwert'
}
})
</script>
</html>
