Vue基础第三篇

这篇具有很好参考价值的文章主要介绍了Vue基础第三篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、表单控制

1 checkebox:
    -单选
    -多选
2 radio
    -单选

示例:文章来源地址https://www.toymoban.com/news/detail-476806.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" v-model="username"></p>-->
    <!--    <p>密码: <input type="password" v-model="password"></p>-->
    <!--    <p>记住密码: <input type="checkbox" v-model="remember"></p>-->
    <!--    <hr>-->
    <!--    用户名:{{username}}&#45;&#45;&ndash;&gt;密码:{{password}}&#45;&#45;&ndash;&gt; {{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}}&#45;&#45;&ndash;&gt;密码:{{password}}&#45;&#45;&ndash;&gt; {{remember}}-&#45;&#45;》爱好:{{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>性别:
        男:<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>
    <hr>
    用户名:{{username}}--&ndash;&gt;密码:{{password}}----> {{remember}}---》爱好:{{hobby}}---》性别:{{gender}}

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            remember: false,
            hobby: [],
            gender: ''
        },
    })
</script>
</html>

二、购物车案例

2.1 基本购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <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>
    <script src="https://code.jquery.com/jquery-3.7.0.min.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-bordered">
                    <thead>
                    <tr>
                        <th>商品ID</th>
                        <th>商品名</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in good_list">
                        <th scope="row">{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                        <td>{{good.number}}</td>
                        <td><input type="checkbox" :value="good" v-model="checkGroup"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>
                选中了:{{checkGroup}}
                <h3>总价格:{{getPrice()}}</h3>
                <h3>选中了checkbox,checkGroup会发生变化,页面也在变,都会重新刷新页面,函数就会重新执行</h3>
            </div>


        </div>

    </div>


</div>
</body>
<script>
    var vm = 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: {
            getPrice() {
                // 1 根据checkGroup选中的,计算
                //  循环checkGroup,拿出价格*数量,累加,最后返回
                var total = 0
                for (item of this.checkGroup) {
                    total += item.number * item.price
                }
                return total
            }
        }
    })


 
</script>
</html>

补充:

   //补充: 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的循环(不怎么用),循环出索引
    // 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 jq的循环
    // $.each(arr, function (index, value) {
    //     console.log(index, '--', value)
    // })

2.2、全选全不选版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <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>

                <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 scope="row">{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                        <td>{{good.number}}</td>
                        <td><input type="checkbox" :value="good" v-model="checkGroup" @change="handleChangeOne"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>
                选中了:{{checkGroup}}
                <br>
                {{checkAll}}
                <h3>总价格:{{getPrice()}}</h3>
            </div>


        </div>

    </div>


</div>
</body>
<script>
    var vm = 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: [],
            checkAll: false
        },
        methods: {
            getPrice() {
                // 1 根据checkGroup选中的,计算
                //  循环checkGroup,拿出价格*数量,累加,最后返回
                var total = 0
                for (item of this.checkGroup) {
                    total += item.number * item.price
                }
                return total
            },
            handleCheckAll() {
                // console.log(this.checkAll)
                // 全选中:对钩都打上,js中得含义是:checkGroup变量满值
                if (this.checkAll) {
                    this.checkGroup = this.good_list  // 全选
                } else {
                    this.checkGroup = []  // 全不选
                }

            },
            handleChangeOne() {
                // 判断 checkGroup的长度,是否等于good_list长度
                if (this.checkGroup.length == this.good_list.length) {
                    this.checkAll = true
                } else {
                    this.checkAll = false

                }

            }
        }
    })


</script>
</html>

