首页 > 其他分享 >vue_3

vue_3

时间：2022-10-26 21:58:54浏览次数：83  
标签：count el vue console log data name

目录

表单控制

input:checkbox(单选，多选)，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>表单控制</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="basketball" v-model="hobby"> basketball
        <input type="checkbox" value="football" v-model="hobby"> football
        <input type="checkbox" value="pingpong" v-model="hobby"> pingpong
        <input type="checkbox" value="dancing" v-model="hobby"> dancing
    </p>
    {{hobby}}
    <button @click="funcSubmit">提交</button>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            name: '',
            password: '',
            isRemember: false,
            gender: '',
            hobby: []
        },
        methods: {
            funcSubmit() {
                console.log(this.gender)
            }
        }
    })
</script>
</html>

基本购物车案例

<script>src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">


var goodList = [
    {id: 1, name: '钱包', price: 1200, count: 1},
    {id: 1, name: '挎包', price: 2000, count: 2},
    {id: 1, name: '书包', price: 120, count: 5},
    {id: 1, name: '皮包', price: 12000, count: 3},
    {id: 1, name: '面包', price: 12, count: 11},
]

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

# 方式三：of循环，基于迭代
for (i of goodList) {
console.log(i)
}

# 方式四：数组的循环方法
goodList.forEach(item => {
    console.log('-----', item)
})

# 方式五：引入jquery
$.each(goodList, (i, v) => {
    console.log(v)
})

购物车进阶版

1.展示购物车
2.全选所有商品
3.加减商品数量
4.计算选中商品的总价

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</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>商品id</th>
                        <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">
                        <td>{{good.id}}</td>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                        <td style="padding: 5px">
                            <span class="btn link btn-sm btn-default" @click="handleDown(good)">-</span>
                            {{good.count}}
                            // 下面实现商品数量的加
                            <span class="btn link btn-sm btn-default" @click="good.count++">+</span>
                        </td>
                        <td><input type="checkbox" v-model="checkGroup" :value="good" @change="handleCheckOne"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>
                <div v-for="good in checkGroup">
                    选中的商品是：{{good.name}} 数量：{{good.count}}
                </div>
                <br>
                总价格是：{{getPrice()}}
            </div>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '钱包', price: 1200, count: 1},
                {id: 1, name: '挎包', price: 2000, count: 2},
                {id: 1, name: '书包', price: 120, count: 5},
                {id: 1, name: '皮包', price: 12000, count: 3},
                {id: 1, name: '面包', price: 12, count: 11},
            ],
            checkGroup: [],
            checkAll: false
        },
        methods: {
            // 下面实现计算商品总价
            getPrice() {
                // 取出checkGroup中的商品数量和商品价格想成，做累加
                // js中for循环
                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，否则checkAll=false
                // if (this.checkGroup.length == this.goodList.length) {
                //     this.checkAll = true
                // } else {
                //     this.checkAll = false
                // }
                // ===> 简写
                this.checkAll = this.checkGroup.length == this.goodList.length
            },
            // 下面实现商品数量的减
            handleDown(good) {
                if (good.count > 1) {
                    good.count -= 1
                } else {
                    alert('不能再减了，再减就没了')
                }
            }

        }
    })

</script>
</html>

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>

Vue生命周期

1.var vm=new Vue({})

  1. 实例创建，数据放到实例中
  2. 挂载模板：el ---> div
  3. 改页面，改变量，都会互相影响 --- update
  4. 销毁实例

2.四个过程对应八个函数，依次进行(到某个过程就会执行某个函数)

  • beforeCreate

    创建Vue实例之前调用，data,el都没有

  • created

创建实例成功后调用(此处可以发送异步请求)，有data，没有el

  • beforeMount

渲染DOM之前调用，有data，没有el

  • mounted

渲染DOM之后调用

  • beforeUpdate

重新渲染之前调用(数据更新等待操作时，控制DOM重新渲染)

  • updated

重新渲染完成之后调用

  • beforeDestroy

销毁之前调用

  • destroyed

销毁之后调用

3.钩子函数(hook)

  • AOP的体现：面向切面编程 ---> 装饰器实现AOP
  • AOP:可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加某种特定功能的一种技术。
