day68:Vue:XXX

時間  2020-10-16
標籤 html vue python ios ajax axios 後端 瀏覽器 app 函數 欄目 HTML 简体版
原文   原文鏈接

1.類值操做

添加class類名，值是一個對象

<div :class="{c1:true/false}"></div>html

語法：{
    class類1:布爾值變量1,
    class類2:布爾值變量2,
        }
例子：
　　<p :class="{box1:myclass1}">一個段落</p>

// 布爾值變量若是是false，則不會添加對象的屬性名做爲樣式
// 布爾值變量若是是true，則不會添加對象的屬性名做爲樣式

類值操做常見形式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <style>
        .c1{
            background-color: red;
            font-size: 18px;
        }
        .c2{
            font-size: 36px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 根據data中的num的值來肯定是否顯示c1樣式 -->
        <div :class="{c1:num==0}" class="c2">{{msg}}</div>


        <!-- 根據vue傳過來的data中的status的值來肯定顯示c1樣式仍是c2樣式 -->
        <div :class="status?'c1':'c2'">{{ msg }}</div>


        <!-- m1爲自定義對象 -->
        <div :class="[m1,]">{{ msg }}</div>
    </div>


</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return{
                msg:'hello',
                num:0,
                status:true,
                m1:{
                    c1:false,
                    c2:true,
                }
            }
        }
    })
</script>
</html>

總結

// 1. 給元素綁定class類名
data:{
    myObj:{
        complete:true,
        uncomplete:false,
        }
    }
// html元素：    
<div class="box" :class="myObj">2222</div>
// 最終瀏覽器效果：
<div class="box complete">2222</div>

2.style操做樣式

操做樣式語法: vue

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>html</title>
</head>
<body>
    <div id="app">
        <!-- style操做方式1 -->
        <div :style="{color:fontColor,backgroundColor:bgc}">
            style操做方式1
        </div>
        
        <!-- style操做方式2 -->
        <div :style="vuestyle">
            style操做方式2
        </div>
    </div>


</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                fontColor: 'red',
                bgc: 'green',
                vuestyle: {
                    'color': 'red',
                    fontSize: '80px'
                },
            }
        }
    })
</script>
</html>

3:示例:選項卡

實現思路：當用戶點擊標題欄的按鈕[span]時，顯示對應索引下標的內容塊[.list]python

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #card{
            width: 500px;
            height: 350px;
        }
        .title{
            height:50px;
        }
        .title span{
            width: 100px;
            height: 50px;
            background-color:#ccc;
            display: inline-block;
            line-height: 50px; /* 設置行和當前元素的高度相等,就可讓文本內容上下居中 */
            text-align:center;
        }
        .content .list{
            width: 500px;
            height: 300px;
            background-color: yellow;
            display: none;
        }
        .content .active{
            display: block;
        }

        .title .current{
            background-color: yellow;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>

    <div id="card">
        <div class="title">
            <span @click="num=1" :class="{current:num===1}">國內新聞</span>
            <span @click="num=2" :class="{current:num===2}">國際新聞</span>
            <span @click="num=3" :class="{current:num===3}">銀河新聞</span>
            <!--<span>{{num}}</span>-->
        </div>
        <div class="content">
            <div class="list" :class="{active:num===1}">國內新聞列表</div>
            <div class="list" :class="{active:num===2}">國際新聞列表</div>
            <div class="list" :class="{active:num===3}">銀河新聞列表</div>
        </div>
    </div>
    <script>
        // 思路：
        // 當用戶點擊標題欄的按鈕[span]時，顯示對應索引下標的內容塊[.list]
        // 代碼實現：
        var card = new Vue({
            el:"#card",
            data:{
                num:1,
            },
        });
    </script>

</body>
</html>

4.v-for示例：循環商品顯示

v-for語法：ios

<tr v-for="(value,index) in vue中data的數據" :key="index">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>

<div id="app">
    <table border="1">
        <thead>
            <tr>
                <th>name</th>
                <th>price</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(value,index) in goods" :key="index">
                <td>{{ value.name }}</td>
                <td v-if="value.price>60" style="background-color: red">{{ value.price }}</td>
                <td v-else>{{ value.price }}</td>
            </tr>
        </tbody>
    </table>
</div>

</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                goods: [
                    {"name": "python入門", "price": 150},
                    {"name": "python進階", "price": 100},
                    {"name": "python高級", "price": 75},
                    {"name": "python研究", "price": 60},
                    {"name": "python放棄", "price": 110},
                ]
            }
        }
    })
</script>
</html>

5.過濾器:filter

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <p>{{ price }}</p>
        <p>{{ price.toFixed(2) }}</p> <!-- 保留兩位小數，四捨五入 -->
        <p>{{ price|yuan }}</p> <!-- 過濾器 -->
        <p>{{ price|global }}</p> <!-- 使用全局過濾器 -->
        <p>{{ price|global|yuan }}</p> <!-- 同時使用兩個過濾器 -->
        <p>{{ price2|yuan2(2) }}</p> <!-- 過濾器傳額外參數 -->
    </div>

</body>
<script src="vue.js"></script>
<script>
    // 全局過濾器
    Vue.filter('global',function (value) {
        return value.toFixed(3) + '圓'
    });
    let vm = new Vue({
        el:"#app",
        data(){
            return{
                price:100,
                price2:100.128,
            }
        },
        filters:{ // vue中的過濾器
            yuan(value){
                return value + '元'
            },
            yuan2(value,n){
                return value.toFixed(n) + '元'
            }
        }
    })
</script>
</html>

6.計算屬性:computed

