73、表单控制、 购物车案例、v-model进阶、与后端交互的三种方式、箭头函数、循环

luona
91 阅读4分钟

表单控制

checkebox

单选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = './js/vue.js'></script>
</head>
<body>
<div id = 'app'>
    <h1>checkbox单选</h1>
    <p>用户名： <input type="text" name = 'username' v-model="username"></p>
    <p>密码： <input type="password" name = 'password' v-model="password"></p>
    <p>记住密码： <input type="checkbox" v-model="remember" ></p>
    <hr>
    用户名：{{username}}-->密码：{{password}}-->{{remember}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            username:'',
            password:'',
            remember:false
        }
    })
</script>
</html>

多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = './js/vue.js'></script>
</head>
<body>
<div id = 'app'>
    <h1>checkbox单选</h1>
    <p>用户名： <input type="text" name = 'username' v-model="username"></p>
    <p>密码： <input type="password" name = 'password' v-model="password"></p>
    <p>记住密码： <input type="checkbox" v-model="remember" ></p>
    <h1>check多选</h1>
    <p>爱好
        <input type="checkbox" value="1" v-model="hobby">篮球
        <input type="checkbox" value="2" v-model="hobby">足球
        <input type="checkbox" value="3" v-model="hobby">兵乓球

    </p>
    <hr>
    用户名：{{username}}-->密码：{{password}}-->记住密码{{remember}}--->爱好{{hobby}}
    
</div>

</body>

<script>
    var vm = new Vue({
        el: '#app',
        data:{
            username:'',
            password:'',
            remember:false,
            hobby:[]

        }
    })
</script>
</html>

radio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = './js/vue.js'></script>
</head>
<body>
<div id = 'app'>
    <h1>checkbox单选</h1>
    <p>用户名： <input type="text" name = 'username' v-model="username"></p>
    <p>密码： <input type="password" name = 'password' v-model="password"></p>
    <p>记住密码： <input type="checkbox" v-model="remember" ></p>
    <h1>check多选</h1>
    <p>爱好
        <input type="checkbox" value="1" v-model="hobby">篮球
        <input type="checkbox" value="2" v-model="hobby">足球
        <input type="checkbox" value="3" v-model="hobby">兵乓球

    </p>
    <p>性别：
        <input type="radio" v-model="gender" value="1">男
        <input type="radio" v-model="gender" value="2">女
        <input type="radio" v-model="gender" value="3">其他

    </p>
    <hr>
    用户名：{{username}}-->密码：{{password}}-->记住密码{{remember}}--->爱好{{hobby}} -->性别：{{gender}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            username:'',
            password:'',
            remember:false,
            hobby:[],
            gender:''
        }
    })
</script>
</html>

总结

checkbox的单选：v-model绑定布尔值--->选中：true，不选中：false
checkbox的多选：指定value，v-model绑定数组，选中多个，数组中有多个value值
radio的单选：选中某一个是字符串，字符串是value的值

checkbox.png

购物车案例

补充

js的循环

var arr = [33, 2, 3, 4, 6, 7, 4]
1.基础的for循环
    for (var i = 0; i < arr.length; i++) {
        console.log(arr[i])
    }

2.in的循环（不常用)-->循环出index
    for (i in arr){
        console.log(i,arr[i])

    }

3.of循环 es6的语法-->循环出value值
    for (i of arr){
        console.log(i)
    }

4.数组的循环
    arr.forEach(function (value,index,arry){
        console.log(value,index,arry)
    })

 5.jq的循环
    $.each(arr,function (index,value){
        console.log(index,value)
    })

在标签事件中执行

<td>
  <button class='btn' @click="handeljian(goods)">-</button>
   {{goods.number}}
  <button class='btn' @click="goods.number++">+</button>
</td>

基本购物车

效果：被选中的，计算价格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js'></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <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='./js/vue.js'></script>
</head>
<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>
                <div class="bs-example" data-example-id="hoverable-table">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>商品id</th>
                            <th>商品名称</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                            <th>全选/不全选
                                <input type="checkbox"></th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="goods in good_list">
                            <th scope="row">{{goods.id}}</th>
                            <td>{{goods.name}}</td>
                            <td>{{goods.price}}</td>
                            <td>{{goods.number}}</td>
                            <td>
                                <input type="checkbox" v-model="checkGroup" :value="goods">

                            </td>
                            <td>
                                <input type="button" class='btn btn-danger' value='删除'>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <h3>
                        合计：{{get_price()}}
                    </h3>
                    <hr>
                    选中物品：{{checkGroup}}

                </div>
            </div>
        </div>
    </div>

