首页 > 其他分享 >Vue——表单控制、购物车案例、v-model进阶、与后端交互三种方式、箭头函数

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

时间:2023-06-05 19:23:48浏览次数:33  
标签:Vue console 进阶 res age 购物车 let log name

表单控制

// 1 checkbox
	单选
	多选
// 2 radio
	单选

<body>
<div id="app">
    <h1>checkbox单选</h1>
    <p>用户名: <input type="text" v-model="username"></p>
    <p>密码: <input type="password" v-model="password"></p>
    <p>记住密码: <input type="checkbox" v-model="remember"></p>
    <hr>
    用户名:{{username}}----->密码:{{password}}------>记住密码:{{remember}}

    <h1>checkbox多选</h1>
    <p>用户名: <input type="text" v-model="username"></p>
    <p>密码: <input type="password" v-model="password"></p>
    <p>记住密码: <input type="checkbox" v-model="remember"></p>
    <p>爱好:</p>
    <p>足球:<input type="checkbox" v-model="hobby" value="1"></p>
    <p>篮球:<input type="checkbox" v-model="hobby" value="2"></p>
    <p>乒乓球:<input type="checkbox" v-model="hobby" value="3"></p>
    <hr>
    用户名:{{username}}----->密码:{{password}}------>记住密码:{{remember}}----->爱好:{{hobby}}

    <h1>radio单选</h1>
    <p>用户名:<input type="text" v-model="username"></p>
    <p>密码:<input type="password" v-model="password"></p>
    <p>记住密码:<input type="checkbox" v-model="remember"></p>
    <p>爱好:</p>
    <p>足球:<input type="checkbox" v-model="hobby" value="1"></p>
    <p>篮球:<input type="checkbox" v-model="hobby" value="2"></p>
    <p>乒乓球:<input type="checkbox" v-model="hobby" value="3"></p>
    <p>性别:</p>
    <p>男:<input type="radio" v-model="gender" value="1"></p>
    <p>女:<input type="radio" v-model="gender" value="2"></p>
    <p>保密:<input type="radio" v-model="gender" value="3"></p>
    <hr>
    用户名:{{username}}--&ndash;&gt;密码:{{password}}----> {{remember}}--->爱好:{{hobby}}--->性别:{{gender}}
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            remember: false,
            hobby:[],
            gender:''
        },
    })
</script>

js循环补充

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

    // 2 in的循环(不怎么用),循环出索引
    // for (i in arr){
    //     // console.log(i)
    //     console.log(arr[i])
    // }

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

    // 4 数组的循环 值在前索引在后
    // arr.forEach(function(value,index){
    //     console.log(index,'-----',value)
    // })

    // 5 jQuery的循环 索引在前值在后
    $.each(arr,function (index,value) {
        console.log(index,'----',value)
    })
</script>

购物车案例

<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-bordered">
                    <thead>
                    <tr>
                        <th>商品id</th>
                        <th>商品名</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in good_list">
                        <th>{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                        <td>
                            <button class="btn" @click="handleJian(good)">-</button>
                            {{good.number}}
                            <button class="btn" @click="handleJia(good)">+</button>
                        </td>
                        <td><input type="checkbox" :value="good" v-model="checkGroup" @change="handleOne"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>
                选中了:{{checkGroup}}
                <h3>总价格:{{getPrice()}}</h3>
                <h3>选中了checkbox,checkGroup会发生变化,页面也在变,都会重新刷新页面。函数就会重新执行</h3>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            good_list: [
                {id: 1, name: '钢笔', price: 12, number: 1},
                {id: 2, name: '脸盆', price: 20, number: 1},
                {id: 3, name: '毛笔', price: 6, number: 1},
                {id: 4, name: '圆珠笔', price: 8, number: 1},
                {id: 5, name: '铅笔', price: 1, number: 1},
            ],
            checkGroup: [],
            checkAll: false,
        },
        methods: {
            getPrice() {
                // 1 根据checkGroup选中的计算
                // 循环checkGroup 拿出价格*数量 累加 最后返回
                var total = 0
                for (item of this.checkGroup) {
                    total += item.price * item.number
                }
                return total
            },
            handleCheckAll() {
                // console.log(this.checkAll)
                // 全选中:对钩都打上 js中的含义是:checkGroup变量满值
                if (this.checkAll){
                    this.checkGroup = this.good_list  // 全选
                }else {
                    this.checkGroup = [] // 全不选
                }
            },
            handleOne(){
                // 判断checkGroup的长度 是否等于good_list的长度
                if (this.checkGroup.length === this.good_list.length){
                    this.checkAll = true
                }else {
                    this.checkAll = false
                }
            },
            handleJian(good){
              if (good.number > 1){
                  good.number--
              }else {
                  alert('不能减了')
              }
            },
            handleJia(good){
                good.number++
            }
        }
    })
