Vue 表单控制 生命周期

Vue 表单控制 生命周期

文章目录

  • Vue 表单控制 生命周期
    • 1、表单控制
    • 2、购物车案例
      • 2.1、for 循环的 方法归纳
      • 2.2、购物车
      • 3、v-model进阶(了解)
    • 4、vue生命周期
    • 5、与后端交互
    • 扩展(django 与 axios交互)

1、表单控制

input:checkbox(单选,多选),radio(单选)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
head>
<body>
<div id="app">
    <h1>表单控制h1>
    <p>用户名:<input type="text" v-model="name">p>
    <p>密码:<input type="text" v-model="password">p>
    <p><input type="checkbox" v-model="isRemember"> 记住密码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="0"> 未知
    p>
    <p>
        爱好:
        <input type="checkbox" value="篮球" v-model="hobby"> 篮球
        <input type="checkbox" value="足球" v-model="hobby"> 足球
        <input type="checkbox" value="乒乓球" v-model="hobby"> 乒乓球
        <input type="checkbox" value="橄榄球" v-model="hobby"> 橄榄球
    p>
    {{hobby}}

div>
body>

<script>

    new Vue({
        el: '#app',
        data: {
            name: '',
            password: '',
            isRemember: false,  // checkbox单选,使用布尔类型
            gender: '',  // radio单选,使用字符串
            hobby: [],  // checkbox 多选使用数组
        },
    })
script>
html>

2、购物车案例

2.1、for 循环的 方法归纳

python中 只有基于迭代的循环,没有基于索引的循环

**js,java,go中有基于迭代和索引的两种 **

1 for(i=0;i<checkGroup.length;i++)     # 基于索引的循环
2 for (i in checkGroup)                # 基于迭代的循环 i为索引
3 for (i of checkGroup)                # es6中 基于迭代循环 i为元素值
4 数组内置方法.forEach()
5 jquery  $.each 循环

实践

    // 1 方式一:js的基于索引的循环
    for (var i = 0; i < goodList.length; i++) {
        console.log(goodList[i])
    }
    // 2 方式二:基于迭代的循环
    for (i in goodList){
        console.log(goodList[i])
    }

    // 3 方式三:of 循环,基于迭代的
      for (i of goodList){
        console.log(i)
    }
    // 4 方式四:数组的循环方法
    goodList.forEach(item => {
        console.log('---', item)
    })

    // 5 jquery:引入
    $.each(goodList, (i, v) => {
        console.log(v)
    })

2.2、购物车

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
head>
<body>
<div id="app">
    <div class="container-fluid">
        <h1 class="text-center">购物车h1>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>商品idth>
                        <th>商品名字th>
                        <th>商品价格th>
                        <th>商品数量th>
                        <th><input type="checkbox" v-model="checkAll" @change="handleChange">全选/全不选th>
                    tr>
                    thead>
                    <tbody>
                    <tr v-for="good in goodList">
                        <th>{{good.id}}th>
                        <td>{{good.name}}td>
                        <td>{{good.price}}td>
                        <td>{{good.count}}td>
                        <td><input type="checkbox" v-model="checkGroup" :value="good" @change="handleCheckOne">td>
                    tr>

                    tbody>
                table>
                <hr>
                选中的商品是:{{checkGroup}}
                <br>
                总价格是:{{getPrice()}}

            div>
        div>

    div>

div>
body>

<script>

    new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '小汽车', price: 1200000, count: 1},
                {id: 2, name: '钢笔', price: 12, count: 34},
                {id: 3, name: '鸡蛋', price: 2, count: 4},
                {id: 4, name: '面包', price: 9, count: 10},
            ],
            checkGroup: [],
            checkAll: false,


        },
        methods: {
            getPrice() {
                var total = 0
                for (item of this.checkGroup) {
                    total += item.price * item.count
                }
                return total
            },
            handleChange() {
                if (this.checkAll) {
                    this.checkGroup = this.goodList
                } else {
                    this.checkGroup = []
                }
            },
            handleCheckOne() {
                // 如果checkGroup的长度等于goodList的长度,说明全选了,checkAll就应该变为true,否则就是false
                // if (this.checkGroup.length == this.goodList.length) {
                //     this.checkAll = true
                // } else {
                //     this.checkAll = false
                // }
                // 变短
                this.checkAll = this.checkGroup.length == this.goodList.length
            }
        }
    })

script>
html>

3、v-model进阶(了解)

lazy:等待input框的数据绑定时区焦点之后再变化
number:数字开头,只保留数字,后面的字母不保留;字母开头都保留
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>v-model进阶</h1>
    <input type="text" v-model.lazy="name1"> ---->{{name1}}
    <br>
    <input type="text" v-model.number="name2"> ---->{{name2}}
        <br>
    <input type="text" v-model.trim="name3"> ---->{{name3}}


</div>
</body>

<script>

    new Vue({
        el: '#app',
        data: {
            name1: '',
            name2: '',
            name3: '',
        },

    })
</script>
</html>

4、vue生命周期

Var vm=new Vue实例()

1、实例创建,数据放到实例中
2、挂在模板:el--->div
3、该页面,改变量,都会相互影响 update
4、销毁实例

4个过程,对应八个函数,依次执行(到某个过程就会执行某个函数)

