vue之表单控制&购物车案例&v-model进阶&与后端交互的三种方式&电影小案例&箭头函数&js中的5种循环
1.表单控制
<!--1 表单控制start-->
<div id="formcontrol">
<!-- form表单标签可以不用写，因为做了数据的双向绑定-->
<h1>🌟checkbox单选就是true和false🌟</h1>
<p>用户名：<input type="text" v-model="name"></p>
<p>密码：<input type="password" v-model="pwd"></p>
<p>记住密码:<input type="checkbox" v-model="remember"></p>
<hr>
name---->{{name}},pwd---->{{pwd}},remember--->{{remember}}
<h1>🌟checkbox多选就是选value，v-model是数组🌟</h1>
<p>爱好：
唱<input type="checkbox" v-model="hobby" value="1">
跳<input type="checkbox" v-model="hobby" value="2">
rap<input type="checkbox" v-model="hobby" value="3"></p>
<hr>
hobby--->{{hobby}}
<h1>🌟radio单选也是选value，v-model是字符串🌟</h1>
<p>性别：
男：<input type="radio" v-model="gender" value="1">
女：<input type="radio" v-model="gender" value="2"></p>
<hr>
gender--->{{gender}}
</div>
<!--表单控制end-->
// 表单控制start
let vm1 = new Vue({
el: '#formcontrol',
data: {
name: '',
pwd: '',
remember: true,
hobby: [],
gender: '',
},
method: {}
})
// 表单控制end
2.购物车案例
<!--2 购物车案例start-->
<div id="shoppingcar">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-success text-center">购物车</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>price</th>
<th>number</th>
<th>operation all/null <input type="checkbox" v-model="choice" @change="handleCheck"></th>
</tr>
</thead>
<tbody>
<tr v-for="good in good_list">
<th scope="row">{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>
<button @click="handleReduce(good)" class="btn btn-prev">-</button>
<!--🌟这里如果传的是good.number那么是一个数字，为不可变类型，下一次的时候数字是不会变的，减了后不会影响到good里的数据，而good的话是引用，在python中来讲是可变数据类型，可变数据类型传到函数中修改，是会影响原来的数据的🌟-->
{{good.number}}
<button @click="good.number++" class="btn btn-next">+</button>
</td>
<!--🌟属性指令绑定每一个对象至value🌟-->
<td>
<input type="checkbox" :value="good" v-model="checkGroup" @change="handleChangeSingle">
<button class="btn btn-danger pull-right" @click="handleDelete(good)">删除</button>
<!--这里删除有问题，刷新后会恢复原样，而且删除后数组内index会发生变化-->
</td>
</tr>
</tbody>
</table>
<hr>
选中了：{{checkGroup}}
<h3>总价格:{{getPrice()}}</h3>
<h3>🌟选中了checkbox，checkGroup会发生变化，页面也在变，都会重新刷新页面，函数就会重新执行🌟</h3>
</div>
</div>
</div>
</div>
<!--2 购物车案例end-->
// 购物车案例start
let vm2 = new Vue({
el: '#shoppingcar',
data: {
good_list: [
{id: 1, name: '钢笔', price: 12, number: 2},
{id: 2, name: '脸盆', price: 20, number: 20},
{id: 3, name: '毛笔', price: 6, number: 9},
{id: 4, name: '圆珠笔', price: 8, number: 5},
{id: 5, name: '铅笔', price: 1, number: 3},],
checkGroup: [],
choice: false,
},
methods: {
getPrice() {
// 1 根据checkGroup选中的，计算
// 2 循环checkGroup，拿出价格*数量，累加，最后返回
let total = 0
for (count of this.checkGroup) {
total += count.price * count.number
}
return total
},
// 全选中：对钩都打上，js中得含义是：checkGroup变量满值
handleCheck() {
if (this.choice) {
this.checkGroup = this.good_list
} else {
this.checkGroup = []
}
},
// 判断 checkGroup的长度，是否等于good_list长度
handleChangeSingle() {
if (this.checkGroup.length == this.good_list) {
this.choice = true
} else {
this.choice = false
}
},
handleReduce(good) {
if (good.number > 1) {
good.number--
} else {
alert('不能再减了')
}
},
handleDelete(good) {
// var list = this.good_list.splice(good.id-1,1)
}
},
})
// 购物车案例end
3.v-model进阶
<!--3 v-model进阶start-->
<div>
<span>v-model修饰符 之 lazy、number、trim</span>
<h4>v-model.lazy：等待input框的数据绑定时区焦点之后再变化,节约效率</h4>
<h4>v-model.number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留</h4>
<h4>v-model.trim：去除首尾的空格</h4>
</div>
<!--3 v-model进阶end-->
4.与后端交互的三种方式
<!--4 与后端交互三种方式start-->
<!--ajax不是jquery函数，是异步的xml和json，核心：使用js发送http请求，接收返回-->
<div id="app">
<!-- -原生js，可以开启ajax，但是原生js开启，比较麻烦，需要做浏览器兼容，有坑(基本不写)-->
<!-- -jq，写了个兼容所有浏览器的 $.ajax()，不仅仅有ajax，还封装了很多dom操作，如果vue中使用它，不合适，vue就是屏蔽dom-->
<!-- -axios：第三方的ajax包（咱们用）-->
<!-- -fetch： 原生js发送ajax请求，有的浏览器也不兼容-->
<button @click="handleLoad">加载数据</button>
<button @click="handleLoad1">axios加载数据</button>
<hr>
username:{{username}},age:{{age}}
</div>
<!--4 与后端交互三种方式end-->
前端
// 与后端交互的3种方式start 还有一个是js的原生XMLHttpRequest
let vm4 = new Vue({
el: "#app",
data: {
username: '',
age: '',
},
methods: {
handleLoad() {
// 请求发送成功，后端执行了，但是被浏览器拦截了，因为有跨域问题,解决方法是往请求头中加headers = {'Access-Control-Allow-Origin': '*'}
// 当前地址，如果向非浏览器地址栏中得地址发送请求，就会出现跨域
// 1 ajax请求方式 1 jquery的ajax 基于js的原生XMLHttpRequest封装
$.ajax({
url: 'http://127.0.0.1:8000/test/',
type: 'get',
success: data => {
console.log(typeof data)
var res = JSON.parse(data)
this.username = res.name
this.age = res.age
}
}),
// 2 使用js原生的fetch(目前也不用)
fetch('http://127.0.0.1:8000/test/').then(res => res.json()).then(res => {
console.log(res) // {name: 'queque', age: 66}是一个对象
})
},
// 3 使用axios(以后用这个 基于js的原生XMLHttpRequest封装，地址后面可以写headers={}做token认证
// http://www.axios-js.com/zh-cn/docs/
handleLoad1() {
axios.get('http://127.0.0.1:8000/test/').then(res=> {
console.log(res.data)
this.username = res.data.name
this.age = res.data.age})
}
}
})
// 与后端交互的3种方式end
后端
# 视图
def test(request):
name = 'queque'
age = 66
data = {'name': name, 'age': age}
response = HttpResponse(json.dumps(data))
response['Access-Control-Allow-Origin'] = '*'
return response
# 路由
urlpatterns = [
path('test/', views.test),
]
5.电影小案例
前期准备
1 去网站找素材：https://m.maizuo.com/v5/#/films/nowPlaying
2 在网页中翻动页面的时候--》network--》gateway?cityId=310100&pageNum=2&pageSize=10&type=1&k=9236189--》response--》copy all
3 去网站：https://www.json.cn/---》得到json格式数据
4 在python中新建一个Django项目，建立一个新文件film.json,将数据粘贴至文件中
后端
# 路由
urlpatterns = [
path('film/', views.film),
]
# 视图
def film(request):
with open('movies.json','rt',encoding='utf-8') as f:
movie = json.load(f)
movie_str = json.dumps(movie)
response = HttpResponse(movie_str)
# 在使用HttpResponse将movie对象转换为HTTP响应时，movie对象是一个Python对象，而不是一个字符串。因此，需要将其转换为字符串。
response['Access-Control-Allow-Origin'] = '*'
return response
前端
<!--5 小电影案例start-->
<div id="movies">
<button @click="MovieLoad">小⚡️电影⚡️</button>
<ul>
<li v-for="item in movie_arr">
<h1>{{item.name}}</h1>
<p><img :src="item.poster" alt="" height="300px"></p>
</li>
</ul>
</div>
<!--5 小电影案例end-->
// 小电影案例start
let vm5 = new Vue({
el:'#movies',
data:{
movie_arr:'',
},
methods:{
MovieLoad(){
axios.get('http://127.0.0.1:8000/film/').then(res=>{
this.movie_arr=res.data.data.films
})
}
}
})
// 小电影案例end
6.补充
// 补充：js中循环 start
var arr = [33, 2, 3, 4, 6, 7, 4]
// 基础for循环
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// in的循环(不怎么用)，不能接受多个参数，循环出索引，和v-for不是同一个东西
for (i in arr) {
console.log(arr[i])
}
// of 循环 es6的语法 循环出value值
for (i of arr) {
console.log(i)
}
// 数组的循环
arr.forEach(function (value, index) {
console.log(index, '--', value)
})
// jq的循环 需要引入jquery
// $.each(arr, function (index, value) {
// console.log(index, '--', value)
// })
// 补充：js中循环 end
7.箭头函数
# es6 的语法
1 函数写法变简单
2 箭头函数没有自己的this，在箭头函数中使用this，就是它上一层的
// 箭头函数
//1 无参数，无返回值,不能省略括号
// var f =function (){
// console.log('我是匿名函数')
// }
// var f = () => {
// console.log('我是匿名函数')
// }
// f()
//2 有一个参数，没有返回值 ,可以省略括号
// var f = function (name) {
// console.log('我是匿名函数',name)
// }
// var f = name => {
// console.log('我是匿名函数', name)
// }
// f('Lqz')
//3 多个参数，不能省略括号
// var f = (name, age) => {
// console.log('我是匿名函数', name, age)
// }
// f('Lqz', 19)
//4 多个参数，不能省略括号,一个返回值
// var f = (name, age) => {
// return name + 'nb'
// }
// 简写成 省了return和大括号
// var f = (name, age) => name + 'nb'
// var res=f('Lqz', 19)
// console.log(res)
// 5 一个参数，一个返回值
// var f = name => name + 'nb'
// var res = f('Lqz')
// console.log(res)
8.所需cdn
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="./vue/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
9.思考
Python的参数传递是值传递还是引用传递
python数据分为可变数据类型和不可变数据类型：
1 可变数据类型：当参数传递到函数中修改，会影响原来的值
2 不可变数据类型：当参数传递到函数中修改，不会影响原来的值
js中称为引用类型(对象、数组)和值类型(字符串、数字)
python中所有的变量、函数、类都是c语言的1个对象，都做了封装，所以一切皆对象。按道理讲python所有的类型都是引用类型，都是地址，但是这样有一个问题，数字传参也会影响原来的值，所以python强行定义可变与不可变
