VUE的總結(2)

時間  2019-11-10
標籤 vue 總結 简体版
原文   原文鏈接

用到的代碼： https://github.com/liyang1234...
vue.js API傳送門： https://cn.vuejs.org/v2/api/html

v-on指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on指令</title>
</head>
<body>
    <div id="app">
        <button v-on:click="clickhandler">btn</button>
    </div>
    <script src="vue.min.js"></script>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                clickhandler(){
                    console.log(Math.random());
                }
            }
        });
    </script>
</body>
</html>

clipboard.png

點擊按鈕產生了隨機數，v-on：能夠用@代替。vue

點擊按鈕，數字自增

<div id="app">
        <button v-on:click="clickhandler">btn</button>
        <h1>{{num}}</h1>
    </div>
    <script src="vue.min.js"></script>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                clickhandler(){
                    this. num++;
                }
            }
        }); 
    </script>

點擊按鈕數字增長git

clipboard.png

可是有時候咱們是要傳參數的

<div id="app">
    <button v-on:click="clickhandler(2)">btn</button> <!-- 至關於函數調用 2是實參  -->
    <h1 v-text="num"></h1>
</div>
<script src="vue.min.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            num: 0
        },
        methods: {//至關於函數聲明
            clickhandler(n){
                this. num += n;
            }
        }
    });
</script>

這樣就是每點擊一次增長2github

獲取事件源用$event

<div id="app">
    <button v-on:click="clickhandler(2,$event)">btn</button> <!-- 至關於函數調用 2是實參  -->
    <h1 v-text="num"></h1>
</div>
<script src="vue.min.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            num: 0
        },
        methods: {//至關於函數聲明
            clickhandler(n,e){
                this. num += n;
                console.log(e);
            }
        }
    });
</script>

clipboard.png

能夠在按鈕上綁定多個事件

<div id="app">
    <button v-on:click="clickhandler(2,$event)">btn</button> <!-- 至關於函數調用 2是實參  -->
    <h1 v-text="num"></h1>

    <button v-on="{mousedown: doThis, mouseup: doThat}">btn2</button>
</div>
<script src="vue.min.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            num: 0
        },
        methods: {//至關於函數聲明
            clickhandler(n,e){
                this. num += n;
                console.log(e);
            },
            doThis(e){
                console.log('doThis');
            },
            doThat(e){
                console.log('doThat');
            }
        }
    });
</script>

按下鼠標輸出doThis 放開鼠標輸出doThat
clipboard.pngapi

冒泡

<style>
    #div1{
        width: 400px;
        height: 400px;
        background: red;
    }
    #div2{
        width: 200px;
        height: 200px;
        background: green;
    }
</style>

</head>
<body>瀏覽器

<div id="app">
    <button v-on:click="clickhandler(2,$event)">btn</button> <!-- 至關於函數調用 2是實參  -->
    <h1 v-text="num"></h1>
    <button v-on="{mousedown: doThis, mouseup: doThat}">btn2</button>

    <div id="div1" @click="clickDiv1">
        <div id="div2" @click="clickDiv2"></div>
    </div>
</div>


<script src="vue.min.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            num: 0
        },
        methods: {//至關於函數聲明
            clickhandler(n,e){
                this. num += n;
                console.log(e);
            },
            doThis(e){
                console.log('doThis');
            },
            doThat(e){
                console.log('doThat');
            },
            clickDiv1(){
                console.log('div1');
            },
            clickDiv2(){
                console.log('div2');
            }
        }
    });
</script>

點擊div2 再點擊div1app

clipboard.png

先捕獲後冒泡，冒泡從裏往外，先輸出div2，再輸出div1。

阻止冒泡

<div id="div1" @click="clickDiv1">
        <div id="div2" @click="clickDiv2($event)"></div>
</div>
clickDiv1(){
                console.log('div1');
            },

clickDiv2(e){dom

console.log('div2');
                e.stopPropagation();
            }

點擊div2,只輸出div2
clipboard.png函數

使用vue的方法 @click.stop

<div id="div1" @click="clickDiv1">
    <div id="div2" @click.stop="clickDiv2($event)"></div>
</div>
clickDiv1(){
                console.log('div1');
            },

clickDiv2(e){ui

console.log('div2');
            }

一樣能夠阻止冒泡
clipboard.png

阻止瀏覽器默認行爲

baidu
點擊超連接會默認跳轉到百度網頁，

<a href="http://www.baidu.com" @click="baidu($event)">baidu</a>
baidu(e){
             e.preventDefault();
        }

點擊超連接以後不會跳轉了
clipboard.png

vue提供的修飾符 .prevent

<a href="http://www.baidu.com" @click.prevent="baidu($event)">baidu</a>

一樣能阻止默認行爲

兩個修飾符能夠連着寫

<a href="http://www.baidu.com" @click.stop.prevent="baidu($event)">baidu</a>
<input type="text" @keyup="keyuphandler($event)">
keyuphandler(e){
     if(e.keyCode == 13){//13是回車
         console.log('hahahahh');
     }
}
當在輸入框中按回車鍵時，輸出一串 。。。