</div>

</body>
<script>
    var vue = new Vue({
        el: '#app',
        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: [],
        },
        methods:{
            //总价格  -->循环列表-->价格*数量
            get_price(){
                sum = 0
                for (goods of this.checkGroup){
                    sum += goods.price*goods.number

                }
                return sum
            },
        }
    })
  </script>
</html>

1.在插值语法中，调用函数：{{get_price()}}-->函数，使用插值调用，只要页面刷新，都会重新执行函数

效果：可以全选和不全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js'></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <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='./js/vue.js'></script>
</head>
<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>
                <div class="bs-example" data-example-id="hoverable-table">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>商品id</th>
                            <th>商品名称</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                            <th>全选/不全选
                                <input type="checkbox" v-model="check_all" @change="handelcheckall"></th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="goods in good_list">
                            <th scope="row">{{goods.id}}</th>
                            <td>{{goods.name}}</td>
                            <td>{{goods.price}}</td>
                            <td>{{goods.number}}</td>
                            <td>
                                <input type="checkbox" v-model="checkGroup" :value="goods" @change="handelcheckone">

                            </td>
                            <td>
                                <input type="button" class='btn btn-danger' value='删除'>
                            </td>

                        </tr>


                        </tbody>

                    </table>
                    <h3>
                        合计：{{get_price()}}
                    </h3>
                    <hr>
                    选中物品：{{checkGroup}}-->全选：{{check_all}}

                </div>
            </div>
        </div>
    </div>

</div>

</body>

<script>
    var vue = new Vue({
        el: '#app',
        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: [],
            check_all:false


        },
        methods:{
            //总价格  -->循环列表-->价格*数量
            get_price(){
                sum = 0
                for (goods of this.checkGroup){
                    sum += goods.price*goods.number

                }
                return sum
            },
            handelcheckall(){
                // 全选中：对钩都打上，js中得含义是：checkGroup变量满值
                if (this.check_all){
                    this.checkGroup = this.good_list
                }else{
                    this.checkGroup = []
                }
            },
            handelcheckone(){
                // 判断 checkGroup的长度，是否等于good_list长度
                if (this.checkGroup.length !=this.good_list.length){
                    this.check_all=false
                }else {
                    this.check_all=true
                }
            }
        }
    })
</script>
</html>

效果：加减商品数量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js'></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <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='./js/vue.js'></script>
</head>
<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>
                <div class="bs-example" data-example-id="hoverable-table">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>商品id</th>
                            <th>商品名称</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                            <th>全选/不全选
                                <input type="checkbox" v-model="check_all" @change="handelcheckall"></th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="goods in good_list">
                            <th scope="row">{{goods.id}}</th>
                            <td>{{goods.name}}</td>
                            <td>{{goods.price}}</td>
                            <td>
                                <button class='btn' @click="handeljian(goods)">-</button>
                                {{goods.number}}
                                <button class='btn' @click="goods.number++">+</button>
                            </td>
                            <td>
                                <input type="checkbox" v-model="checkGroup" :value="goods" @change="handelcheckone">

                            </td>
                            <td>
                                <input type="button" class='btn btn-danger' value='删除'>
                            </td>

                        </tr>


                        </tbody>

                    </table>
                    <h3>
                        合计：{{get_price()}}
                    </h3>
                    <hr>
                    选中物品：{{checkGroup}}-->全选：{{check_all}}

                </div>
            </div>
        </div>
    </div>

</div>

</body>


<script>
    var vue = new Vue({
        el: '#app',
        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: [],
            check_all: false


        },
        methods: {
            //总价格  -->循环列表-->价格*数量
            get_price() {
                sum = 0
                for (goods of this.checkGroup) {
                    sum += goods.price * goods.number

                }
                return sum
            },
            handelcheckall() {
                // 全选中：对钩都打上，js中得含义是：checkGroup变量满值
                if (this.check_all) {
                    this.checkGroup = this.good_list
                } else {
                    this.checkGroup = []
                }
            },
            handelcheckone() {
                // 判断 checkGroup的长度，是否等于good_list长度
                if (this.checkGroup.length != this.good_list.length) {
                    this.check_all = false
                } else {
                    this.check_all = true
                }
            },
            handeljian(goods){
                if (goods.number >1){
                    goods.number -=1
                }else {
                    alert('不能在减了')
                }
            }


        }
    })

