Vue2.js 收集表单数据

最新推荐文章于 2024-04-26 17:54:13 发布

大坤...

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量570

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/red_HTML/article/details/127295741

版权

收集表单数据

在form上面绑定 submit 绑定来组织浏览器的默认事件 <form @submit.prevent="add">
使用v-model绑定来获取数据
多选要定义数组 radio单选和 select(option) 多选要设置value用来传递数据
JSON.stringifg( ) 将 JavaScript 对象转换为 JSON 字符串
修饰符： 1.删除空格: v-model.trim 2：传入到Vue里面的数字依旧为数字类型: v.model.number 3.延迟数据收集: v-model.lazy

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        //prevent 是拦截默认事件，passive是不拦截默认事件。
        <form @submit.prevent="add">
            账号：<input type="text" v-model.trim="user.account"><br><br>
            密码：<input type="password" v-model="user.paw"><br><br>
            年龄：<input type="number" v-model.number="user.number"><br><br>
            性别：男<input type="radio" value="男" name="sex" v-model="user.sex">
            女<input type="radio" value="女" name="sex" v-model="user.sex">
            <br><br>
            爱好：<input type="checkbox" value="吃" v-model="user.chackbox">吃
            <input type="checkbox" value="喝" v-model="user.chackbox">喝
            <input type="checkbox" value="睡觉" v-model="user.chackbox">睡觉
            <br><br>
            所属地区：<select v-model="user.option">
                <option value="">所属地区</option>
                <option value="天津">天津</option>
                <option value="北京">北京</option>
                <option value="石家庄">石家庄</option>
            </select><br><br>
            备注：<textarea v-model.lazy="user.textarea"></textarea> <br><br>
            用户协议：<input type="checkbox" v-model="user.deal"><a href="#">协议</a><br><br>
            <button>提交</button>
        </form>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                user: {
                    account: "",
                    paw: "",
                    number: "",
                    sex: "",
                    chackbox: [],
                    option: "",
                    textarea: "",
                    deal: false
                }
            },
            methods: {

                add() {
                    if (this.user.deal != false) {
                        console.log(JSON.stringify(this.user));
                        // this.user = ''
                    } else {
                        alert("请勾选协议")
                    }
                }
            },
        })
    </script>
</body>

</html>

Vue2.js 过滤器来转化时间格式

找到day.js官网下载 day.js文件
返回的格式：return dayjs(this.time).format("YYYY年MM月DD日 HH时mm分ss秒")
YYYY：年， MM：月， DD：日， HH：小时，mm：分钟， ss：秒钟

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>

<body>
    <div id="root">
        <h2>当前时间为：{{time}}</h2>
        <!-- 计算属性 -->
        <h2>当前时间为：{{comTime}}</h2>
        <!-- 方法 -->
        <h2>当前时间为：{{methodsTime()}}</h2>
        <!-- 过滤器实现 -->
        <h2>当前时间为：{{time | filtersTime()}}</h2>
        <!-- 全局过滤器实现 -->
        <h2>当前时间为：{{time | filtersTime("YYYY年MM月DD日 HH时mm分ss秒")|myFilter}}</h2>
    </div>
    <script>
        Vue.filter('myFilter', function (value) {
            console.log(value);
            return value.slice(0, 4)
        })
        new Vue({
            el: "#root",
            data: {
                time: new Date().getTime()
            },
            // 计算属性
            computed: {
                comTime() {
                    return dayjs(this.time).format("YYYY年MM月DD日 HH时mm分ss秒")
                }
            },
            // 方法  记得引入方法要加括号
            methods: {
                methodsTime() {
                    return dayjs(this.time).format("YYYY年MM月DD日 HH时mm分ss秒")
                }
            },
            // 过滤器实现
            filters: {
                filtersTime(value, str = "YYYY年MM月DD日") {
                    return dayjs(this.time).format(str)
                }
            }
        })
    </script>
</body>

</html>

内置指令

v-text 不会识别html 结构
v-html可以识别html结构
v-cloak Vue未加载之后整个标签都会隐藏需要结合display:none结合使用
v-once 只加载一次
v-pre 代表不是vue不用加载vue加载的时候就可以直接跳过了
严重注意：v-html有安全问题 1. 在网站上动态渲染任意html是非常危险的容易导致XSS攻击2.一定要在可信的内容上使用v-html用不要在用户提交的内容上（可能会在评论区添加连接用户点击后会跳转到其他链接）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="root">
        <h2>{{name}}</h2>
        <h2 v-text="age"> v-text不会解析html文件</h2>
        <h2 v-html="age"> v-html会解析html文件</h2>
        <hr>
        <!-- v-cloak Vue未加载之前整个标签都隐藏 -->
        <h2 v-cloak>111111111111:{{name}}</h2>
        <br>
        <!-- c-once只可以运行一次 -->
        <h2 v-once="n">{{n}} 只可以加一次</h2>
        <h2>{{n}}</h2>
        <button @click="n++">点击n加一</button>
        <hr>
        <!-- v-pre添加该指令就代表不是vue就可以直接跳过了 -->
        <h1 v-pre>v-pre添加该指令就代表不是vue就可以直接跳过了</h1>

    </div>
    <script>
        // setInterval({})
        setInterval(() => {
            new Vue({
                el: "#root",
                data: {
                    name: "html文本",
                    age: "<h1>age文本</h1>",
                    n: "0"
                }
            })
        }, 3000)

    </script>
</body>

</html>

官网解析：

v-cloak指令（没有值）

本质是一个特殊属性，Vue实例创建完毕并接管容器后会删掉v-cloak属性
使用css配合v-cloak解决网速慢时页面展示出{{xxx}} 的问题

