vue入门教程之-属性、事件和双向绑定

vue入门教程之-属性、事件和双向绑定

欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/vue-model

上一节我们讲了vue的基础语法以及条件、循环语句，今天我们继续来讲解下vue的事件绑定！

1、v-on（可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码）

（1）引入vue.js---通过cdn的方式引入vue.min.js

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> --cdn引入vue.min.js

(2) html代码

vue-on事件绑定.png

（3）运行结果如下图：

vue-on运行结果.png

2、v-bind（绑定数据和元素属性）

（1）引入vue.js---通过cdn的方式引入vue.min.js

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> --cdn引入vue.min.js

(2) html代码

vue-bind属性绑定.png

（3）运行结果如下图：

vue-bind属性绑定运行结果.png

PS:v-on和v-bind的区别为：v-on为事件绑定；v-bind为属性绑定，这一点不要用错了

<a v-bind:click="submit()">点击我</a>

可以执行，但是页面刷新直接运行函数，不符合要求

3、v-model（表单输入绑定）

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；

• checkbox 和 radio 使用 checked property 和 change 事件；

• select 字段将 value 作为 prop 并将 change 作为事件。

（1）引入vue.js---通过cdn的方式引入vue.min.js

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> --cdn引入vue.min.js

(2) html代码

a) 输入框双向绑定

vue-model输入框绑定.png

运行结果：

vue-model输入框结果.png

b) select下拉框双向绑定（绑定事件都change，绑定的属性为value）

vue-model下拉框框绑定.png

运行结果如下图：

vue-model下拉框结果.png

c) radio单选框双向绑定（绑定事件都checked，绑定的属性为value）

vue-model单选框绑定定.png

运行结果如下图：

vue-model单选框框绑定结果.png

d) checkbox复选框双向绑定（绑定事件都checked，绑定的属性为value）

vue-model复选框绑定.png

运行结果如下图：

vue-model复选框结果.png