</script>
</html>

效果：删除物品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js'></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <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='./js/vue.js'></script>
</head>
<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>
                <div class="bs-example" data-example-id="hoverable-table">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>商品id</th>
                            <th>商品名称</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                            <th>全选/不全选
                                <input type="checkbox" v-model="check_all" @change="handelcheckall"></th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="goods in good_list">
                            <th scope="row">{{goods.id}}</th>
                            <td>{{goods.name}}</td>
                            <td>{{goods.price}}</td>
                            <td>
                                <button class='btn' @click="handeljian(goods)">-</button>
                                {{goods.number}}
                                <button class='btn' @click="goods.number++">+</button>
                            </td>
                            <td>
                                <input type="checkbox" v-model="checkGroup" :value="goods" @change="handelcheckone">

                            </td>
                            <td>
                                <input type="button" class='btn btn-danger' value='删除' @click="del_goods(goods)">
                            </td>

                        </tr>


                        </tbody>

                    </table>
                    <h3>
                        合计：{{get_price()}}
                    </h3>
                    <hr>
                    选中物品：{{checkGroup}}-->全选：{{check_all}}

                </div>
            </div>
        </div>
    </div>

</div>

</body>


<script>
    var vue = new Vue({
        el: '#app',
        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: [],
            check_all: false


        },
        methods: {
            //总价格  -->循环列表-->价格*数量
            get_price() {
                sum = 0
                for (goods of this.checkGroup) {
                    sum += goods.price * goods.number

                }
                return sum
            },
            handelcheckall() {
                // 全选中：对钩都打上，js中得含义是：checkGroup变量满值
                if (this.check_all) {
                    this.checkGroup = this.good_list
                } else {
                    this.checkGroup = []
                }
            },
            handelcheckone() {
                // 判断 checkGroup的长度，是否等于good_list长度
                if (this.checkGroup.length != this.good_list.length) {
                    this.check_all = false
                } else {
                    this.check_all = true
                }
            },
            handeljian(goods){
                if (goods.number >1){
                    goods.number -=1
                }else {
                    alert('不能在减了')
                }
            },
            del_goods(goods){
                this.good_list.pop((goods.id)-1)
            }


        }
    })
</script>
</html>

总结

1 v-for循环数组，显示商品
2 checkbox多选，可以选中多个商品，绑定数组，value的值是对象
3 函数，使用插值调用，只要页面刷新，都会重新执行函数
4 循环的几种方式
	1 普通循环    for(i=0;i<10;i++)    基于索引的循环
	2 in 循环    for (item in 数组)     item是索引
	3 of 循环    for(item of 数组)     item是值
	4 数组.forEach(function(value,index){})  数组的方法
	5 jq的循环$.each(数组,function(index,value){})
  
5 加入全选和全部选
	1 加入了全选全不选的checkbox，跟商品的checkbox是独立的，自己只有一个，就是两种状态（选中和非选中）--->绑定布尔值
  2 监听这个checkbox的事件，change事件，当发生变化，就执行函数
		判断变量是true，说明全选了，商品数组等于所有商品
		如果是false，说明全不选，商品数组为空数组
  3 给一个checkebox，加了change事件，在里面判断
		商品数组的长度如果等于商品长度，说明全选了，全选了，就把全选的变量设为true
 		否则就是false
    
6 加入商品加减
	加：变量++
  减：使用函数判断

v-model进阶

1.v-model 之 lazy、number、trim
  1.lazy：等待input框的数据绑定失去焦点之后再变化
  2.number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
  3.trim：去除首位的空格

案例

lazy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = './js/vue.js'></script>
</head>
<body>
<div id = 'app'>
    <h1>lazy修饰符</h1>
    <p>用户名：
    <input type="text" v-model.lazy="username"> --->{{username}}</p>
    <p>密码：
    <input type="password" v-model.lazy="password"> --->{{password}}</p>
    
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            username:'',
            password:''
        }
    })
</script>
</html>

number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = './js/vue.js'></script>
</head>
<body>
<div id = 'app'>
    <h1>number修饰符</h1>
    <input type="text" v-model.number="username1"> --->{{username1}}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            username1:'',
        }
    })
</script>
</html>

trim

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = './js/vue.js'></script>
</head>
<body>
<div id = 'app'>
    <h1>trim修饰符</h1>
    <<input type="text" v-model.trim="username2"> --->{{username2}}</p>
