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）图示

python获取vue标签 vue获取标签对象_vue

其中红色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>