[XXX商城项目-笔记]Vue.js的双向绑定

双向:HTML、JS中都需要进行绑定

导入vue.js库和ajax请求的库
vue框架推荐使用axios实现ajax请求

根据HTML中的div盒子标签在JS中创建vue对象

// 创建Vue对象
let vm = new Vue({
    el: '#app',// 通过ID选择器找到绑定的HTML内容
    data: { //数据对象
        // v-model

        // v-show

        //error_message
    },
    methods: {//定义和实现事件方法

    }
})

实现用户的交互和页面局部刷新效果

1.如何使用

1.准备div盒子标签
包裹要交互的区域

<body>
<div id="app">
    
    ......
    
</div>
</body>

2.register.html

  • 绑定内容:变量、事件、错误提示等

2.重点

vue绑定的过程和用户的交互过程一一对应

  1. 用户输入数据-----vue用v-model=“变量名”进行接收
  2. 输入完毕,鼠标失去焦点----veu用@blur=“事件方法”进行监听,在这个事件方法中对数据进行校验
  3. 输入有误时展示提示信息----vue用v-show进行选择性的显示
  4. 显示内容----vue读取变量显示数据“{{ 变量名 }}”

3.例子

<li>
    <label>用户名:</label>
    <input type="text" v-model="username" @blur="check_username" name="username" id="user_name">
    <span class="error_tip" v-show="error_name">{{ error_name_message }}</span>
</li>
  1. 监听表单递交事件@submit
<form method="post" class="register_form" @submit="on_submit">
  1. vue前端渲染有延迟,使用v-cloak,等所有变量加载完毕后再显示,避免变量名一闪而过
  2. csrf验证
{{ csrf_input }}

知识点

=====的区别

1.== 用于比较、判断两者相等,比较时可自动换数据类型

2.=== 用于(严格)比较、判断两者(严格)相等,不会进行自动转换,要求进行比较的操作数必须类型一致,不一致时返回flase。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值