</script>

v-model

v-model 之lazy、number、trim
	// lazy:等待input框的数据绑定失去焦点之后再变化
	// number:数字开头,只保留数字,后面的字母不保留;字母开头,都保留
	// trim:去除首尾的空格

<body>
<div id="app">
    <h1>lazy修饰符</h1>
    <input type="text" v-model.lazy="username">-------{{username}}
    <h1>number修饰符</h1>
    <input type="text" v-model.number="username1">------{{username1}}
    <h1>trim修饰符</h1>
    <input type="text" v-model.trim="username2">-----{{username2}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            username1: '',
            username2: '',
        },
    })
</script>

与后端交互的三种方式

# 后端写了一堆接口
# 前端现在发送请求
# 前后端要打通--->从前端发送ajax--->核心:使用js发送http请求,接收返回
	原生js,可以开启ajax,但是原生js开启,比较麻烦,需要做浏览器兼容,有坑(基本不写)
    jQuery,写了个兼容所有浏览器的,$.ajax(),不仅仅有ajax,还封装了很多dom操作
    	如果在Vue中使用它,不合适
    axios:第三方的ajax包(之后用这个)
    fetch:原生js发送ajax请求,有的浏览器也不兼容
        
# 写个后端:flask
# pip3 install flask

from flask import Flask,jsonify

方式一:使用jQuery的ajax

<body>
<div id="app">
    <button @click="handleLoad">点我加载数据</button>
    <hr>
    你的名字是:{{name}},你的年龄是{{age}}
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
             // 请求发送成功,后端执行了,但是被浏览器拦截了,因为有跨域问题
             // 当前请求地址,如果向非当前地址栏中的地址发送请求,就会出现跨域
             // 1.jQuery的ajax请求
             handleLoad(){
                 $.ajax({
                     url:'http://127.0.0.1:5000',
                     type:'get',
                     success:data =>{
                         console.log(typeof data)
                         var res = JSON.parse(data)
                         this.name = res.name
                         this.age = res.age
                     }
                 })
             },  
        },
    })
</script>

方式二:使用js原生的fetch(目前不用)

<body>
<div id="app">
    <button @click="handleLoad">点我加载数据</button>
    <hr>
    你的名字是:{{name}},你的年龄是{{age}}
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
            handleLoad() {
                // var _this = this
                // fetch('http://127.0.0.1:5000').then(function (response) {
                //     // console.log(response)
                //     return response.json()
                // }).then(function (res) {
                //     // console.log(res)
                //     _this.name = res.name
                //     _this.age = res.age
                // })
                
                // 箭头函数写法
           fetch('http://127.0.0.1:5000').then(response=>response.json().then(res=>{
                    this.name = res.name
                    this.age = res.age
                }))
            }
        },
    })
</script>

方式三:使用axios,以后都用这个

<body>
<div id="app">
    <button @click="handleLoad">点我加载数据</button>
    <hr>
    你的名字是:{{name}},你的年龄是{{age}}
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
            handleLoad() {
                // var _this = this
                // axios.get('http://127.0.0.1:5000')
                //     .then(function (response) {
                //         // console.log(response.data);
                //         _this.name = response.data.name
                //         _this.age = response.data.age
                //     })
                //     .catch(function (error) {
                //         console.log(error);
                //     });
                // 箭头函数写法
                axios.get('http://127.0.0.1:5000').then(res => {
                    this.name = res.data.name
                    this.age = res.data.age
                }).catch(error => {
                    console.log(error)
                })
            }
        },
    })
</script>

箭头函数