咱們以前學習過字符串反轉，若是直接把反轉的代碼寫在元素中，則會使得其餘同事在開發時時不易發現數據被調整了，因此vue提供了一個計算屬性(computed)，可讓咱們把調整data數據的代碼存在在該屬性中ajax

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>

    <div id="app">
        <p>{{ price }}</p>
        <p>{{ add }}</p>
    </div>

</body>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return{
                price1:100,
                price2:100.126,
            }
        },
        // 計算屬性
        computed:{
            add(){
                return this.price1+ this.price2
            }
        }
    })
</script>
</html>

7.監聽屬性:watch

偵聽屬性，能夠幫助咱們偵聽data某個數據的變化，從而作相應的自定義操做。axios

偵聽屬性是一個對象，它的鍵是要監聽的對象或者變量，值通常是函數，當偵聽的data數據發生變化時，會自定執行的對應函數，這個函數在被調用時，vue會傳入兩個形參，第一個是變化後的數據值，第二個是變化前的數據值。後端

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>

    <div id="app">
        <p> {{ price1 }}</p>
        <input type="text" v-model = "price1">
        <button @click="info.xx='ss'">GOGOGO</button>
    </div>

</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data(){
            return{
                price1:100,
                price2:100.126,
                info:{
                    xx:'oo'
                }
            }
        },
        watch:{
            // 監聽變量
            price1(newv,oldv){
                console.log(newv,oldv);
                if (newv == 888){
                    alert('恭喜你，中獎了!')
                }
            },
            
            // 監聽對象
            'info.xx':function (newv,oldv) {
                if(newv != 'oo'){
                    alert('oo滾出了房間！')
                }
            }
        }
    })
</script>
</html>

8.監聽屬性watch示例:用戶名長度限制

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>

    <div id="app">
        <input type="text" v-model="iptmsg">
        <span style="color: red;font-size: 12px">{{msg}}</span>
    </div>

</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return{
                iptmsg:'',
                msg:''
            }
        },
        watch:{
            // 監聽input框輸入的信息，判斷長度是否符合要求
            iptmsg(newv,oldv){
                if (newv.length>4 && newv.length<10){
                    this.msg=''
                }
                else{
                    this.msg='長度不對！'
                }
            }
        }
    })
</script>
</html>

9.vue對象的生命週期鉤子函數

每一個Vue對象在建立時都要通過一系列的初始化過程。在這個過程當中Vue.js會自動運行一些叫作生命週期的的鉤子函數，咱們可使用這些函數，在對象建立的不一樣階段加上咱們須要的代碼，實現特定的功能。瀏覽器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
</head>
<body>

    <div id="app">
        <p>{{ num }}</p>
    </div>


</body>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return{
                num:0,
            }
        },
        // 觸發時機：1.建立vm對象以前 2.圈地以前 3.data數據放到vm對象以前
        beforeCreate(){
            console.log('----beforeCreate----');
            console.log(this.$el); // undefined
            console.log(this.$data); //undefined
        },
        // 重要!!
        created(){
            console.log('----created----');
            console.log(this.$el); // undefined
            console.log(this.num); // 0 data屬性的值0已經放到vm對象中
            this.num = 20;
        },
        beforeMount(){
            console.log('----beforeMount----');
            console.log(this.$el); // <div id="app">...</div>
            console.log(this.num); // 20 vm對象尚未將數據添加到咱們的視圖中
            this.num = 30;
        },
        // 重要!!
        mounted(){
            console.log('----mounted----');
            console.log(this.$el); // <div id="app">...</div>
            console.log(this.num); // 30 vm對象已經把更新後的data數據顯示到頁面中
        }

    })
</script>
</html>

對於生命週期鉤子函數的總結

1.在vue使用的過程當中，若是要初始化操做，把初始化操做的代碼放在 mounted 中執行。mounted階段就是在vm對象已經把data數據實現到頁面之後。通常頁面初始化使用。例如，用戶訪問頁面加載成功之後，就要執行的ajax請求。app

2.另外一個就是created，這個階段就是在 vue對象建立之後，把ajax請求後端數據的代碼放進 created函數

vue完整的生命週期

 

 

 

 10.阻止事件冒泡 .stop .stop.prevent

 <div class="c2" @click.stop.prevent="f2"></div>

 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>html</title>
    <meta charset="UTF-8">
    <style>
        .c1{
            background-color: red;
            height: 200px;
        }
        .c2{
            background-color: green;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="c1" @click="f1">
            <div class="c2" @click.stop.prevent="f2"></div> <!-- 阻止事件冒泡 -->
        </div>
    </div>

</body>
<script src="vue.js"></script>
<script>
    let vm  = new Vue({

        el:'#app',
        data(){
            return {
                price1:100,

            }
        },
        methods:{
            f1(){
                alert('111');
            },
            f2(){
                alert('222');
            }
        }

    })

</script>
</html>

11.綜合示例:todolist

。。。

12.什麼是鉤子?

1.在A中的init方法調用一個函數

2.B繼承A

3.B能夠重寫A預留出來的鉤子方法run

4.當實例化B時，因爲B中沒有init，會執行其父類A中的init，而A中的init調用了run方法

　　若是B中重寫run方法 那麼執行B中的run方法

　　若是B中沒重寫run方法 那麼執行A中的run方法

　　都是自動執行的 ，由於實例化對象時 會自動執行init方法，而init方法執行了run函數

class A:
    def __init__(self):
        self.run()
    def run(self):
        pass


class B(A):
    def run(self):
        print('xxxx')

b = B()

13.axios

。。。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程