6.vue基础（五）创建表单数据-过滤器-内置指令-自定义指令-生命周期

必须午睡的xue薇

已于 2022-04-26 20:31:02 修改

阅读量469

点赞数

分类专栏：前端-vue 文章标签： html5 vue.js javascript 前端框架

于 2022-04-26 20:29:18 首次发布

本文链接：https://blog.csdn.net/qq_41634943/article/details/124436372

版权

前端-vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

1.创建表单数据
2.过滤器
3.内置指令
4.自定义指令
- 4.1 v-big指令
- 4.2 v-fbind指令
5.生命周期

1.创建表单数据

<div id="root">
		<form @submit.prevent="demo">
			账号：<input type="text" v-model.trim="userInfo.account"> <br /><br />
			密码：<input type="password" v-model="userInfo.password"> <br /><br />
			年龄：<input type="number" v-model.number="userInfo.age"> <br /><br />
			性别：
			男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
			女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br /><br />
			爱好：
			学习<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">
			<br /><br />
			所属校区
			<select v-model="userInfo.city">
				<option value="">请选择校区</option>
				<option value="beijing">北京</option>
				<option value="shanghai">上海</option>
				<option value="shenzhen">深圳</option>
				<option value="wuhan">武汉</option>
			</select>
			<br /><br />
			其他信息：
			<textarea v-model.lazy="userInfo.other"></textarea> <br /><br />
			<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
			<button>提交</button>
		</form>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false

	new Vue({
		el: '#root',
		data: {
			userInfo: {
				account: '',
				password: '',
				age: 18,
				sex: 'female',
				hobby: [],
				city: 'beijing',
				other: '',
				agree: ''
			}
		},
		methods: {
			demo() {
				console.log(JSON.stringify(this.userInfo))
			}
		}
	})
</script>

注意：

v-model的三个修饰符：

lazy：失去焦点再收集数据

<textarea v-model.lazy="userInfo.other"></textarea>

number：输入字符串转为有效的数字

年龄：<input type="number" v-model.number="userInfo.age">

rim：输入首尾空格过滤

账号：<input type="text" v-model.trim="userInfo.account">

若：

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

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: [],//必须是数组



<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>

agree: ''

若：，则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">

将对象转换成json格式

console.log(JSON.stringify(this.userInfo))

2.过滤器

显示出时间戳

Date.now()

1650873021687

首先需要引入dayjs文件

<script type="text/javascript" src="../js/dayjs.min.js"></script>

将时间戳转换成标准的时间格式

2.1计算属性实现

<h3>现在是：{{fmtTime}}</h3>

data: {
    time: 1650873021687, 
},
computed: {
    fmtTime() {
       return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
    }
},

2.2 methods实现

<h3>现在是：{{getFmtTime()}}</h3>//注意：需要加括号

		methods: {
			getFmtTime() {
				return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
			}
		},

2.3过滤器实现

<!-- 过滤器实现 -->
<h3>现在是：{{time | timeFormater}}</h3>
<!-- 过滤器实现（传参） ,可以传递两个参数，一个是时间，一个是括号内的东西，并且可以多个过滤器一起使用-->
<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>

	//全局过滤器
	Vue.filter('mySlice', function (value) {
		return value.slice(0, 4)
	})

		//局部过滤器
		filters: {
			timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {//如果有参数的话，就使用带的参数格式，否则使用这个格式
				// console.log('@',value)
				return dayjs(value).format(str)//value就是time
			}
		}

<h3 :x="msg | mySlice">尚硅谷</h3>
<h2>{{msg | mySlice}}</h2>

3.内置指令

3.1 v-text指令

		<div>你好，{{name}}</div>
		<div v-text="name">nihao</div>//会替换掉节点中的内容
		<div v-text="str"></div>//不能解析html标签

			data:{
				name:'尚硅谷',
				str:'<h3>你好啊！</h3>'
			}

3.2 v-html指令

			<div>你好，{{name}}</div>
			<div v-html="str"></div>//可以解析标签

			data:{
				name:'尚硅谷',
				str:'<h3>你好啊！</h3>',
			}

3.3 v-cloak指令

