购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <link rel="stylesheet" href="static/bootstrap-3.4.1-dist/css/bootstrap.min.css">

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/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>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>商品编号</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>选择/全选</th>
                    </tr>
                    </thead>
                    <tbody>
                   <tr v-for="item in goodList">
                        <th scope="row">{{item.id}}</th>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td>{{item.number}}</td>
                        <td><input type="checkbox" v-model="checkGroup" :value="item"></td>
                    </tr>
                    </tbody>
                </table>
                <p>选中的商品：{{checkGroup}}</p>
                <p>总价格：{{getPrice()}}</p>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: '1', name: '商品1', price: 522.1, number: 5},
                {id: '2', name: '商品2', price: 35, number: 1},
                {id: '3', name: '商品3', price: 53, number: 5},
            ],
            checkGroup:[],
        },
        methods:{
            getPrice(){
                var total = 0
                for (item of this.checkGroup){
                    total+=item.price*item.number
                }
                return total
            }
        },
    })
</script>
</html>


'''
循环打印 商品信息 建一个空数组与选择的商品信息双向绑定 并打印商品信息
计算价格：初始时0 循环空数组 初始值+商品信息中商品价格*商品数量
返回出去
'''

带全选/全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <link rel="stylesheet" href="static/bootstrap-3.4.1-dist/css/bootstrap.min.css">

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/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>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>商品编号</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>选择/全选 <input type="checkbox" v-model="checkAll" @change="handCheckAll"></th>
                    </tr>
                    </thead>
                    <tbody>
                   <tr v-for="item in goodList">
                        <th scope="row">{{item.id}}</th>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td>{{item.number}}</td>
                        <td><input type="checkbox" v-model="checkGroup" :value="item" @change="handCheckOne"></td>
                    </tr>
                    </tbody>
                </table>
                <p>选中的商品：{{checkGroup}}</p>
                <p>总价格：{{getPrice()}}</p>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: '1', name: '商品1', price: 522.1, number: 5},
                {id: '2', name: '商品2', price: 35, number: 1},
                {id: '3', name: '商品3', price: 53, number: 5},
            ],
            checkGroup:[],
            checkAll:false,
        },
        methods:{
            getPrice(){
                var total = 0
                for (item of this.checkGroup){
                    total+=item.price*item.number
                }
                return total
            },
            handCheckAll(){
                if (this.checkAll){
                    this.checkGroup = this.goodList
                }else{
                    this.checkGroup=[]
                }
            },
            handCheckOne(){
                if (this.checkGroup.length == this.goodList.length){
                    this.checkAll = true
                }else{
                    this.checkAll = false
                }
            },
        },
    })
</script>
</html>

'''
给全选的表头绑定一个变化事件 表头与全选双向绑定
给每个商品后面的多选 添加一个变化事件 
在data定义一个全选 默认是false
全选函数： 判断是不是全选 如果是 就让全选的=所有商品列表
					 不是就返回数组
点一个函数：判断 如果数组的长度 == 伤命数组的长度 全选改为true
			  不是 全选改为true 
'''

带加减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <link rel="stylesheet" href="static/bootstrap-3.4.1-dist/css/bootstrap.min.css">

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/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>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>商品编号</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>选择/全选 <input type="checkbox" v-model="checkAll" @change="handCheckAll"></th>
                    </tr>
                    </thead>
                    <tbody>
                   <tr v-for="item in goodList">
                        <th scope="row">{{item.id}}</th>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        ·
                       <td><button @click="handleDown(item)">-</button></td>
                       <td>{{item.number}}</td>
                       <td><button @click="item.number++">+</button></td>
                        <td><input type="checkbox" v-model="checkGroup" :value="item" @change="handCheckOne"></td>
                    </tr>
                    </tbody>
                </table>
                <p>选中的商品：{{checkGroup}}</p>
                <p>总价格：{{getPrice()}}</p>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: '1', name: '商品1', price: 522.1, number: 5},
                {id: '2', name: '商品2', price: 35, number: 1},
                {id: '3', name: '商品3', price: 53, number: 5},
            ],
            checkGroup:[],
            checkAll:false,
        },
        methods:{
            getPrice(){
                var total = 0
                for (item of this.checkGroup){
                    total+=item.price*item.number
                }
                return total
            },
            handCheckAll(){
                if (this.checkAll){
                    this.checkGroup = this.goodList
                }else{
                    this.checkGroup=[]
                }
            },
            handCheckOne(){
                if (this.checkGroup.length == this.goodList.length){
                    this.checkAll = true
                }else{
                    this.checkAll = false
                }
            },
            handleDown(item){
                if (item.number>1){
                    item.number--
                }else{
                    alert('不能再少了')
                }
            }
        },
    })
