【Vue】Vue数据及事件绑定

1. 数据绑定

1.1 单向绑定

把Model绑定到View后，当用JavaScript代码更新Model时，View会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model操作就可以实现视图的联动更新。

单向绑定的实现过程是：

• 所有数据只保存一份
• 一旦数据变化，就去更新页面(只有data–>DOM，没有DOM–>data)
• 若用户在页面上做了更新，就手动收集(双向绑定式自动收集)，合并到原有的数据中。

1.1.1 插值绑定

• 数据绑定的基本形式，用{{}}实现，在Vue中被称为Mustache语法
• 插值的形式是：{{data}}，它使用的是单向绑定首先定义一个JavaScript对象作为Model，并且把这个Model的两个属性绑定到DOM节点上。

<div id="root">{{name}}div>

<script>
    new Vue({
        el:'#root',
        data: {
            name: '南栀',
        }
    })
script>

分析上述代码：
Vue实例就是ViewModel的代理对象。
el：指定要把Model绑定到id='root’的DOM节点上。
data：指定Model。data中的num相当于Model。

{{ num }}

：相当于View。

1.1.2 v-bind绑定

如果HTML的某些属性可以支持单向绑定，我们只需要在该属性前面加上v-bind指令，这样Vue在解析时会识别出该指令，将属性值跟Vue实例的Model进行绑定。
以后，我们就可以通过Model来动态的操作该属性，从而实现DOM的联动更新。

<div id="root" v-bind:class="yangshi">Hello,{{name}}div>

<script>
    new Vue({
        el:'#root',
        data: {
            name: '南栀',
            yangshi: 'red'
        }
    })
script>

<style>
    .red{
        background-color: red;
    }
style>

1.2 双向绑定

• Vue框架的核心功能就是双向数据绑定。

双向绑定： 把Model绑定到View的同时也将View绑定到Model上，这样既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。

在Vue中只有表单元素能够创建双向的绑定，可以用v-model指令

<div id="root">
    <form action="#">
        <p><input type="text" v-model="name">p>
        <p><input type="text" v-model="age">p>
    form>
    <p>姓名: {{ name }}p>
    <p>年龄: {{ age }}p>
div>


<script>
    new Vue({
        el:'#root',
        data: {
            name:'南栀',
            age: 20,
        }
    })
script>

text(文本框)的绑定：

<div id="root">
    <h5>input元素：h5>
    <input type="text" v-model="message" placeholder="请输入内容...">
    <p>消息是：{{ message }}p>    <br>

    <h5>textarea元素：h5>
    <p>{{ message2 }}p>
    <textarea v-model="message2" placeholder="多行文本输入...">textarea>
div>

<script>
    new Vue({
        el:'#root',
        data: {
            message: '南栀',
            message2: '前端学习中呐！'
        }
    })
script>

checkbox(复选框)的绑定：

<div id="root">
    <h5>单个复选框：h5>
    <label><input type="checkbox" v-model="checked">{{checked}}label>

    <h5>多个复选框：h5>
    <label><input type="checkbox" value="学习" v-model="checkedNames" >studylabel>
    <label><input type="checkbox" value="购物" v-model="checkedNames" >淘宝label>
    <label><input type="checkbox" value="上网" v-model="checkedNames" >上网label>
    <p>您的选择是: {{ checkedNames }}p>
div>

<script>
    new Vue({
        el:'#root',
        data: {
            checked: false,
            checkedNames: []
        }
    })
script>

radio(单选按钮)的绑定：

<div id="root">
    <h5>单选按钮：h5>
    <label><input type="radio" value="飞机" v-model="jiao">飞机label>
    <label><input type="radio" value="高铁" v-model="jiao">高铁label>

    <p>Picked：{{ jiao }}p>
div>

<script>
    new Vue({
        el:'#root',
        data: {
            jiao: '选择吧！'
        }
    })
script>

select的绑定：

<div id="root">
    <select v-model="line" multiple>
        <option value="apple"  checked>苹果option>
        <option value="pear">梨option>
        <option value="orange">橙子option>
    select>
    <p>line: {{ line }}p>
div>

<script>
    new Vue({
        el:'#root',
        data: {
            line: '水果'
        }
    })
script>

2. 事件绑定与监听

2.1 方法及内联处理器

通过v-on绑定实例选项属性methods中的方法作为事件的处理器，v-on: 后的参数接收所有原生事件名称。

方法处理器：
方法处理器：可以用v-on指令监听DOM事件

<div id="root">
    <button v-on:click="dian">点击button>
div>

<script>
    new Vue({
        el:'#root',
        data: {
            name: '南栀'
        },
        methods: {
            dian: function(event) {
                // 方法内的'this'指向vm
                alert("Hello" + this.name + "!");
                // 'event'是原生DOM事件
                alert(event.target.tagName);
            } 
        }
    })
script>

内联语句处理器：
除了直接绑定到一个方法，也可以用内联 JavaScript 语句

<div id="root">
    <button v-on:click="say('hi')">Say Hibutton>
    <button v-on:click="say('nanzhi')">Say nanzhibutton>
div>

<script>
    new Vue({
        el:'#root',
        data: {
            name: '南栀'
        },
        methods: {
            say: function(msg) {
                alert(msg);
            }
        }
    })
script>

内联语句处理器中访问原生DOM事件：
内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法。

<div id="root">
    <a href="https://www.baidu.com" v-on:click="say('hello',$event)">
        去百度
    a>
div>

<script>
    new Vue({
        el:'#root',
        data: {
            name: '南栀'
        },
        methods: {
            say: function(msg,event) {
                event.preventDefault();
            }
        }
    })
script>

【提示】 判断是否为内联处理器的方法：没有括号的是函数名；有括号的实际是一条JS语句，称为内联处理器。

2.2 修饰符

事件修饰符

在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。但方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。

• preventDefault()：阻止链接打开 URL
• stopPropagation()：阻止单击事件继续传播(阻止事件冒泡)

为了解决这个问题，Vue.js 为 v-on 提供两个事件修饰符：

• .prevent ：调用preventDefault() 阻止链接打开 URL。

<div id="root">
    <a href="https://www.baidu.com" v-on:click.prevent>
        去百度
    a>
div>

• .stop ：调用stopPropagation() 阻止单击事件继续传播(阻止事件冒泡)。

<a v-on:click.stop="doThis">a>

• .capture ：使用capture模式添加事件监听器。即元素自身触发的事件先在此处理，然后才交由内部元素进行处理。

<div v-on:click.capture="doThis">...div>

• .self ：只当事件在该元素本身（而不是子元素）触发时触发回调。

键值修饰符

在监听键盘事件时，经常需要检测 keyCode。
Vue.js 允许为 v-on 添加按键修饰符，记住所有的 keyCode 比较困难，Vue.js 为最常用的按键提供别名。

全部的按键别名：
enter、tab、delete、esc、space、up、down、left、right

<div id="root">
   <button v-on:keyup.enter="say">提交button>
div>

<script>
    new Vue({
        el:'#root',
        data: {
            mag: '键修饰符'
        },
        methods: {
            say: function() {
                alert(this.mag);
            }
        }
    })
script>