vue绑定事件

基本绑定

方法必须定义在 vue 的 Methods 对象中, 注意复数

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层：模版-->
<div id="app-4">
    <button v-on:click="sayHi">click me</button>
</div>

<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            msg: "hello, vue!"
        },
        methods: {  //方法必须定义在 vue 的 Methods 对象中
            sayHi: function () {
                alert(this.msg);
            }
        }
    })
</script>

</body>
</html>

双向绑定

vue.js是一个MVVM框架，即数据双向绑定，这是VUE的核心

为何要使用双向绑定？

在vue.js中，如果使用vuex，实际上数据还是单向的，但是对于UI控件来说，比如处理表单，使用双向绑定就特别舒服了。一般在全局性数据使用单向绑定，方便跟踪；对于局部数据使用双向绑定，简单易操作。

在表单中使用双向绑定

你可以用 v-model 指令在表单 、及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

具体实现

输入文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层：模版-->
<div id="app-4">
    input: <input type="text" v-model="msg1"> {{msg1}}<br/><br/><br/>

</div>

<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            msg1: "111"
        }
    })
</script>


</body>
</html>

多行文本

<!--view层：模版-->
<div id="app-4">
    input: <textarea type="text" v-model="msg2"></textarea> {{msg2}}<br/><br/><br/>

</div>

<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            msg2: "222"
        }
    })
</script>

单选

<!--view层：模版-->
<div id="app-4">

    性别：
    <input type="radio" name="sex" value="男" v-model="sexInfo">男
    <input type="radio" name="sex" value="女" v-model="sexInfo">女
    选中了： {{sexInfo}}<br/><br/><br/>

</div>

<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            sexInfo: null
        }
    })
</script>

下拉框

如果 v-model 表达式的初始值未能匹配任何选项，

<!--view层：模版-->
<div id="app-4">
    下拉框：
    <select v-model="selected">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    {{selected}}
</div>

<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            selected: ''
        }
    })
</script>