<script>
    // 箭头函数
    // 1.无参数,无返回值
    let f = function () {
        console.log('我是匿名函数')
    }
    let f = () => {
        console.log('我是匿名函数')
    }
    f()

    // 2.有一个参数,没有返回值,可以省略括号
    let f = function (name) {
        console.log('我是匿名函数',name)
    }
    let f = name => {
        console.log('我是匿名函数',name)
    }
    f('XxMa')

    // 3.多个参数,不能省略括号
    let f = function (name,age) {
        console.log('我是匿名函数',name,age)
    }
    let f = (name,age) => {
        console.log('我是匿名函数',name,age)
    }
    f('XxMa',19)

    // 4.多个参数,不能省略括号,一个返回值
    let f = (name,age) => {
        return name + 'nb'
    }
    // 简写
    let f = (name,age) => name + 'nb'
    let res = f('XxMa',19)
    console.log(res)
    
    // 5.一个参数,一个返回值
    let f = name => name + 'nb'
    let res = f('XxMa',19)
    console.log(res)
</script>

标签:Vue,console,进阶,res,age,购物车,let,log,name
From: https://www.cnblogs.com/XxMa/p/17458740.html

相关文章

  • 表单控制,购物车案例,v-model进阶,与后端交互的三种方式
    1表单控制#1checkebox: -单选-多选#2radio -单选<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.js"></scrip......
  • Vue3 setup语法糖下的axios全局设置教程
    Vue3setup语法糖下的axios全局设置教程前言在Vue3的组件式API开发下,this关键词不再适用,网上很多配置axios教程都是以Vue2为基础的,在Vue3下不再适用。近期尝试用组件式API风格写项目,在配置全局axios就遇到了这个问题。经过我反复尝试,查阅官网的文档,终于有了以下解决方法:Vue2......
  • vue3学前准备
    vue3学前准备学习vue3的原因Vue3是一个面向未来的框架:Vue3相比Vue2有更好的性能和更好的扩展性,将来会成为前端开发的主流。改进的响应式系统:Vue3采用了Proxy对象来实现响应式系统,使得性能更高、内存消耗更小、支持动态添加属性等。同时,在Vue3中,开发者也可以更容易地......
  • 完成第一个 Vue3.2 项目后,使用体会
    第一次CompositionAPI在vue3.2中,正式支持了scriptsetup的写法,这样可以大大简化组件的代码量,减少一些重复操作,我认为当你写vue3时,应该把这当作默认写法。在vue3.2之前,一般会这样写。<script>exportdefault{setup(props,ctx){consta=ref(0)//必须......
  • 完成第一个 Vue3.2 项目后,使用体会
    第一次CompositionAPI在vue3.2中,正式支持了scriptsetup的写法,这样可以大大简化组件的代码量,减少一些重复操作,我认为当你写vue3时,应该把这当作默认写法。在vue3.2之前,一般会这样写。<script>exportdefault{setup(props,ctx){consta=ref(0)//必须......
  • 学习VUE第一天-环境的搭建
    1.创建vue项目流程:1)2) 3) 4) 5) 6) 7) 8) 9) 等待创建完毕后cd项目名称进入项目内部然后2.启动项目 npm run serve3.删除(不是必须)默认提供的vue文件,记住,删除要把router.js中的路由清空掉,不然会报错4.可以在vue.config.js......
  • Vue 跨域配置
    在package.json同级目录下新建文件vue.config.js;内容如下:module.exports={//自行复制黏贴devServer:{proxy:{'/api':{//以/api开头的地址会被替换成下面的targettarget:'http://191.196.21.1:8080/',//接口真实地址......
  • Vue项目中使用@路径
    第一步:安装一下pathnpminstallpath--save第二步:在vue.config.js文件中配置一下constpath=require("path");functionresolve(dir){returnpath.join(__dirname,dir);}module.exports={//跨域配置devServer:{proxy:{'/java&......
  • vue的混入mixin
    功能:可以说把各个组件共用的配置提取成一个混入对象使用方式第一步订阅混合,例如:constobj={data(){...},methods:{...},...}第二部使用混合,例如:1、引入对象importxxxfrom"..."2、使用混入(1).全局混入:Vue.mixin(xxx)(2).局部混入:mixins:['xxx']......
  • vue3全局注册的另一种方式——插件注册
    1.新建一个index.ts,用于管理所有全局组件//引入项目中全部的全局组件importSvgIconfrom"./SvgIcon/index.vue";importPaginationfrom"./Pagination/index.vue";//全局对象constallGlobalComponent=<any>{SvgIcon,Pagination};//对外暴露插件对象exportde......