v-once指令（有值）

v-noce所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

v-pre指令（没有值）

vue会跳过其所在节点的编译过程。
可以利用他跳过：没有使用指令语法，没有使用插值语法的节点会加快编译。

自定义指令

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

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

v-fbind里面的三种触发方式

bind(element, binding) {} ：绑定上就会调用一次，只触发一次
inserted(element, binding) {} :进入页面就会调用一次
update(element, binding) {} ：value里面的值进行更新他就会调用一次

使用方法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>{{name}}</h2>
        <h2>n+1：{{n}}</h2>
        <h2 v-big="n">{{n}}</h2>
        <!-- <button @click="n++">点击n自加</button> -->
        <input type="text" v-fbind:value="n">
        <button @click="n++">n+1</button>
    </div>
    <script>

        new Vue({
            el: "#root",
            data: {
                name: "自定义指令",
                n: 0
            },
            directives: {
                // 需求1：定义一个v-big指令和v-text功能类似，但会把绑定的数值放大10倍
                big(element, binding) {
                    // console.log(element); //<h2>n+20：0</h2>
                    // console.log(binding); //{name: 'big', rawName: 'v-big', value: 0, expression: 'n', modifiers: {…}, …}
                    element.innerText = binding.value * 10
                },
                // 需求2：定义一个v-fbind 和v-bind功能类似，但可以让其绑定的input元素默认获取焦点
                fbind: {
                    bind(element, binding) {
                        // 绑定上就会调用一次 只调用一次
                    },
                    inserted(element, binding) {
                        // 获取焦点
                        element.focus()
                        // 进入页面时会调用一次
                    },
                    update(element, binding) {
                        // value 的值更新就会被调用
                        element.value = binding.value
                        // 
                        element.focus()
                        console.log(binding);

                    }
                    // bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
                    //inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
                    //update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
                }
            }
        })
    </script>
</body>

</html>

全局指令

Vue.变量名（directivesx）(指令名，配置对象)

生命周期

beforeCreate() 还不可以获取到vm里面的数据
Created() 可以获取到vm里面的数据
beforeMount() 对数据进行修改页面不改变
Mounted() 对数据进行修改页面也发生改变
beforeUpdate() 页面上点击进行更新数据进行改变，页面不显示
update() 页面的数据进行更新页面上也会更新
beforeDestory( )数据进行与vue进行解绑但数据还可以查看
destory() 数据和vue进行解绑和销毁
this.$destroy() 点击vue与数据进行解绑
测试使用：debugger进行停止查看运行效果

代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>n+1: {{n}}</h1>
        <button @click="add">点击</button>
        <button @click="goodbye">点击销毁</button>
        <h2>您获得的奖是：{{kong}}</h2>
        <button @click="stop">停止</button>
        <button @click="outstanding">暗箱操作</button>
    </div>
    <script>
        let vm = new Vue({
            el: "#root",
            data: {
                n: 0,
                kong: "",
                awards: ['特等奖', '一等奖', '二等奖', '三等奖', '谢谢惠顾']
            },
            methods: {
                add() {
                    this.n++
                },
                goodbye() {
                    // 销毁 断开 vue
                    this.$destroy()
                },
                stop() {
                    // this.$destroy()
                    clearInterval(this.setis)
                },
                //暗箱操作
                outstanding() {
                    this.kong = '特等奖'
                }

            },
            beforeCreate() {
                // console.log(this.beforeCreate); //undefined
                // console.log(this); //无法获取到vm里面的数据
                // debugger
            },
            created() {
                // console.log(this.created)
                // console.log(this); //可以通过vm来获取到data里面的数据
                // debugger
            },
            beforeMount() {
                document.querySelector('h1').innerHTML("张三") //可以对dome数据进行修改但只在一瞬间 往下还是会背原始的dom覆盖
                // console.log(this.beforeMount) //未经过Vue编译
                // debugger
            },
            mounted() {
                // console.log(this.mounted); //经过Vue编译
                document.querySelector('h1').innerHTML("张三") //可以对dome数据进行修改了
                // debugger
                // setInterval(() => {
                //     var awards = Math.floor(Math.random(awards))
                //     this.kong = this.awards[index]
                // })

                // 1.先写一个定时器
                // 2.随机出一个1-5的数字
                // 3.定义一个空的变量 使用当前的数组随机数来进行改变下标来修改数组中的数
                this.setis = setInterval(() => {
                    var index = Math.floor(Math.random() * 5)
                    // console.log(index);
                    this.kong = this.awards[index]
                }, 200)

            },
            beforeUpdate() {
                // console.log(this.beforeUpdate) //数据更新之后页面还未更新
                // debugger
            },
            updated() {
                // console.log(this.updated) //数据更新，页面也就更新
                // debugger
            },
            beforeDestroy() {
                console.log('beforeDestroy') //只能使用数据都已经解绑
                // this.n++
                clearInterval(this.setis)
                // debugger
            },
            // destroyed() {
            //     console.log('destroyed') //最后销毁和解绑
            //     debugger 
            // },


        })
    </script>
</body>

</html>

大坤...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.js 收集表单数据

需求1：定义一个v-big指令和v-text功能类似，但会把绑定的数值放大10倍需求2：定义一个v-fbind 和v-bind功能类似，但可以让其绑定的input元素默认获取焦点v-fbind里面的三种触发方式bind(element, binding) {} ：绑定上就会调用一次，只触发一次inserted(element, binding) {} :进入页面就会调用一次update(element, binding) {} ：value里面的值进行更新他就会调用一次
复制链接

扫一扫