一、收集表单数据

1. 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

   账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
   密码：<input type="password" v-model="userInfo.password"> <br/><br/>

2. 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

   男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
   女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>

3. 若：<input type="checkbox"/>

   //1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
   <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
   
   agree:''
   
   
   //2.配置input的value属性:(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）；(2)v-model的初始值是数组，那么收集的的就是value组成的数组
   学习<input type="checkbox" v-model="userInfo.hobby" value="study">
   打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
   吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
   
   hobby:[]
   

   　　

4. 备注：v-model的三个修饰符：（1）lazy：失去焦点再收集数据；（2）number：输入字符串转为有效的数字；（3）trim：输入首尾空格过滤

二、过滤器

1. 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
2. 使用：

   <div id="root">
   	<h2>显示格式化后的时间</h2>
   	<!-- 计算属性实现 -->
   	<h3>现在是：{{fmtTime}}</h3>
   	<!-- methods实现 -->
   	<h3>现在是：{{getFmtTime()}}</h3>
   	<!-- 过滤器实现 -->
   	<h3>现在是：{{time | timeFormater}}</h3>
   	<!-- 过滤器实现（传参） -->
   	<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>    //过滤器也可以接收额外参数、多个过滤器也可以串联

   	<h3 :x="msg | mySlice">饭啊饭</h3>
   </div>
   
   <div id="root2">
   	<h2>{{msg | mySlice}}</h2>
   </div>
   
   <script type="text/javascript">
   Vue.config.productionTip = false
   //全局过滤器
   Vue.filter('mySlice',function(value){
   	return value.slice(0,4)
   })
   		
   new Vue({
   	el:'#root',
   	data:{
   		time:1621561377603, //时间戳
   		msg:'你好，饭啊饭'
   	},
   	computed: {         //计算属性实现
   		fmtTime(){
   			return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
   		}
   	},
   	methods: {          //methods实现
   		getFmtTime(){
   			return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
   		}
   	},
   	//局部过滤器
   	filters:{
   		timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
   			return dayjs(value).format(str)
   		}
   	}
   })
   
   new Vue({
   	el:'#root2',
   	data:{
   		msg:'hello,fanafan!'
   	}
   })
   </script>
   

三、内置指令

1. 目前学过的指令： v-bind    : 单向绑定解析表达式, 可简写为 :xxx v-model   : 双向数据绑定 v-for     : 遍历数组/对象/字符串 v-on      : 绑定事件监听, 可简写为@ v-if      : 条件渲染（动态控制节点是否存存在） v-else    : 条件渲染（动态控制节点是否存存在） v-show    : 条件渲染 (动态控制节点是否展示)
2. v-text指令：向其所在的节点中渲染文本内容。

   <div v-text="name"></div>
   
   data:{
   	name:'饭啊饭'
   }
   

3. v-html指令：向指定节点中渲染包含html结构的内容。 v-html有安全性问题！！！！在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
4. v-cloak指令（没有值）：（1）本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。（2）使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

   <div id="root">
   	<h2 v-cloak>{{name}}</h2>
   	</div>
   	<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
   

5. v-once指令：（1）v-once所在节点在初次动态渲染后，就视为静态内容了。（2）以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
6. v-pre指令：跳过其所在节点的编译过程。可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。