Vue2.js 收集表单数据

收集表单数据

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

    
    
    
    
    



    

        //prevent 是拦截默认事件，passive是不拦截默认事件。
        
            账号：


            密码：


            年龄：


            性别：男
            女
            


            爱好：吃
            喝
            睡觉
            


            所属地区：
                所属地区
                天津
                北京
                石家庄
            


            备注： 


            用户协议：协议


            提交
        
    
    

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

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

    
    
    
    
    
    



    

        
当前时间为：{{time}}
        
        
当前时间为：{{comTime}}
        
        
当前时间为：{{methodsTime()}}
        
        
当前时间为：{{time | filtersTime()}}
        
        
当前时间为：{{time | filtersTime("YYYY年MM月DD日 HH时mm分ss秒")|myFilter}}
    
    

内置指令

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

    
    
    
    
    
    



    

        
{{name}}
        
 v-text不会解析html文件
        
 v-html会解析html文件
        

        
        
111111111111:{{name}}
        

        
        
{{n}} 只可以加一次
        
{{n}}
        点击n加一
        

        
        
v-pre添加该指令就代表不是vue就可以直接跳过了

    
    

官网解析：

v-cloak指令（没有值）

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

 v-once指令（有值）

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

 v-pre指令（没有值）

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

 自定义指令

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

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

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

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

 使用方法：

    
    
    
    
    



    

        
{{name}}
        
n+1：{{n}}
        
{{n}}
        
        
        n+1
    
    

 全局指令

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

生命周期

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

 代码展示：

    
    
    
    
    



    

        
n+1: {{n}}
        点击
        点击销毁
        
您获得的奖是：{{kong}}
        停止
        暗箱操作