2.3加减数量版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <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>

                <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 scope="row">{{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="good.number++">+</button>
                        </td>
                        <td><input type="checkbox" :value="good" v-model="checkGroup" @change="handleChangeOne"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>
                选中了:{{checkGroup}}
                <br>
                {{checkAll}}
                <h3>总价格:{{getPrice()}}</h3>
            </div>


        </div>

    </div>


</div>
</body>
<script>
    var vm = 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: [],
            checkAll: false
        },
        methods: {
            getPrice() {
                // 1 根据checkGroup选中的,计算
                //  循环checkGroup,拿出价格*数量,累加,最后返回
                var total = 0
                for (item of this.checkGroup) {
                    total += item.number * item.price
                }
                return total
            },
            handleCheckAll() {
                // console.log(this.checkAll)
                // 全选中:对钩都打上,js中得含义是:checkGroup变量满值
                if (this.checkAll) {
                    this.checkGroup = this.good_list  // 全选
                } else {
                    this.checkGroup = []  // 全不选
                }

            },
            handleChangeOne() {
                // 判断 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('太少了,不能再少了')
                }

            }
        }
    })


</script>
</html>

三、v-model进阶

v-model 之 lazy、number、trim
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>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>
</html>

四、与后端交互的三种方式


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

后端(flask):

pip3 install flask

from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    print('来了,老弟')
    # 前后端分离后,一定会出跨域---》后面要解决的重点
    # 在响应头中加入:Access-Control-Allow-Origin ,就就可以解决跨域
    res = jsonify({'name': '彭于晏', 'age': 19})
    res.headers = {'Access-Control-Allow-Origin': '*'}
    return res


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

前端:

<body>
<div id="app">
    <button @click="handleLoad">点我加载数据</button>
    <hr>
    <p>您的名字是:{{name}},您的年龄是:{{age}}</p>
</div>

</body>

使用jq的ajax:

handleLoad() {
                // 请求发送成功,后端执行了,但是被浏览器拦截了,因为有跨域问题
                // 当前地址,如果向非浏览器地址栏中得地址发送请求,就会出现跨域
                // 1 ajax请求方式 1    jquery的ajax
                var _this = this
                $.ajax({
                    url: 'http://127.0.0.1:5000',
                    type: 'get',
                    success: function (data) {
                        console.log(typeof data)
                        var res = JSON.parse(data)
                        _this.name = res.name
                        _this.age = res.age

                    }
                })

            }

使用fetch

handleLoad() {
                // 2 使用js原生的fetch(目前也不用)
                // fetch('http://127.0.0.1:5000').then(function (response) {
                //     // console.log(response)
                //     return response.json();
                // }).then(function (res) {
                //     console.log(res);
                // });
                // 了解,箭头函数一会讲
                fetch('http://127.0.0.1:5000').then(res=>res.json()).then(res=>{
                    console.log(res)
                })

            }

使用axios(以后用这个)

handleLoad() {
                var _this = this
                axios.get('http://127.0.0.1:5000').then(function (res) {
                    console.log(res.data)
                    _this.name = res.data.name
                    _this.age = res.data.age
                })
            }

五、箭头函数

es6 的语法
    1 函数写法变简单
    2 箭头函数没有自己的this,在箭头函数中使用this,就是它上一层的

示例:

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

    2 有一个参数,没有返回值  ,可以省略括号
    var f = function (name) {
        console.log('我是匿名函数',name)
    }
    var f = name => {
        console.log('我是匿名函数', name)
    }
    f('Lqz')
    3多个参数,不能省略括号
    var f = (name, age) => {
        console.log('我是匿名函数', name, age)
    }
    f('Lqz', 19)

    4多个参数,不能省略括号,一个返回值
    var f = (name, age) => {
        return name + 'nb'
    }
</script>