clipboard.png

keyCode總結：https://www.cnblogs.com/daysm...

.once修飾符表示只能一次

<button v-on:click.once="clickhandler(2,$event)">btn</button>
按鈕只能點擊一次
clipboard.png

v-model指令

原理

<div id="app">
        用戶名: <input type="text" v-model="username">
        <h4>用戶名是：{{username}}</h4>
    </div>

    <script src=vue.min.js></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                username: ''
            }
        });
    </script>

input框裏輸入什麼就顯示什麼
clipboard.png

原理:<input>至關於View層，經過v-model綁定上data裏面的username,將數據自動同步到Model層,雙花括號將二者聯繫起來，Model層將數據同步到「用戶名是：」的View層，這就是雙向數據綁定。

clipboard.png

v-model只限制於能使用的標籤：<input><select><textarea>

v-model自動將radio設成單選

性別: <input type="radio">男
 <input type="radio">女

如今是單選框能夠多選
clipboard.png

性別: <input type="radio" name="sex">男
<input type="radio" name="sex">女

添加name屬性能夠實現單選
clipboard.png

如今用v-model試一下

性別: <input type="radio" value="男" v-model="sex">男
<input type="radio" value="女" v-model="sex">女
<h4>用戶的性別是:{{sex}}</h4>

後臺接收數據接的是value

clipboard.png

多選框

愛好:<input type="checkbox" value="籃球" v-model="hobbys">籃球
     <input type="checkbox" value="足球" v-model="hobbys">足球
     <input type="checkbox" value="排球" v-model="hobbys">排球
     <h4>用戶的愛好是:{{hobbys}}</h4>
data: {
            hobbys:[]
        }

clipboard.png

下拉列表

公司:<select name="" id="" v-model="company">
         <option value="百度">百度</option>
         <option value="百度">阿里巴巴</option>
         <option value="百度">騰訊</option>
     </select>
<h4>用戶的公司是:{{company}}</h4>
data:{
        company:' ' 
     }

clipboard.png

textarea

<textarea value="自我介紹" cols="30" rows="10" id="" v-model="description"></textarea>
 <h4>個人描述是：{{description}}</h4>
 data: {
     description:''
     }

clipboard.png

幾個修飾符

.lazy 當鼠標挪出input框的時候纔回顯

用戶名: <input type="text" v-model="username">
            <h4>用戶名是：{{username}}</h4>

            用戶名lazy: <input type="text" v-model.lazy="username">
            <h4>用戶名是：{{username}}</h4>

clipboard.png
clipboard.png

.number

年齡:<input type="text" v-model="age">
            <h4>用戶的年齡是:{{age}}</h4>

clipboard.png
clipboard.png

獲得的數據類型是 string

年齡:<input type="text" v-model.number="age">
            <h4>用戶的年齡是:{{age}}</h4>

clipboard.png
clipboard.png

獲得的數據類型是 number

將type改爲number,輸入框能夠有增長減小功能

年齡:<input type="number" v-model.number="age">
            <h4>用戶的年齡是:{{age}}</h4>

clipboard.png

.trim去掉首尾空格

用戶名trim: <input type="text" v-model.trim="username">
          <h4>用戶名是：{{username}}</h4>

clipboard.png

v-bind綁定屬性

<body>
<div id="app">
    <img src="imgSrc" alt="">
</div>

<script src="vue.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            imgSrc: 'https://cn.vuejs.org/images/logo.png'
        }

    });

想把ImgSrc的地址做爲img標籤中的圖片，可是會報錯：

clipboard.png

<img v-bind:src="imgSrc" alt="">OK了

clipboard.png

v-bind的簡寫形式是冒號:

小例子

.aa{
        width: 100px;
        height: 100px;
        background: #F00;
    }
    <div class="aa"></div>

clipboard.png

.aa{
        width: 100px;
        height: 100px;
        background: #F00;
    }

v-bind的方式

.aa{
            width: 100px;
            height: 100px;
            background: #F00;
        }
        <div :class="className"></div>
        data:{
            className:'aa'
            }

值控制是否顯示

.aa{
        width: 100px;
        height: 100px;
        background: #F00;
    }
    <div :class="className"></div>
    <div :class="{aa:isAA}"></div>
    data:{
        isAA: true
        }

意思是樣式顯示取決於isAA是否爲true
clipboard.png

樣式寫在對象中

<div :style="styleObj"></div>
 styleObj: {
                width: '100px',
                height: '100px',
                background: '#0f0'

            }

clipboard.png

其餘指令

v-pre指令原樣輸出

<body>
<div id="app">
    <h1>{{msg}}</h1>

</div>

<script src="vue.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello'
        }
    });
</script>

clipboard.png

<h1 v-pre>{{msg}}</h1>

clipboard.png

v-cloak指令渲染完成後顯示

v-once只渲染一次

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