表单控制

// 1 checkbox
单选
多选
// 2 radio
单选 <body>
<div id="app">
<h1>checkbox单选</h1>
<p>用户名: <input type="text" v-model="username"></p>
<p>密码: <input type="password" v-model="password"></p>
<p>记住密码: <input type="checkbox" v-model="remember"></p>
<hr>
用户名:{{username}}----->密码:{{password}}------>记住密码:{{remember}} <h1>checkbox多选</h1>
<p>用户名: <input type="text" v-model="username"></p>
<p>密码: <input type="password" v-model="password"></p>
<p>记住密码: <input type="checkbox" v-model="remember"></p>
<p>爱好:</p>
<p>足球:<input type="checkbox" v-model="hobby" value="1"></p>
<p>篮球:<input type="checkbox" v-model="hobby" value="2"></p>
<p>乒乓球:<input type="checkbox" v-model="hobby" value="3"></p>
<hr>
用户名:{{username}}----->密码:{{password}}------>记住密码:{{remember}}----->爱好:{{hobby}} <h1>radio单选</h1>
<p>用户名:<input type="text" v-model="username"></p>
<p>密码:<input type="password" v-model="password"></p>
<p>记住密码:<input type="checkbox" v-model="remember"></p>
<p>爱好:</p>
<p>足球:<input type="checkbox" v-model="hobby" value="1"></p>
<p>篮球:<input type="checkbox" v-model="hobby" value="2"></p>
<p>乒乓球:<input type="checkbox" v-model="hobby" value="3"></p>
<p>性别:</p>
<p>男:<input type="radio" v-model="gender" value="1"></p>
<p>女:<input type="radio" v-model="gender" value="2"></p>
<p>保密:<input type="radio" v-model="gender" value="3"></p>
<hr>
用户名:{{username}}--&ndash;&gt;密码:{{password}}----> {{remember}}--->爱好:{{hobby}}--->性别:{{gender}}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
username: '',
password: '',
remember: false,
hobby:[],
gender:''
},
})
</script>

js循环补充

<script>
var arr = [1,2,3,4,5,6,7]
// 1 基础for循环
// for(var i = 0;i<arr.length;i++){
// console.log(arr[i])
// } // 2 in的循环(不怎么用),循环出索引
// for (i in arr){
// // console.log(i)
// console.log(arr[i])
// } // 3 of循环 es6的语法 循环出value值
// for (i of arr){
// console.log(i)
// } // 4 数组的循环 值在前索引在后
// arr.forEach(function(value,index){
// console.log(index,'-----',value)
// }) // 5 jQuery的循环 索引在前值在后
$.each(arr,function (index,value) {
console.log(index,'----',value)
})
</script>

购物车案例

<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">购物车</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>商品id</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
<th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
</tr>
</thead>
<tbody>
<tr v-for="good in good_list">
<th>{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>
<button class="btn" @click="handleJian(good)">-</button>
{{good.number}}
<button class="btn" @click="handleJia(good)">+</button>
</td>
<td><input type="checkbox" :value="good" v-model="checkGroup" @change="handleOne"></td>
</tr>
</tbody>
</table>
<hr>
选中了:{{checkGroup}}
<h3>总价格:{{getPrice()}}</h3>
<h3>选中了checkbox,checkGroup会发生变化,页面也在变,都会重新刷新页面。函数就会重新执行</h3>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
good_list: [
{id: 1, name: '钢笔', price: 12, number: 1},
{id: 2, name: '脸盆', price: 20, number: 1},
{id: 3, name: '毛笔', price: 6, number: 1},
{id: 4, name: '圆珠笔', price: 8, number: 1},
{id: 5, name: '铅笔', price: 1, number: 1},
],
checkGroup: [],
checkAll: false,
},
methods: {
getPrice() {
// 1 根据checkGroup选中的计算
// 循环checkGroup 拿出价格*数量 累加 最后返回
var total = 0
for (item of this.checkGroup) {
total += item.price * item.number
}
return total
},
handleCheckAll() {
// console.log(this.checkAll)
// 全选中:对钩都打上 js中的含义是:checkGroup变量满值
if (this.checkAll){
this.checkGroup = this.good_list // 全选
}else {
this.checkGroup = [] // 全不选
}
},
handleOne(){
// 判断checkGroup的长度 是否等于good_list的长度
if (this.checkGroup.length === this.good_list.length){
this.checkAll = true
}else {
this.checkAll = false
}
},
handleJian(good){
if (good.number > 1){
good.number--
}else {
alert('不能减了')
}
},
handleJia(good){
good.number++
}
}
})
</script>