</script>
</html>
'''
可以直接在数量的上下写两个按钮绑定点击事件 也可以写函数
-就需要写函数 因为如果不写函数可以写成-1不符合规定 
-函数 传值 判断 数量里面的个数是否大于1 大于就- 否则就alert
'''

删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <link rel="stylesheet" href="static/bootstrap-3.4.1-dist/css/bootstrap.min.css">

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/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>
                <table class="table table-striped text-center">
                    <thead>
                    <tr>
                        <th class="text-center">商品编号</th>
                        <th class="text-center">商品名称</th>
                        <th class="text-center">商品价格</th>
                        <th class="text-center">商品数量</th>
                        <th class="text-center">选择/全选 <input type="checkbox" v-model="checkAll" @change="handCheckAll"></th>
                        <th class="text-center" >删除商品</th>
                    </tr>
                    </thead>
                    <tbody>
                   <tr v-for="item in goodList" >
                        <th scope="row" class="text-center">{{item.id}}</th>
                        <td >{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td >
                           <button @click="handleDown(item)">-</button>
                           {{item.number}}
                           <button @click="item.number++">+</button>
                        </td>

                        <td><input type="checkbox" v-model="checkGroup" :value="item" @change="handCheckOne"></td>
                        <td><button @click="clickDelete(item)" >删除</button></td>
                    </tr>
                    </tbody>
                </table>
                <p>选中的商品：{{checkGroup}}</p>
                <p>总价格：{{getPrice()}}</p>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: '1', name: '商品1', price: 522.1, number: 5},
                {id: '2', name: '商品2', price: 35, number: 1},
                {id: '3', name: '商品3', price: 53, number: 5},
            ],
            checkGroup:[],
            checkAll:false,

        },
        methods:{
            getPrice(){
                var total = 0
                for (item of this.checkGroup){
                    total+=item.price*item.number
                }
                return total
            },
            handCheckAll(){
                if (this.checkAll){
                    this.checkGroup = this.goodList
                }else{
                    this.checkGroup=[]
                }
            },
            handCheckOne(){
                if (this.checkGroup.length == this.goodList.length){
                    this.checkAll = true
                }else{
                    this.checkAll = false
                }
            },
            handleDown(item){
                if (item.number>1){
                    item.number--
                }else{
                    alert('不能再少了')
                }
            },
            clickDelete(item){
                d =confirm('确定要删除吗？')
                if (d){
                    this.goodList.splice(item.id-1,1)//用索引去删
                }else{
                    
                }
            },

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

#pyhton
	不可变类型 ：数字、字符串、元组
    可变类型：列表、字典、集合
    python中没有值类型和引用类的叫法：因为python一切皆对象 对象都是地址 都是引用
    可变类型当参数传到函数中 在函数中修改会影响原来的
    不可变类型当参数传到函数中 在函数中修改不会影响原来的
    
#python 函数参数传递是值传递还是引用传递  
    赋值传递
    
#js 传入item对象 在函数中修改 影响了原来 
	js的对象是引用类型

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <link rel="stylesheet" href="bootstrap.css">
    <script src="bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


</head>
<body>
    <div id="app">
        <input type="text" v-model.lazy="myText">-----{{myText}}
        <input type="text" v-model.number="myNum">-----{{myNum}}
        <input type="text" v-model.trim="myTirm">-----{{myTirm}}

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

与后端交互

# 跨域问题
	浏览器原因 只要向不是地址栏中的【域：地址和端口】发送请求，拿到数据 浏览器就给拦截了 
    
# 处理跨域问题
	后端代码处理 -- 只需要在响应头中加入允许即可

jq的ajax

vue生命周期

从vue实例创建开始 到实例被销毁 总共经历了8歌生命周期钩子【只要写了就会被执行】函数

	钩子：反序列化验证 --- 钩子
    学名【专门名字】 --- 面向切面编程（AOP）
    OOP：面向对象编程

8个生命周期钩子函数
beforeCreate 创建Vue实例之前调用
created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
beforeMount 渲染DOM之前调用
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用

重点：

1.用的最多的 create 发送ajax请求  有的人放在mounted中

2.beforeDestroy
	组件一创建 create一个定时器
    组件被销毁 beforeDestroy销毁定时器
    
    
实现实时聊天效果（在线聊天室）
	轮询：定时器+ajax 	http：http版本区别
    长轮询：定时器+ajax   http
    websocked协议：服务端主动推送消息

vue组件

组件化开发的好处：重用代码
组件分类：
	全局组件：在任意组件中都可以使用
    局部组件：只能在当前组件中使用

定义全局组件