Vue——表單控制、購物車案例、v-model進階、與后端交互三種方式、箭頭函數(shù)

這篇具有很好參考價值的文章主要介紹了Vue——表單控制、購物車案例、v-model進階、與后端交互三種方式、箭頭函數(shù)。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

表單控制

// 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循環(huán)補充

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

    // 2 in的循環(huán)(不怎么用)，循環(huán)出索引
    // for (i in arr){
    //     // console.log(i)
    //     console.log(arr[i])
    // }

    // 3 of循環(huán) es6的語法 循環(huán)出value值
    // for (i of arr){
    //     console.log(i)
    // }

    // 4 數(shù)組的循環(huán) 值在前索引在后
    // arr.forEach(function(value,index){
    //     console.log(index,'-----',value)
    // })

    // 5 jQuery的循環(huán) 索引在前值在后
    $.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>商品數(shù)量</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會發(fā)生變化，頁面也在變，都會重新刷新頁面。函數(shù)就會重新執(zhí)行</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 根據(jù)checkGroup選中的計算
                // 循環(huán)checkGroup 拿出價格*數(shù)量 累加 最后返回
                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框的數(shù)據(jù)綁定失去焦點之后再變化
	// number:數(shù)字開頭，只保留數(shù)字，后面的字母不保留；字母開頭，都保留
	// 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>

與后端交互的三種方式

# 后端寫了一堆接口
# 前端現(xiàn)在發(fā)送請求
# 前后端要打通--->從前端發(fā)送ajax--->核心:使用js發(fā)送http請求，接收返回
	原生js，可以開啟ajax，但是原生js開啟，比較麻煩，需要做瀏覽器兼容，有坑(基本不寫)
    jQuery，寫了個兼容所有瀏覽器的，$.ajax()，不僅僅有ajax，還封裝了很多dom操作
    	如果在Vue中使用它，不合適
    axios:第三方的ajax包(之后用這個)
    fetch:原生js發(fā)送ajax請求，有的瀏覽器也不兼容
        
# 寫個后端:flask
# pip3 install flask

from flask import Flask,jsonify

方式一：使用jQuery的ajax

<body>
<div id="app">
    <button @click="handleLoad">點我加載數(shù)據(jù)</button>
    <hr>
    你的名字是：{{name}},你的年齡是{{age}}
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
             // 請求發(fā)送成功，后端執(zhí)行了，但是被瀏覽器攔截了，因為有跨域問題
             // 當前請求地址，如果向非當前地址欄中的地址發(fā)送請求，就會出現(xiàn)跨域
             // 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">點我加載數(shù)據(jù)</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
                // })
                
                // 箭頭函數(shù)寫法
           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">點我加載數(shù)據(jù)</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);
                //     });
                // 箭頭函數(shù)寫法
                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>

箭頭函數(shù)

<script>
    // 箭頭函數(shù)
    // 1.無參數(shù)，無返回值
    let f = function () {
        console.log('我是匿名函數(shù)')
    }
    let f = () => {
        console.log('我是匿名函數(shù)')
    }
    f()

    // 2.有一個參數(shù)，沒有返回值，可以省略括號
    let f = function (name) {
        console.log('我是匿名函數(shù)',name)
    }
    let f = name => {
        console.log('我是匿名函數(shù)',name)
    }
    f('XxMa')

    // 3.多個參數(shù)，不能省略括號
    let f = function (name,age) {
        console.log('我是匿名函數(shù)',name,age)
    }
    let f = (name,age) => {
        console.log('我是匿名函數(shù)',name,age)
    }
    f('XxMa',19)

    // 4.多個參數(shù)，不能省略括號，一個返回值
    let f = (name,age) => {
        return name + 'nb'
    }
    // 簡寫
    let f = (name,age) => name + 'nb'
    let res = f('XxMa',19)
    console.log(res)
    
    // 5.一個參數(shù)，一個返回值
    let f = name => name + 'nb'
    let res = f('XxMa',19)
    console.log(res)
</script>

文章來源地址http://www.zghlxwxcb.cn/news/detail-472177.html

到了這里，關于Vue——表單控制、購物車案例、v-model進階、與后端交互三種方式、箭頭函數(shù)的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！