Vue中v-on的指令以及一些其餘指令

時間 2019-12-01

標籤 vue 指令以及一些其餘简体版

原文原文鏈接

1.v-on的基本使用vue

<div id="app">
    <!-- 使用事件綁定的簡寫形式 -->
    <input type="button" value="按鈕" v-on:click="btn">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        //methods是用來專門存放vue的處理方法的
        methods: {
            btn: function () {
                alert('123');
            }
        }
    });
</script>

咱們在的的時侯v-on是能夠縮寫成@的，例如上邊的能夠縮寫成:@:chick="btn"。數組

在Vue中，其餘的事件均可以用v-on綁定瀏覽器

2.事件修飾符app

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。儘管咱們能夠在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。oop

爲了解決這個問題，Vue.js 爲 v-on 提供了事件修飾符。以前提過，修飾符是由點開頭的指令後綴來表示的。測試

使用修飾符阻止瀏覽器的默認行爲this

<div id="app">
    <a href="http://www.qq.com"  v-on:click.prevent="btn">騰訊</a>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        methods: {
            btn: function () {
                alert('123');
            }
        }
    });
</script>

使用修飾符綁定一次性事件spa

<div id="app">
    <a href="http://www.qq.com" v-on:click.once="btn($event)">騰訊</a>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        methods: {
              btn: function (ev) {
                ev.preventDefault();
                alert('123');
            }
        }
    });
</script>

$event是原始的DOM事件：有時也須要在內聯語句處理器中訪問原始的 DOM 事件。能夠用特殊變量 $event 把它傳入方法：code

按鍵修飾符:綁定鍵盤擡起事件，可是隻有enter 鍵能觸發此事件對象

<div id="app">
    <input type="text"  v-on:keyup.enter="keyup">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        methods: {
            keyup:function(){
                console.log('111')
            }
        }
    });
</script>

鼠標修飾符:鼠標左鍵觸發事件

<div id="app">
    <input type="button" value="按鈕" v-on:click.left="btn">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        methods: {
           btn:()=>{
                console.log('111')
            }
        }
    });
</script>

爲何在 HTML 中監聽事件?

你可能注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但沒必要擔憂，由於全部的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會致使任何維護上的困難。實際上，使用 v-on 有幾個好處：

掃一眼 HTML 模板便能輕鬆定位在 JavaScript 代碼裏對應的方法。
由於你無須在 JavaScript 裏手動綁定事件，你的 ViewModel 代碼能夠是很是純粹的邏輯，和 DOM 徹底解耦，更易於測試。

3.當一個 ViewModel 被銷燬時，全部的事件處理器都會自動被刪除。你無須擔憂如何清理它們。

3.v-show的指令：

<body>
    <div id="app">
        <input type="button" value="按鈕" v-on:click="change">
        <p v-show="is_show">秀兒，是你嗎</p>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            is_show: false,
        },
        methods: {
            change: function () {
                this.is_show = !this.is_show;
            }
        }
    });

</script>

4.v-if的指令：

<body>
    <div id="app">
        <input type="text"  id="" v-model="type">
        <div v-if="type === 'A'">我是A</div>
        <div v-else-if="type === 'B'">我是B</div>
        <div v-else-if="type === 'C'">我是C</div>
        <div v-else-if="type === 'D'">我是D</div>
        <div v-else>我什麼也不是</div>
    </div>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            type:''
        }
    });

</script>

5.v-for的指令：

<body>
    <div id="app">
        <!-- 數組 -->
        <ul>
            <!-- v-for 循環的語法規則能夠參考 js 的 for in 循環 -->
            <li v-for="(v,key) in arr">{{v}}---{{key}}</li>
        </ul>
        <!-- 對象 -->
        <ul>
            <li v-for="(v,k) in oop">{{v}}----{{k}}</li>
        </ul>

    </div>
</body>
<script>
    // for(cc in arr)
    var app = new Vue({
        el:'#app',
        data:{
            arr:['ff','hh','jj','gg','ll'],

            oop:{name:'張三',age:30,sex:'男'}
        }
    });
</script>

6.v-once:的指令：

<body>
    <div id="app">
        <!-- 只渲染一次數據 再也不是數據單項綁定  這是單次綁定 -->
        <p v-once>{{msg}}</p>
    </div>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'123'
        }
    });

</script>

1. vue.js 其餘指令
2. 5-Vue的其它指令
3. vue的其他指令
4. Vue的指令及其用法
5. Vue指令（一）
6. 其餘一些Linux命令
7. vue的指令
8. nodejs一些指令
9. Linux中常見的指令(二): cp指令，mv指令，echo指令，cat指令，zip指令，unzip指令，tar指令，find指令，grep指令，tree指令
10. Git指令及其操作
更多相關文章...
• C# 預處理器指令 - C#教程
• SQL 指南 - 網站建設指南
• Docker 清理命令
• 算法總結-雙指針

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。