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

最新推荐文章于 2024-09-05 20:32:41 发布

枪枪枪

最新推荐文章于 2024-09-05 20:32:41 发布

阅读量128

点赞数

分类专栏： Django

本文链接：https://blog.youkuaiyun.com/az9996/article/details/111145476

版权

Django 专栏收录该内容

10 篇文章

订阅专栏

本文介绍Vue.js的基本使用方法，包括如何创建Vue实例、实现用户输入的数据绑定及校验，并通过示例详细展示了Vue指令如v-model、v-show的功能，以及如何处理表单提交等常见操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

双向：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绑定的过程和用户的交互过程一一对应

用户输入数据-----vue用v-model=“变量名”进行接收
输入完毕，鼠标失去焦点----veu用@blur=“事件方法”进行监听，在这个事件方法中对数据进行校验
输入有误时展示提示信息----vue用v-show进行选择性的显示
显示内容----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>

监听表单递交事件@submit

<form method="post" class="register_form" @submit="on_submit">

vue前端渲染有延迟，使用v-cloak，等所有变量加载完毕后再显示,避免变量名一闪而过
csrf验证

{{ csrf_input }}

知识点

`==`和`===`的区别

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

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