vue框架加深

1. vue事件修飾符

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <style type="text/css">
            #div1{
                width: 400px;
                height: 400px;
                
                background-color: red;
            }
            
            #div2{
                width: 200px;
                height: 200px;
                
                background-color: green;
            }
            
            #div3{
                width: 100px;
                height: 100px;
                
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        
        <!--1.stop修飾符
            v-on:事件名.stop  - 捕獲指定標簽上的指定事件(阻止事件傳遞給父標簽)
        -->
        <!--<div id="div1" v-on:click.stop="action1">
            <div id="div2" v-on:click.stop="action2">
                <div id="div3" v-on:click.stop="action3">
                    
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            
            var app1 = new Vue({
                el:'#div1',
                methods:{
                    action1:function(){
                        alert('div1被點擊')
                    },
                    action2:function(){
                        alert('div2被點擊')
                    },
                    action3:function(){
                        alert('div3被點擊')
                    }
                }
            })
            
        </script>-->
        
        <!--2.表單提交阻止頁面重載
            在form標簽中設置: v-on:submit.prevent='方法屬性名'
        -->
        <!--<form action="" method="get" id="app-2" v-on:submit.prevent="submitAction">
            <input type="" name="username" id="" value="" />
            <input type="password" name="password" id="" value="" />
            <input type="radio" name="sex" id="" value="" />男
            <input type="radio" name="sex" id="" value="" />女
            <input type="submit" value="提交"/>
        </form>
        <script type="text/javascript">
            var app2 = new Vue({
                el:'#app-2',
                methods:{
                    submitAction:function(){
                        alert('已經提交')
                    }
                }
            })
        </script>-->
        
        <div id="app-3">
            <p v-for="goods in goodslist">{{goods}}</p>
        </div>
        <script type="text/javascript">
            var datalist = {'goodslist':[
                        '元素1','元素2', '元素3', '元素4'
                    ]}
            var app3 = new Vue({
                el:'#app-3',
                data:datalist
            })
        </script>
        
        
    </body>
</html>

2. vue加載異步數據

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app-1">
            <h1>{{name}}</h1>
            <p v-for="data in datalist" v-if="datalist">{{data.title}}</p>
            
        </div>
        
        
        <!--1.將請求到的數據通過Vue加載到網頁中
            1)
        -->
        <script type="text/javascript">
            //0)創建Vue對象
            var app1 = new Vue({
                el:'#app-1',
                data: {
                    datalist: [],
                    name: 'abc'
                }
            })
            
            
            //1)通過接口請求
            $.ajax({
                type:"get",
                url:"http://rap2api.taobao.org/app/mock/177073/houseList",
                async:true,
                success:function(result){
                    //2）數據請求成功將請求到的數據關聯到Vue對象
                    console.log(result)
                    app1.datalist = result.datalist
                
                }
            });
        </script>
        
    </body>
</html>

3. 購物車

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <link rel="stylesheet" type="text/css" href="css/購物車.css"/>
    </head>
    <body>
        <div id="app-1">
            <table border="0" cellspacing="1" bgcolor="#000000">
            <!--表頭-->
                <tr class="header">
                    <td class="td1"><input type="checkbox" name="" id="check-all" value="" /><label for="check-all">全選</label></td>
                    <td class="td2">商品</td>
                    <td class="td3">單價</td>
                    <td class="td4">數量</td>
                    <td class="td5">小計</td>
                    <td class="td6">操作</td>
                </tr>
                
                <!--商品內容-->
                <tr v-for="goods in goodsData" class="content" v-if="goods.count>0">
                    <!--商品第一列-->
                    <td class="ctd1"><input type="checkbox" name="" id="" value="" /></td>
                    <!--商品圖片和名字-->
                    <td class="box1">
                        <div class="box2">
                            <img v-bind:class="imageClass" v-bind:src="goods.image"/>
                            
                            <p class="title">{{goods.title}}</p>
                        </div>
                    </td>
                    
                    <!--單價-->
                    <td class="center">
                        {{goods.price}}
                    </td>
                    
                    <!--數量-->
                    <td class="center">
                        <button v-on:click="goods.count -= 1; if(goods.count<1){goods.count=1}">-</button>
                        <input type="" name="" class="count" v-model="goods.count" />
                        <button v-on:click="goods.count += 1">+</button>
                    </td>
                    
                    <!--總計-->
                    <td class="center">
                        {{goods.price*goods.count}}
                    </td>
                    <td class="center">
                        <button v-on:click="goods.count=0">刪除</button>
                    </td>
                </tr>
            </table>
        </div>
        
        
        
        <!--請求數據-->
        <script type="text/javascript">
            var app = new Vue({
                el:'#app-1',
                data:{
                    goodsData:[],
                    imageClass:'image'
                }
            })
            $.ajax({
                type:"get",
                url:"http://rap2api.taobao.org/app/mock/177073/getGoodsList",
                async:true,
                success:function(result){
                    app.goodsData = result.goodsData
                    console.log(result.goodsData)
                }
            });
        </script>
    </body>