</div>

</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            username2:'',
        }
    })
</script>
</html>

与后端交互的三种方式

1.前后端要打通---->从前端发送ajax--->核心：使用js发送http请求，接收返回
	方法：
    1.js原生的XMLHttpRequest，可以开启ajax，但是原生js开启，比较麻烦，需要做浏览器兼容，有坑(基本不写)
    2.jq的ajax(基于js原生的XMLHttpRequest封装的)，写了个兼容所有浏览器的  $.ajax()，不仅仅有ajax，还封装了很多dom操作，如果vue中使用它，不合适
		3.axios：第三方的ajax包（咱们用）
    	cdn：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		4.fetch： 原生js发送ajax请求，有的浏览器也不兼容

方式一：juquery的ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = '/static/js/vue.js'></script>
    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js'></script>
</head>
<body>
<div id = 'app'>

    <button @click = 'handleLoad'>点我，加载数据</button>
    <hr>
    你的名字：{{ name }},你的年龄：{{ age }}
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'',
            age:''
        },
        methods:{
            handleLoad(){
                // 1.请求方式1：juquery的ajax
                _this=this
                $.ajax({
                    url:'http://127.0.0.1:8000/index/',
                    type:'get',
                    success:function (res){
                        console.log(res,typeof res)  //{"name": "nana", "age": 19} string
                        var res_dic = JSON.parse(res)
                        _this.name = res_dic.name
                        _this.age = res_dic.age

                    }
                })
            }
        }
    })
</script>
</html>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'',
            age:''
        },
        methods:{
            handleLoad(){
                $.ajax({
                    url:'http://127.0.0.1:8000/index/',
                    type:'get',
                    success:res=>{
                        console.log(res,typeof res) 
                        var res_dic = JSON.parse(res)
                        this.name = res_dic.name
                        this.age = res_dic.age
                    }
                })
            }
        }
    })
</script>

views.py

from django.shortcuts import render,HttpResponse
from django.http import JsonResponse

# Create your views here.

def index(request):
    res = JsonResponse({'name': 'nana', 'age': 19})
    res.headers = {"Access-Control-Allow-Origin":'*'}
    return res
  
ps:前后端分离后，一定会出跨域--->后面要解决的重点
   在响应头中加入：Access-Control-Allow-Origin ，就就可以解决跨域  
  """
  报错：
  Access to XMLHttpRequest at 'http://127.0.0.1:8000/index/' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  """

urls.py

from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
]

方式二：使用js原生的fetch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = '/static/js/vue.js'></script>
    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js'></script>
</head>
<body>
<div id = 'app'>

    <button @click = 'handleLoad'>点我，加载数据</button>
    <hr>
    你的名字：{{ name }},你的年龄：{{ age }}
</div>

</body>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'',
            age:''
        },
        methods:{
            handleLoad(){
             var _this = this
            //2. 使用js原生的fetch(目前也不用）
            fetch('http://127.0.0.1:8000/index/').then(function (response){
                console.log(response,typeof response) //Response {type: 'cors', url: 'http://127.0.0.1:8000/index/', redirected: false, status: 200, ok: true, …}body: （…）bodyUsed: trueheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: "OK"type: "cors"url: "http://127.0.0.1:8000/index/"[[Prototype]]: Response 'object'
                return response.json();
            }).then(function (res){
                console.log(res,typeof res)  //{name: 'nana', age: 19} 'object'				 
              	_this.name=res.name
                _this.age=res.age
              
              
            })

            }
        }
    })
</script>
</html>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'',
            age:''
        },
        methods:{
            handleLoad(){
            //2. 使用js原生的fetch(目前也不用）
            fetch('http://127.0.0.1:8000/index/').then(response=>response.json()).then(res=>{
                console.log(res,typeof res)
                this.name=res.name
                this.age=res.age

            })
        }}
    })
</script>

fetch('网址').then(function (response){return response.json()}).then(function (res){...})

方式三：使用axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = '/static/js/vue.js'></script>
    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js'></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id = 'app'>

    <button @click = 'handleLoad'>点我，加载数据</button>
    <hr>
    你的名字：{{ name }},你的年龄：{{ age }}
</div>

