双向: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。