v-model

v-model 之lazy、number、trim
// lazy:等待input框的数据绑定失去焦点之后再变化
// number:数字开头,只保留数字,后面的字母不保留;字母开头,都保留
// trim:去除首尾的空格 <body>
<div id="app">
<h1>lazy修饰符</h1>
<input type="text" v-model.lazy="username">-------{{username}}
<h1>number修饰符</h1>
<input type="text" v-model.number="username1">------{{username1}}
<h1>trim修饰符</h1>
<input type="text" v-model.trim="username2">-----{{username2}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: '',
username1: '',
username2: '',
},
})
</script>

与后端交互的三种方式

# 后端写了一堆接口
# 前端现在发送请求
# 前后端要打通--->从前端发送ajax--->核心:使用js发送http请求,接收返回
原生js,可以开启ajax,但是原生js开启,比较麻烦,需要做浏览器兼容,有坑(基本不写)
jQuery,写了个兼容所有浏览器的,$.ajax(),不仅仅有ajax,还封装了很多dom操作
如果在Vue中使用它,不合适
axios:第三方的ajax包(之后用这个)
fetch:原生js发送ajax请求,有的浏览器也不兼容 # 写个后端:flask
# pip3 install flask from flask import Flask,jsonify

方式一:使用jQuery的ajax

<body>
<div id="app">
<button @click="handleLoad">点我加载数据</button>
<hr>
你的名字是:{{name}},你的年龄是{{age}}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '',
age: '',
},
methods: {
// 请求发送成功,后端执行了,但是被浏览器拦截了,因为有跨域问题
// 当前请求地址,如果向非当前地址栏中的地址发送请求,就会出现跨域
// 1.jQuery的ajax请求
handleLoad(){
$.ajax({
url:'http://127.0.0.1:5000',
type:'get',
success:data =>{
console.log(typeof data)
var res = JSON.parse(data)
this.name = res.name
this.age = res.age
}
})
},
},
})
</script>

方式二:使用js原生的fetch(目前不用)

<body>
<div id="app">
<button @click="handleLoad">点我加载数据</button>
<hr>
你的名字是:{{name}},你的年龄是{{age}}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '',
age: '',
},
methods: {
handleLoad() {
// var _this = this
// fetch('http://127.0.0.1:5000').then(function (response) {
// // console.log(response)
// return response.json()
// }).then(function (res) {
// // console.log(res)
// _this.name = res.name
// _this.age = res.age
// }) // 箭头函数写法
fetch('http://127.0.0.1:5000').then(response=>response.json().then(res=>{
this.name = res.name
this.age = res.age
}))
}
},
})
</script>

方式三:使用axios,以后都用这个

<body>
<div id="app">
<button @click="handleLoad">点我加载数据</button>
<hr>
你的名字是:{{name}},你的年龄是{{age}}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
name: '',
age: '',
},
methods: {
handleLoad() {
// var _this = this
// axios.get('http://127.0.0.1:5000')
// .then(function (response) {
// // console.log(response.data);
// _this.name = response.data.name
// _this.age = response.data.age
// })
// .catch(function (error) {
// console.log(error);
// });
// 箭头函数写法
axios.get('http://127.0.0.1:5000').then(res => {
this.name = res.data.name
this.age = res.data.age
}).catch(error => {
console.log(error)
})
}
},
})
</script>

箭头函数