v-cloak指令（没有值）：

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

	<style>
		[v-cloak]{
			display:none;
		}
	</style>

	<h2 v-cloak>{{name}}</h2>

	<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>

3.4 v-once指令

v-once指令：

1.v-once所在节点在初次动态渲染后，就视为静态内容了。

2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

			<h2 v-once>初始化的n值是:{{n}}</h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>

			data:{
				n:1
			}

3.5 v-pre指令

v-pre指令：

1.跳过其所在节点的编译过程。

2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

			<h2 v-pre>Vue其实很简单</h2>

4.自定义指令

4.1 v-big指令

定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍

			<h2>当前的n值是：<span v-text="n"></span> </h2>
			<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
			<h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2>
			<button @click="n++">点我n+1</button>

			data:{
				n:1
			},
                //局部写法
			directives:{
				//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
				'big-number'(element,binding){//element就是span标签，binding.value是n
					element.innerText = binding.value * 10
				}, 
				big(element,binding){
					console.log('big',this) //注意此处的this是window
					element.innerText = binding.value * 10
				},
            }
}

	//定义全局指令
	 Vue.directive('big',function(element,binding){
			element.innerText = binding.value * 10
	})

4.2 v-fbind指令

定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点

		<input type="text" v-fbind="n">

		//局部写法
		directives: {
			fbind: {
				//指令与元素成功绑定时（一上来）
				bind(element, binding) {
					element.value = binding.value
				},
				//指令所在元素被插入页面时
				inserted(element, binding) {
					element.focus()
				},
				//指令所在的模板被重新解析时
				update(element, binding) {
					element.value = binding.value
				}
			}
		}


	//定义全局指令
	 Vue.directive('fbind',{
		//指令与元素成功绑定时（一上来）
		bind(element,binding){
			element.value = binding.value
		},
		//指令所在元素被插入页面时
		inserted(element,binding){
			element.focus()
		},
		//指令所在的模板被重新解析时
		update(element,binding){
			element.value = binding.value
		}
	})

5.生命周期

又名：生命周期回调函数、生命周期函数、生命周期钩子

要实现这样一个功能，文字随着时间慢慢变淡，完成消失后，opacity又变成1，再慢慢变淡。

		<h2 :style="{opacity}">欢迎学习Vue</h2>
注意：写根据vue渲染的样式时style要带冒号，也就是:style,而且后面具体样式要写成对象的方式，这里应该是{opacity：opacity}，只不过用了对象的简写形式

            data: {
                opacity: 1
            },
            //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
            mounted() {
                console.log('mounted', this)//此处的this是vm
                setInterval(() => {
                    this.opacity -= 0.1
                    //console.log(this.opacity)
                    if (this.opacity <= 0) this.opacity = 1//因为opacity的值不是0.1一个一个的减
                }, 1000)
            },
            beforeCreate() {
				console.log('beforeCreate')
			},
			created() {
				console.log('created')
			},
			beforeMount() {
				console.log('beforeMount')
			},
			mounted() {
				console.log('mounted')
			},
			beforeUpdate() {
				console.log('beforeUpdate')
			},
			updated() {
				console.log('updated')
			},
			beforeDestroy() {
				console.log('beforeDestroy')
			},
			destroyed() {
				console.log('destroyed')
			},

注意：

//开始计时器
this.timer = setInterval(() => {
    console.log('setInterval')
    this.opacity -= 0.01
    if(this.opacity <= 0) this.opacity = 1
},16)

//关闭计时器
clearInterval(this.timer)

常用的是：mounted，beforeDestroy（不要在这操作数据，因为即便操作数据，也不会再触发更新流程了。）

必须午睡的xue薇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.vue基础（五）创建表单数据-过滤器-内置指令-自定义指令-生命周期

文章目录1.创建表单数据2.过滤器2.1计算属性实现2.2 methods实现2.3过滤器实现3.内置指令3.1 v-text指令3.2 v-html指令3.3 v-cloak指令3.4 v-once指令3.5 v-pre指令4.自定义指令4.1 v-big指令4.2 v-fbind指令5.生命周期1.创建表单数据<div id="root"> <form @submit.prevent="demo"> 账号：<input type="text" v-model.
复制链接

扫一扫