Vue綁定事件，雙向數據綁定，只是循環沒那麼簡單

時間  2019-11-08
標籤 vue 綁定 事件 雙向 數據 只是 循環 那麼 簡單 简体版
原文   原文鏈接

v-on對象處理html

<p @mouseover = "doTish" @mouseout = "doThat"> 對象形式 </p>

<p v-on="{ mouseover: doTish, mouseout: doThat }"> 對象形式 </p>複製代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app" >
    <p v-on="{ mouseover: doTish, mouseout: doThat }">對象形式</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        methods:{
            doTish(){
                event.target.style.color = "red";
            },

            doThat(){
                event.target.style.color = "#0f0";
            },
        },
    })
</script>
</body>
</html>複製代碼

v-on:keyup監聽按鍵觸發常見的按鍵別名：vue

'.enter'
    '.tab'
    '.delete'(捕獲「刪除」和「退格」鍵)
    '.esc'
    '.space'
    '.up'
    '.down'
    '.left'
    '.right'複製代碼

按鍵序號網址查詢:'http://www.cnblogs.com/wuhua1/p/6686237.html'npm

Vue.config.keyCodes.f1 = 112複製代碼

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>複製代碼

<!-- 有且只有 Ctrl 被按下的時候才觸發 -->

<button @click.ctrl.exact="onCtrlClick">A</button>複製代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app" >
    <!--鼠標點擊+ctrl 才能觸發-->
    <p @click.ctrl.exact ="doTish">對象形式</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        methods:{
            doTish(){
                event.target.style.color = "red";
            },

        },
    })
</script>
</body>
</html>複製代碼

事件修飾符數組

'.stop'      -- 阻止事件冒泡
    '.prevent'   -- 阻止默認事件
    '.capture'   -- 添加事件偵聽器時使用事件捕獲模式
    '.self'      --只當事件在該元素自己（好比不是子元素）觸發時觸發回調
    '.once'      --事件只觸發一次
    'native'     -- 給組件綁定點擊事件複製代碼

阻止事件冒泡app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <style>
        .inner{
            width: 200px;
            height: 200px;
            background-color: darkseagreen;
        }
    </style>
</head>
<body>
<div class="inner" id="app" @click="divClick">
    <input type="button" value="點擊" @click.stop="inputClick">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        // data 負責輸出理數據的
        data:{
        },
        // methods 負責處理調用方法的
        methods:{
            divClick(){
                console.log("最外層div")
            },
            inputClick(){
                console.log("最內層div")
            }
        }
    })
</script>
</body>
</html>複製代碼

實現捕獲觸發事件的機制 -- capture測試

冒泡是從向外依次觸發，使用capture，就變成了從先顯示外面，在顯示裏面this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <style>
        .inner{
            width: 200px;
            height: 200px;
            background-color: darkseagreen;
        }
    </style>
</head>
<body>
<div class="inner" id="app" @click.capture="divClick">
    <input type="button" value="點擊" @click="inputClick">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        // data 負責輸出理數據的
        data:{},
        // methods 負責處理調用方法的
        methods:{
            divClick(){
                console.log("最外層div")
            },
            inputClick(){
                console.log("最內層div")
            }
        }
    })
</script>
</body>
</html>複製代碼

打印結果最外層div最內層divspa

只會阻止本身身上冒泡行爲 -- self只會阻止本身身上冒泡行爲 ,當有多層嵌套的時候，只會阻止有self 冒泡行爲.net

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <style>
        .inner{
            width: 200px;
            height: 200px;
            background-color: darkseagreen;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="outer" @click="div2Handler">
        <div class="inner" @click.self="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>
    </div>
</div>
<script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            div1Handler() {
                console.log('這是觸發了 inner div 的點擊事件')
            },
            btnHandler() {
                console.log('這是觸發了 btn 按鈕 的點擊事件')
            },
            div2Handler() {
                console.log('這是觸發了 outer div 的點擊事件')
            }
        }
    });
</script>
</body>
</html>複製代碼

這是觸發了 btn 按鈕 的點擊事件這是觸發了 outer div 的點擊事件3d

阻止默認事件 -- prevent1.例如a標籤默認事件就是點擊跳轉頁面，爲了阻止a標籤的默認事件觸發咱們綁定的事件，可使用prevent2.圖片的默認事件禁止拖拽，若是想給圖片設置拖拽效果的話記得作阻止默認行爲

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="www.baidu.com" @click.prevent.once="linkClick">百度</a>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        // data 負責輸出理數據的
        data:{},
        // methods 負責處理調用方法的
        methods:{
            linkClick:function () {
                alert(1)
            }
        }

    })
</script>
</body>
</html>複製代碼

只觸發一次默認行爲1.只觸一次規定的默認行爲2.下面的案例第二次點擊就會跳轉頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="www.baidu.com" @click.prevent.once="linkClick">百度</a>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        // data 負責輸出理數據的
        data:{},
        // methods 負責處理調用方法的
        methods:{
            linkClick:function () {
                alert(1)
            }
        }
    })
</script>
</body>
</html>複製代碼

阻止事件冒泡 -- stop

事件冒泡從裏向外阻止事件冒泡使用stop

v-on -- 方法處理器和內聯處理器二者區別寫法上，帶不帶括號

沒有括號不支持傳參但只帶event因爲帶括號支持傳參，但必須$evnet 當參數傳入纔有evet事件

方法處理器內聯處理器

v-model 雙向數據綁定

修飾符<input type="text" v-model.lazy="name" />
        .lazy :失去焦點同步一次
        .number :格式化數字
        .trim : 去除首尾空格複製代碼

checked -- 多選框(用數組接收)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    愛好
    <br>
    足球<input name="text" v-model="msg" type="checkbox" value="foot">
    籃球<input name="text" v-model="msg" type="checkbox" value="bask">
    {{msg}}
</div>
<script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            msg:[]
        },
    });
</script>
</body>
</html>複製代碼

select --下拉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            selected: 'A',
            options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ]
        },
    });
</script>
</body>
</html>複製代碼

<input v-model.lazy ="msg" >

<input type="text" v-on:input="inputHandle" />複製代碼

v-for -- 循環

支持循環數組|對象|數字|字符串，Array | Object | number | string

數組使用

<p v-for="item,index in items">{{item}}--{{index}}</p>複製代碼

循環對象

<p v-for="(value,key,index) in items">{{value}}-{{key}}-{{index}}</p>

<p v-for="item in 3">{{item}}</p>複製代碼

對象從新渲染

file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input v-model="msg.title" type="submit" @click="changeMsg">
</div>
<script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            msg:{},
        },
        methods:{
            changeMsg(){
                this.msg.title = "改變"
            }
        }
    });
</script>
</body>
</html>複製代碼

怎麼保證不在計劃內的值也被從新渲染1.調用Vue的靜態方法：set2.調用實例上的方法 ：$set3.給計劃內的對象從新賦值：vm.object = {key:'新的'}4.添加指定屬性從新構建賦值：Object.assign()

第一種解決方法 -- set/$set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input v-model="msg.title" type="submit" @click="changeMsg">
</div>
<script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            msg:{},
        },
        methods:{
            changeMsg(){
                Vue.set(this.msg, 'title', '新的' )
            }
        }
    });
</script>
</body>
</html>複製代碼

$set ($set 是實例方法所以也是this在內部直接調用)複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input v-model="msg.title" type="submit" @click="changeMsg">
</div>
<script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            msg:{},
        },
        methods:{
            changeMsg(){
                this.$set(this.msg, 'title', '新的' )
            }
        }
    });
</script>
</body>
</html>複製代碼

給計劃內的對象從新賦值

vm.object = {key:'新的'}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input v-model="msg.title" type="submit" @click="changeMsg">
</div>
<script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            msg:{},
        },
        methods:{
            changeMsg(){
                this.msg = {title:"新的"}
            }
        }
    });
</script>
</body>
</html>複製代碼

Object.assign({},this.object,{key,value})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input v-model="msg.title" type="submit" @click="changeMsg">
</div>
<script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            msg:{},
        },
        methods:{
            changeMsg(){
                this.msg = Object.assign({},  {
                    title: '新的',
                })
            }
        }
    });
</script>
</body>
</html>複製代碼

數組從新渲染

'push()'
    'pop()'
    'shift()'
    'unshift()'
    'splice()'
    'sort()'
    'reverse()'
        
filter(), concat() 和 slice() ,map()

依舊支持set/$set

splice是個好方法會經常使用複製代碼

解決vm.items[indexOfItem] = newValue不能被渲染的問題

使用方法set 是Vue靜態方法，經過Vue調用使用Vue.set( array, indexOfItem, newValue)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-for="i in msg">{{i}}</p>
    <input v-model="pushArray">
    <button @click="changeMsg">提交</button>
</div>
<script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            pushArray:'',
            msg:['我是', '測試', '數據'],
        },
        methods:{
            changeMsg(){
                Vue.set(this.msg, 0, this.pushArray);
            }
        }
    });
</script>
</body>
</html>複製代碼

splice 是一個好方法

v-for 爲何要配合v-bind:key

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
  <div id="app">

    <div>
      <label>Id:
        <input type="text" v-model="id">
      </label>

      <label>Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="添加" @click="add">
    </div>

    <!-- 注意： v-for 循環的時候，key 屬性只能使用 number或者string -->
    <!-- 注意： key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定 key 的值 -->
    <!-- 在組件中，使用v-for循環的時候，或者在一些特殊狀況中，若是 v-for 有問題，必須 在使用 v-for 的同時，指定 惟一的 字符串/數字 類型 :key 值 -->
    <p v-for="item in list" :key="item.id">
      <input type="checkbox">{{item.id}} --- {{item.name}}
    </p>
  </div>

  <script>
    // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: '李斯' },
          { id: 2, name: '嬴政' },
          { id: 3, name: '趙高' },
          { id: 4, name: '韓非' },
          { id: 5, name: '荀子' }
        ]
      },
      methods: {
        add() { // 添加方法
          this.list.unshift({ id: this.id, name: this.name })
        }
      }
    });
  </script>
</body>

</html>複製代碼

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

請點贊！由於大家的贊同/鼓勵是我寫做的最大動力！

歡迎關注達達的簡書！

這是一個有質量，有態度的博客

博客

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