</html>

4. 購物車的數據雙向綁定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>
    <body>
        <div id="app-1">
            <!--全選按鈕-->
            <input type="checkbox" name="" id="" value="" v-on:change="checkedAll"/>全選<br />
            
            <div id="" v-for="goods in dataList" v-if="goods.count > 0">
                <!--單選-->
                <input v-bind:checked="checked" type="checkbox" name="" id="" value="" v-on:change="if(goods.isChecked==0){goods.isChecked=1}else{goods.isChecked=0}" />
                
                <!--商品名和價格-->
                <font>{{goods.name}}</font>
                <font>{{goods.price}}</font><br />
                
                <!--減商品數量-->
                <button v-on:click="goods.count--;if(goods.count < 1){goods.count=1}">-</button>
                <input type="" name="" id="" v-model="goods.count" />
                <!--加商品數量-->
                <button v-on:click="goods.count++; if(goods.count > 10){goods.count=10}">+</button><br />
                
                <!--總計-->
                <font>{{goods.price*goods.count}}</font><br />
                
                <!--刪除-->
                <button v-on:click="goods.count=0">刪除</button>
                
                <br /> <br />
                
                <p>總價:{{total}} </p>
                
            </div>
        </div>
        
        <script type="text/javascript">
            var app = new Vue({
                el:'#app-1',
                data:{
                    dataList:[
                        {name:'蘋果',price:120, count:2, isChecked:0},
                        {name:'大米',price:60, count:3,  isChecked:0},
                        {name:'衣服',price:220, count:1, isChecked:0},
                        {name:'鞋子',price:300, count:1, isChecked:0}
                    ],
                    checked: ''
                },
                computed:{
                    //計算總價
                    total: function(){
                        return this.dataList.reduce(function(to, item){
                            return to+item.price*item.count*item.isChecked
                        },0)
                        
                    }
                },
                methods:{
                    //全選事件
                    checkedAll:function(){
                        if(this.checked == ''){
                            this.checked = 'checked'
                            this.dataList.forEach(function(item,x,arr){
                                item.isChecked = 1
                            })
                        }else{
                            this.checked = ''
                            this.dataList.forEach(function(item,x,arr){
                                item.isChecked = 0
                            })
                        }
                    }
                }
            })
        </script>
    </body>
</html>

5. vue計算屬性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{{message}}</p>
            <p>{{reverse}}</p>
        </div>
        <script type="text/javascript">
            /*
             1)求數組中元素的和: 針對純數字數字
             數組.reduce(function(參數1，參數2){
                    return 參數1+參數2
             })   -- 參數1的默認是數組的第一個元素，參數2是數組中的元素
             
             2)求數組中對象的某個屬性的和
             數組.reduce(function(參數1，參數2){
                    return 參數1+參數2.屬性
             },默認值)  -- 參數1的值是默認值，參數2是數組中的元素
             
             */
            //求每個元素的和
            var numbers = [1, 2, 3, 4, 5]
            reslut = numbers.reduce(function(total, item){
                return total + item
            })
            console.log(reslut)
            
            
            //求元素中對象屬性的和
            var numbers2 = [
                {price: 1, count:23},
                {price: 10, count:10},
                {price: 20, count:4},
            ]
            reslut2 = numbers2.reduce(function(total, item){
                return total + (item.price*item.count)
            },0)
            console.log('總價:',reslut2)
            
            
            var app = new Vue({
                el:'#app',
                data:{
                    message: 'Hello Vue'
                },
                //計算屬性
                computed:{
                    reverse: function(){
                        return this.message.split('').reverse().join('')
                    }
                }
                
            })
        </script>
    </body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • vue概述 在官方文檔中，有一句話對Vue的定位說的很明確：Vue.js 的核心是一個允許采用簡潔的模板語法來聲明...
    li4065閱讀 7,270評論 0贊 25
  • Swift1> Swift和OC的區別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴謹 對...
    cosWriter閱讀 11,136評論 1贊 32
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內容，還有我對于 Vue 1.0 印象不深的內容。關于...
    云之外閱讀 5,075評論 0贊 29
  • 一、了解Vue.js 1.1.1 Vue.js是什么？ 簡單小巧、漸進式、功能強大的技術棧 1.1.2 為什么學習...
    蔡華鵬閱讀 3,377評論 0贊 3
  • 基于Vue的一些資料 內容 UI組件 開發框架 實用庫 服務端 輔助工具 應用實例 Demo示例 element★...
    嘗了又嘗閱讀 1,175評論 0贊 1