到了这里,关于Vue基础第三篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element-Puls Form表单内嵌套el-table表格,根据表格复选框多选或单选动态设置行的验证规则

    根据 Table 表格内的复选框来控制当前选中行是否添加必填校验规则 我们需要设置一个 flag 来标识已勾选的行,el-table渲染数据结构是数组对象形式,我们可以在每个对象中手动加如一个标识,例如默认:selected : false,如你的源数据中已有类似key,则可用它作于唯一标识 htm

    2024年02月02日
    浏览(64)
  • Vue教程:如何使用Div标签实现单选框与多选框按钮以便我们随意调整样式

    前言: 在写Vue项目时,我们经常会用到单选框以及复选框,以往我们常用的是Element里面的单选框以及复选框,但是呢这里面的选框都不容易调整,假如我们需要不同的样式以及大小,就很难去实现想要的结果,本章教程就为大家讲解,如何使用div标签去实现单选,多选的这

    2024年01月18日
    浏览(35)
  • 随手记:vue2 使用element UI table表格的单选多选反选思路

    selection-change 参数只有一个selection : 可以获取到当前勾选的row的数据,勾选自动行程数组 @selection-change=\\\"handleSelectionChange\\\"    // 多选框选中数据     handleSelectionChange(selection) {         //selection 是勾选中的数组     },  select 参数 selection 选中的数组  row 当前选中的单条数

    2024年04月26日
    浏览(36)
  • vue2+ant-design-vue a-select组件二次封装(支持单选/多选添加全选/分页(多选跨页选中)/自定义label)

    参数 说明 类型 默认值 v-model 绑定值 boolean / string / number/Array - mode 设置’multiple’\\\'tags’多选 (显示全选) String - optionSource 下拉数据源 Array - width select宽度(可以设置百分比或px) String 100% customLabel 是否自定义设置下拉label String - valueKey 传入的 option 数组中,要作为最终选择

    2024年02月08日
    浏览(50)
  • Vue中的MVVM【第三篇】

            MVVM图示  🌈 一、MVVM简介          简单来说: MVVM(M-VM-M) ,一种更好的UI模式解决方案,MVVM通过数 据双向绑定 让数据 自动地双向同步。 M(Model):Model数据模型,json格式数据 V(View):View视图,jsp、html VM(ViewModel):ViewModel视图模型   🌈 二、MVVM详解        我以

    2024年02月04日
    浏览(41)
  • 版本控制工具Git集成IDEA的学习笔记(第三篇Git私服)

    本文章仅讲解代码提交和分支合并。 目录 一、提交并推送到私服 二、遇到的问题 1、将代码克隆到本地,idea打开,不使用主分支(master)进行开发操作。 2、也不使用dev分支进行开发操作,而是新建一个功能分支进行模块功能的开发。 在dev分支的基础上,新建功能分支进行

    2024年02月07日
    浏览(47)
  • 网络基础(第三篇)子网掩码

    文章目录 一、IP地址 二、 子网掩码 IP地址是什么? 在网络中用来标识设备的具体地址,数据需要通过此进行寻址传输。   IP地址的组成: 网络部分: 用来标识一个网络。代表IP地址所属网络,处于高位; 主机部分: 用来区分一个网络内的不同主机,能唯一标识网段上的某台

    2024年02月04日
    浏览(35)
  • Vue第三篇:最简单的vue购物车示例

    本文参考:Vue Cli(脚手架)实现购物车小案例 - - php中文网博客  效果图:   编写流程: 1、首先通过@vue/cli创建工程 vue create totalprice 2、改写App.vue代码如下: 3、代码中相关内容说明: (1)caption为table的标题 (2)在组件中使用v-for时,必须添加:key属性,否则会报错,为了

    2024年02月17日
    浏览(42)
  • Oracle之 第三篇 PL/SQL基础

    目录 Oracle之  第三篇  PL/SQL基础 PL/SQL程序块  PL/SQL语言 PL/SQL的基本结构   PL/SQL块分类    一、PL/SQL语言 二、PL/SQL 常量 、变量    合法字符 数据类型 LOB  数据类型  属性类型   运算符 常量    PL/SQL常量 1 、变量的声明        2、属性类型 % type 变量赋值 %type和%rowtype区

    2024年02月02日
    浏览(59)
  • Java零基础教学文档第三篇:JDBC

    今日新篇章 【JDBC】 【主要内容】 JDBC概述 使用JDBC完成添加操作 使用JDBC完成更新和删除 DBUtils的简单封装 使用JDBC完成查询 使用JDBC完成分页查询 常用接口详解 JDBC批处理 SQL注入问题 事务处理解决转账问题 连接池 使用反射对DBUtils再次的封装 BaseDAO的封装 【学习目标】 1.1

    2024年01月19日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包