</body>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'',
            age:''
        },
        methods:{
            handleLoad(){
            //3.使用axios,以后都用它
                var _this = this
                axios.get('http://127.0.0.1:8000/index/').then(function (res){
                    console.log(res,typeof res)  //Objectconfig: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}data: {name: 'nana', age: 19}headers: i {content-length: '27'}request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}status: 200statusText: "OK"[[Prototype]]: Object 'object'
                    console.log(res.data,typeof res.data)  //{name: 'nana', age: 19} 'object'
                    _this.name = res.data.name
                    _this.age = res.data.age
                })

            }
        }
    })
</script>
</html>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'',
            age:''
        },
        methods:{
            handleLoad(){
            //3.使用axios,以后都用它

                axios.get('http://127.0.0.1:8000/index/').then(res=>{
                    console.log(res,typeof res)  
                    console.log(res.data,typeof res.data)  //{name: 'nana', age: 19} 'object'
                    this.name = res.data.name
                    this.age = res.data.age
                })

            }
        }
    })
</script>

axios.get(网址,headers={}).then(res=>{...})

箭头函数

1.想使用data中的数据，直接 this. 即可;但是这里有坑: this指向的问题
		methods的函数中，没有嵌套其它函数，this就是vue实例;如果嵌套了，指向就变了，不能使用this了
  
2.箭头函数：es6 的语法
	1.函数写法变简单
  2.箭头函数没有自己的this，在箭头函数中使用this，就是它上一层的

箭头函数的几种情况

1.无参数，无返回值

<script>
    //1.
    var f = function (){
        console.log('匿名函数')
    }
    f()

    var f1 =()=>{
        console.log('匿名函数呢')
    }
    f1()

</script>

ps:function省略
var	函数名=()=>{
    函数体代码
  }

2.有一个参数，没有返回值 ,可以省略括号

<script>
    var f=function (name){
        console.log(name)
    }
    f('nana')
    var f1=name=>{
        console.log(name)
    }
    f1('cx')

</script>

ps:function省略，可以省略括号
var	函数名=参数1=>{
    函数体代码
  }

3.多个参数，不能省略括号

<script>
    var f = function (name,age){
        console.log(name,age)

    }
    f('nana',18)
    var f1 = (name,age)=>{
        console.log(name,age)
    }
    f1('cx',19)
</script>

ps:function省略，不可以省略括号
var	函数名=(参数1，参数2)=>{
    函数体代码
  }

4.多个参数，不能省略括号,一个返回值

<script>
    
    var f =function (name,age){
        return name+'nb'
    }
    var res = f('nana',18)
    console.log(res)

    var f1 = (name,age) =>{
        return name+'nb'
    }
    var res1 = f('xiao',19)
    console.log(res1)

    //简写
    var f2 = (name,age)=>name+'nb'
    var res2 = f2('cx',19)
    console.log(res2)

</script>

ps:function省略，不可以省略括号
var	函数名=(参数1，参数2)=>{
    函数体代码
   return 返回值1
  }

简写：
var	函数名=(参数1，参数2)=>返回值1

5.一个参数，一个返回值

<script>
 
     var f=function (name){
         return name+'nb'
     }
     res = f('nana')
    console.log(res)

    var f1 = name=>name+'nb'
    var res1 = f1('cx')
    console.log(res1)

</script>

ps:function省略，可以省略括号
var	函数名=参数1=>{
    函数体代码
   return 返回值1
  }

简写：
var	函数名=参数1=>返回值1

显示电影小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = '/static/js/vue.js'></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id = 'app'>
    <button @click="handleLoad">点我，加载电影</button>
    <hr>
    <ul>
        <li v-for = 'item in dataList'>
            <h3>电影名字：{{ item.name }}</h3>
            <h3>导演：{{item.director}}</h3>
            <p>电影介绍：{{item.synopsis}}</p>
            <p><img :src="item.poster" alt="" height="300px"></p>
        </li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{dataList:[],
        },
        methods:{
            handleLoad(){
                axios.get('http://127.0.0.1:8000/films/').then(res=>{
                    console.log(res.data)
                    this.dataList = res.data.data.films
                })
            }
        }
    })

</script>
</html>

views.py

import json
import os
def films(request):
    pwd = os.path.dirname(__file__)
    print(pwd)  # Users/na/pythonProject/daango_vue_day3/app01
    with open(pwd +'/filme.json', 'rt', encoding='utf-8')as f:
        res = json.load(f)
    res_obj = JsonResponse(res)
    res_obj.headers = {"Access-Control-Allow-Origin":'*'}
    return res_obj
avatar
文章
阅读
粉丝