beforeCreate	创建Vue实例之前调用,data,el都没有
created	        创建Vue实例成功后调用(可以在此处发送异步请求后端数据),data有了,el没有的
beforeMount	    渲染DOM之前调用 ,data有了,el没有
mounted	        渲染DOM之后调用
beforeUpdate	重新渲染之前调用(数据更新等操作时,控制DOM重新渲染)
updated	        重新渲染完成之后调用
beforeDestroy	销毁之前调用
destroyed	    销毁之后调用

钩子函数(hook)AOP的体现:面向切面编程–> 装饰器实现app

vm实例: 看不到它销毁 组件vc

组件:组件化开发

学习生命周期重点掌握

1 组件向后端发送请求,获取数据,应该放在 created 写,此时data已经有数据了
2 destroyed做一些资源清理性的工作

小案例:组件创建,开启定时器,不停的打印hello,在destroyed中对定时器进行销毁
补充:js定时任务和延时任务
延时任务
setTimeout(()=>{console.log(3s后执行我)},3000)
定时任务

settInterval(()=>{console.log('hello')},3000)

生命场景下用定时任务?
定时跟后端交互 基于http+定时任务(websocket协议:服务端主动推送消息,手机app的消息推送)
渺少场景:先提交秒杀请求,每隔3s,查询是否秒到

<!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>vue声明周期</h1>
    <button @click="handleShow">点我组件显示和消失</button>
    <hr>
    <child v-if="show"></child>
    <hr>

</div>


</body>

<script>
    // 定义一个全局组件
    Vue.component('child', {
        template: `
          <div>
          <button>后退</button>
          {{ title }}
          <button @click="handleClick">前进</button>
          </div>`,
        data() {
            return {
                title: '好看的首页',
                t:''
            }
        },
        methods: {
            handleClick() {
                // alert('前进')
                this.title = 'lqz'

            }
        },
        beforeCreate() {
            console.log('beforeCreate')
            console.log(this.$data)
            console.log(this.$el)
        },
        created() {
            console.log('created')
            console.log(this.$data)
            console.log(this.$el)
            // 开启定时器,每隔3s,打印hello
            this.t=setInterval(()=>{
                console.log('hello')
            },3000)
        },
        beforeMount() {
            console.log('beforeMount')
            console.log(this.$data)
            console.log(this.$el)
        },
        mounted() {
            console.log('mounted')
            console.log(this.$data)
            console.log(this.$el)
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            console.log('当前状态:beforeDestroy')
        },
        destroyed() {
            console.log('当前状态:destroyed')
            // 销毁定时器
            clearInterval(this.t)
            this.t=null

        },
    })

    var vm = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleShow() {
                this.show = !this.show
            }
        }

    })
</script>
</html>

5、与后端交互

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="./js/vue.js">script>
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
head>
<body>
<div id="app">

    <h1>jquery的ajax与后端交互h1>
    
    
    
    
    

    <h1>js原生的fetch与后端交互h1>
    
    
    
    
    

    <h1>axios与后端交互h1>
    <button @click="handleLoad3">点击加载数据button>
    <br>
    <p>名字是:{{name}}p>
    <p>年龄是:{{age}}p>
    <hr>
div>


body>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: 0
        },
        methods: {
            handleLoad1() {
                $.ajax({
                    url: "http://127.0.0.1:5000/",
                    type: 'get',
                    success: data => {
                        console.log(typeof data)
                        data = JSON.parse(data) // data 是字符串类型,需要转成对象类型
                        console.log(typeof data)
                        this.name = data.name
                        this.age = data.age

                    }
                })
            },
            handleLoad2() { // 用的很少
                fetch('http://127.0.0.1:5000/').then(res => res.json()).then(res => {
                    console.log(res)
                    console.log(typeof res)
                    this.name = res.name
                    this.age = res.age
                })

            },

            handleLoad3() { // 用的很少
                axios.get('http://127.0.0.1:5000/').then(res => {
                    console.log(res.data)  // 后端真正的数据在res.data中
                    this.name = res.data.name
                    this.age = res.data.age
                })

            },
        }


    })
script>
html>

扩展(django 与 axios交互)

view.py

from rest_framework.views import Response
from rest_framework.views import APIView

class Movie(APIView):
    def get(self,request):
        with open(r'./app01/move_file.json', 'r',encoding='utf8') as f:
            res=json.load(f)
        print(res)
        # headers = {'Access-Control-Allow-Origin': '*'}  解决  跨域错误
        return Response(res,headers = {'Access-Control-Allow-Origin': '*'},)

movie.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>
    <script src="../static/js/vue.js">script>
    <script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div id="d1">
    <p v-html="name">p>
    <h1>电影小案例h1>
    <ul>
        <li v-for="film in filmList">
            <h2>电影名:{{ film.name }}h2>
            <img :src="film.poster" alt="" height="400px" width="300px">
        li>
    ul>
div>
body>

<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            name: 'cxt',
            filmList: []

        },
        created() {
            axios.get('http://127.0.0.1:8000/moveview/').then(res => {
                console.log(res)
                this.filmList = res.data.data.films
            })
        }
    })
script>
html>

你可能感兴趣的:(vue,vue.js,javascript,前端)