<!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>back</button>
            {{title}}
            <button @vlick="handleClick">forward</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)
        },
        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')
            console.log(this.$data)
            console.log(this.$el)
        },
        updated() {
            console.log('updated')
            console.log(this.$data)
            console.log(this.$el)
        },
        beforeDestroy() {
            console.log('beforeDestroy')
            console.log(this.$data)
            console.log(this.$el)
        },
        destroyed() {
            console.log('destroyed')
            console.log(this.$data)
            console.log(this.$el)
        },
    })
    var vm = new Vue({
        el:'#app',
        data:{
            show:true
        },
        methods: {
            handleShow() {
                this.show = !this.show
            }
        }
    })
</script>
</html>

4.与后端交互

from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    res = jsonify({'name': 'zhang', 'age': 20})
    # 处理了跨域() 在响应头中加入 django写后端{'Access-Control-Allow-Origin': '*''}
    res.headers = {'Access-Control-Allow-Origin': '*'}
    return res


import json


@app.route('/films')
def films():
    with open('./film.json', 'r', encoding='utf-8') as f:
        data = json.load(f)
    res = jsonify(data)
    res.headers = {'Access-Control-Allow-Origin': '*'}
    return res


if __name__ == '__main__':
    app.run()


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
    <button @click="handleLoad1">点击加载数据</button>
    <br>
    <p>名字是：{{name}}</p>
    <p>年龄是：{{age}}</p>
    <hr>

    <h1>js原生的fetch与后端交互</h1>
    <button @click="handleLoad2">点击加载数据</button>
    <br>
    <p>名字是：{{name}}</p>
    <p>年龄是：{{age}}</p>
    <hr>

    <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: '',
        },
        methods: {
            handleLoad1() {
                $.ajax({
                    url: 'http://127.0.0.1:5000',
                    type: 'get',
                    success: data => {
                        console.log(typeof data)
                        data = JSON.parse(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 data)
                    this.name = data.name
                    this.age = data.age
                })
            },
            handleLoad3() {
                axios.get('http://127.0.0.1:5000').then(res => {
                    console.log(res.data)
                    this.name = data.name
                    this.age = data.age
                })
            },
        }

    })
</script>
</html>

5.电影小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <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: '#app',
        data: {
            filmList: []
        },
        created() {
            axios.get('http://127.0.0.1:5000/films').then(res => {
                this.filmList = res.data.data.films
            })
        }
    })
</script>
</html>

标签：count,el,vue,console,log,data,name
From： https://www.cnblogs.com/Zhang614/p/16830193.html

相关文章

  • 新建vue项目中各个文件夹的作用
    node_modules文件夹作用:项目的安装依赖文件夹,由命令nmpinstall生成public文件夹:用于存放项目所使用到的一些静态资源(图片等），在最后webpack打包时会直接放入dist文......
  • vue3-- 表单控制 - radio单选 - 购物车案例 - v-model进阶 （了解） - vue生命周期
    表单控制radio单选购物车案例v-model进阶（了解）vue生命周期表单控制input：checkbox(单选，多选，radio(单选))<!DOCTYPEhtml><htmllang="en"><head><metacha......
  • Vue学习-03
    表单控制input：CheckBox（单选，多选）   radio（单选）代码演示<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scrip......
  • Vue 尚硅谷
     //定义组件constschool=Vue.extend({template:`<h2>{{message}}</h2>`,data(){message:'nihao,hello'}})//局部注册组件newVue({......
  • 今日内容 Vue生命周期
    表单控制input：checkbox（单选，多选），radio（单选）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/v......
  • vue生命周期，vue的购物车案例
    表单控制input：checkbox（单选，多选），radio（单选）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.j......
  • 【Vue】动态方法调用
     JS的动态方法调用是通过eval函数实现但是在Vue中是通过组件的$options.methods实现，写这篇的随笔的原因是因为今天为了封装面包屑组件，花了一下午折腾这个动态方法调用......
  • Vue生命周期
    Vue生命周期Vue的四个过程1.实例创建，数据放在实例中2.挂载模板：el---->div3.改页面，改变量，都会互相影响4.销毁实例四个过程对应的八个函数钩子函数作用bef......
  • Vue项目中，html高度无法撑开的解决方法
    在src目录中新建CSS目录，并在此目录下创建global.css文件，填写如下内容：  随后在main.js中引入该CSS文件。如下： ......
  • vue-js中键盘事件编码
    js里面的键盘事件经常用到的：keyCode8=BackSpaceBackSpacekeyCode9=TabTabkeyCode12=ClearkeyCode13=EnterkeyCode16=Shift_LkeyCode17=Control_Lkey......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99