<script>
// 箭头函数
// 1.无参数,无返回值
let f = function () {
console.log('我是匿名函数')
}
let f = () => {
console.log('我是匿名函数')
}
f() // 2.有一个参数,没有返回值,可以省略括号
let f = function (name) {
console.log('我是匿名函数',name)
}
let f = name => {
console.log('我是匿名函数',name)
}
f('XxMa') // 3.多个参数,不能省略括号
let f = function (name,age) {
console.log('我是匿名函数',name,age)
}
let f = (name,age) => {
console.log('我是匿名函数',name,age)
}
f('XxMa',19) // 4.多个参数,不能省略括号,一个返回值
let f = (name,age) => {
return name + 'nb'
}
// 简写
let f = (name,age) => name + 'nb'
let res = f('XxMa',19)
console.log(res) // 5.一个参数,一个返回值
let f = name => name + 'nb'
let res = f('XxMa',19)
console.log(res)
</script>

Vue——表单控制、购物车案例、v-model进阶、与后端交互三种方式、箭头函数的更多相关文章

  1. Vue框架-03:JS的几种循环方式,Key值的解释,数组/对象的检测与更新,input事件,v-model数据双向绑定,过滤案例,事件修饰符,按键修饰符,表单控制

    目录 前端开发之Vue框架 一.JS循环的几种方式 1.v-for可循环的变量 2.js的循环方式 二.Key值的解释 三.数组.对象的检测与更新 四.input事件 五.v-model双向数据绑定 ...

  2. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  3. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  4. vue 表单校验(二)

    vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...

  5. 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...

  6. Vue表单

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson11 一 vue表单 实在是太简单了,直接来个例子 <!DOC ...

  7. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  8. Vue表单绑定(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  9. vue 表单校验 一

    表单校验 一 最近使用elment-ui表单进行各种校验,心力交瘁,依旧不能很好地解决,先列出自己的归类,后期一个个攻破 表单校验史 表单校验准则 参考资源 1 2 3 4 5 第一种 显示明确的错误 ...

  10. vue表单验证--veevalidate使用教程

    vue表单验证----vee-validate使用教程 官网:https://baianat.github.io/vee-validate/ 一.安装 npm install vee-validate ...

随机推荐

  1. Spring 注解整理

    更多内容,前往IT-BLOG 一.核心容器 [1]@Configuration:告诉 Spring 这是一个配置类(配置类=配置文件)[2]@Bean:给容器中注册一个 Bean :类型为返回值类型, ...

  2. vue3 封装el-table时,构造$children(类式写法)

    由于业务需求(组件封装),需要在获取el-table下面的el-table-column实例 在 vue2.x 当中直接使用this.$children就可以获取到该实例 但是 vue3.x 弃用了$ ...

  3. SRS+Docker部署教程

    SRS+Docker部署教程 安装Docker Windows安装docker 安装Hyper-V Hyper-V 是微软开发的虚拟机,类似于 VMWare 或 VirtualBox,仅适用于 Win ...

  4. Archlinux最新安装教程

    介绍 Arch Linux(或 Arch /ˈɑːrtʃ/))是一款基于 x86-64 架构的 Linux发行版 .系统主要由自由和开源软件组成,支持社区参与.系统设计以 KISS原则(保持简单和愚蠢 ...

  5. [Windows]BAT脚本自定义函数

    1 helloworld @echo off call :helloworld helloworld goto :EOF :helloworld setlocal echo %1 endlocal&a ...

  6. LeeCode数组问题:二分查找

    LeeCode 704 二分查找 题目描述: 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标, ...

  7. classmethod和staticmethod装饰器

    """ 两个装饰器 @classmethod 把一个对象绑定的方法,修改成为一个类方法 1.在方法中仍然可以引用类中的静态变量 2.可以不用实例化对象,就直接使用类名在外 ...

  8. Yii2批量插入数据

    方法一 yii2一次插入多行数据  /** * @inheritdoc 批量添加 * @params $add array 添加数据 */ public function add_all($add) ...

  9. 用Abp实现找回密码和密码强制过期策略

    @ 目录 重置密码 找回密码 发送验证码 校验验证码 发送重置密码链接 创建接口 密码强制过期策略 改写接口 Vue网页端开发 重置密码页面 忘记密码控件 密码过期提示 项目地址 用户找回密码,确切地 ...

  10. STM32启动分析之main函数是怎样跑起来的

    1.MDK目标文件 1)MDK中C程序编译后的结果,即可执行文件数据分类: RAM ZI bss 存储未初始化的或初始化为0的全局变量和静态变量 heap 堆,系统malloc和free操作的内存 s ...