vue教程

  • 后端拜拜,用不到你了,前端开发数据模拟神器nodejs 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javam...
  • vue初学者入门教程 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/hello-vu...
  • vue入门教程之基础语法 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/vue-if...
  • vue入门教程之-属性、事件和双向绑定 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue...
  • vue入门教程之-组件 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/vue-com...
  • vue入门教程之-插槽 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请注明出处 https://www.javaman.cn/vue/vue-slo...
vue入门教程之-属性、事件和双向绑定 - idea激活- IntelliJ IDEA 2021.1激活码破解教程(亲测激活至 2099 年,长期更新)- 爪哇男教程  

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
  --cdn引入vue.min.js
(2) html代码

vue-on事件绑定.png

(3)运行结果如下图:

vue-on运行结果.png

2、v-bind(绑定数据和元素属性)

(1)引入vue.js---通过cdn的方式引入vue.min.js
  --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><br>

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

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
  --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


全部评论: 0

    我有话说: