Vue binding events, two-way data binding, but the cycle is not so simple

v-on
object processing

<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/[email protected]/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
monitor key trigger
common key alias:

    '.enter'
    '.tab'
    '.delete'(捕获“删除”和“退格”键)
    '.esc'
    '.space'
    '.up'
    '.down'
    '.left'
    '.right'

Key number URL query: 'http: //www.cnblogs.com/wuhua1/p/6686237.html'

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/[email protected]/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>

Event Modifier

    '.stop'      -- 阻止事件冒泡
    '.prevent'   -- 阻止默认事件
    '.capture'   -- 添加事件侦听器时使用事件捕获模式
    '.self'      --只当事件在该元素本身（比如不是子元素）触发时触发回调
    '.once'      --事件只触发一次
    'native'     -- 给组件绑定点击事件

Stop event bubbling

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Mechanism to achieve the capture trigger event - capture

Bubbling sequentially outwardly from the trigger, using capture, becomes the first display from the outside, in which the display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Print results
outermost div
innermost div

Only prevents his body bubbling behavior - self
only prevents his body bubbling behavior, when there are multiple levels of nested, there will only prevent acts of self bubbling

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

This is triggered btn button click event
which is triggered outer div click event

Prevent the default event - prevent
1. label such as a default event is to click on the jump page, in order to prevent a default event tag trigger my
events are bound, can be used prevent
default event 2. Pictures prohibited drag, if you want to picture settings, then remember to do the drag effect to prevent default
recognize behavior

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Only trigger a default behavior
1. touch only once the specified default behavior
2. The following case the second click will jump page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 event bubbling - stop

Event bubbling from the inside out
to prevent the use of stop event bubbling

v-on - and inline processor-processor
on the difference between the two writing, with or without brackets

Without parentheses does not support mass participation but only with event
due to the support brackets with mass participation, but it must be passed only when the parameter $ evnet evet event

The processor
inline processor

v-model two-way data binding

修饰符<input type="text" v-model.lazy="name" />
        .lazy :失去焦点同步一次
        .number :格式化数字
        .trim : 去除首尾空格

checked - checkboxes (receiving array)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 - drop-down

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 - loop

Use an array

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

Recycling target

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

<p v-for="item in 3">{{item}}</p>

Re-rendering objects

file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

How to ensure that the value is not within the plan was re-rendered
1. Static method calls the Vue: set
method on the instance 2. Call: $ the SET
3. object to the planned re-assignment: vm.object = {key: 'New '}
4. Add the specified property rebuild assignment: 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/[email protected]/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/[email protected]/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>

Objects to the planned re-assignment

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/[email protected]/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/[email protected]/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>

An array of re-rendering

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

依旧支持set/$set

splice是个好方法会常用

Solve vm.items [indexOfItem] = newValue problem can not be rendered

Vue is set to use a static method, by calling Vue
using 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/[email protected]/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 is a good way

Why v-for to tie v-bind: key

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

If this number of local contents do not get bits (for example: to copyright or other problems), please contact us for rectification can be timely and will be processed in the first time.

Please thumbs up! Because you agree / encouragement is the greatest power of my writing!

Welcome concern Dada Jane book!

This is a quality, attitude blog

Blog