【Vue】Vue数据及事件绑定
文章目录
- 1. 数据绑定
- 1.1 单向绑定
- 1.1.1 插值绑定
- 1.1.2 v-bind绑定
- 1.2 双向绑定
- 2. 事件绑定与监听
- 2.1 方法及内联处理器
- 2.2 修饰符
- 事件修饰符
- 键值修饰符
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。
<div>{{ num }}</div>
:相当于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" >study</label><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'指向vmalert("Hello" + this.name + "!");// 'event'是原生DOM事件alert(event.target.tagName);} }})
</script>
内联语句处理器:
除了直接绑定到一个方法,也可以用内联 JavaScript 语句
<div id="root"><button v-on:click="say('hi')">Say Hi</button><button v-on:click="say('nanzhi')">Say nanzhi</button>
</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>
【Vue】Vue数据及事件绑定相关推荐
- 【Vue】—数据的双向绑定v-model
[Vue]-数据的双向绑定v-model
- vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', .... dataList:[] }, ...
- vue.js的一些事件绑定和表单数据双向绑定
知识点: v-on:相当于: 例如:v-on:click==@click ,menthods事件绑定 v-on修饰符可以指定键盘事件v-model进行表单数据的双向绑定 <template> ...
- vue.js中的事件绑定-01笔记
之前发生了一个错误,事件绑定一直不成功,就是下面的错误代码 <div id="app">当前计数:{{count}}<button v-if="0&qu ...
- VUE(template标签 事件绑定与监听)
一.template标签 Vue.js提供了template标签,可以将指令作用到这个标签上,对其子元素进行渲染,但最后渲染的结果里不会有它. 二.事件绑定与监听 1.方法与内联语句处理器 1)Vue ...
- Vue之数据的双向绑定
在vue中实现数据双向绑定的核心在于v-model 示例: <input type="text" name=" " v-model="userN ...
- Vue事件绑定(非常详细哦~)
下面是对Vue中事件绑定的整理,希望可以帮助到有需要的小伙伴~ 事件绑定 vue如何处理事件 v-on指令用法 <input type= 'button"v-on:click=&quo ...
- vuejs学习笔记(1)--属性,事件绑定,ajax
本文转自:http://www.cnblogs.com/shuai5288/archive/2017/04/05/6670923.html 属性 v-for 类似于angular中的 ng-repea ...
- 【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
文章目录 一.本地存储 1.概念 2.接口 3.实际操作 二.自定义事件绑定 1.自定义事件使用过程 2.绑定自定义事件的语法 3.其他注意事项 三.全局事件总线 1.全局事件总线概念 2.全局事件总 ...
最新文章
- 北大电池新研究登上Nature:3万次循环测试,性能衰减不到30%,大幅提高锂空电池性能...
- 《编程之美》读书笔记08:2.9 Fibonacci序列
- SQL SERVER 2012启动失败 because upgrade step 'SSIS_hotfix_install.sql' 失败
- 2.3 C#中的数组
- 运行在Spark大数据上的应用体系架构
- springboot+jsp中文乱码_【spring 国际化】springMVC、springboot国际化处理详解
- 微信小程序下拉刷新列表onPullDownRefresh;微信小程序上划加载列表onReachBottom;uni-app微信小程序下拉加载数据;uni-app微信小程序上划页面加载数据
- Python3 基础学习笔记 C04【if 语句】
- (pytorch-深度学习)循环神经网络
- pythonselenium一个简单的自动化测试实战:百度搜索
- STM8 ADC转换模式-------单次模式
- Ural 1297 Palindrome(后缀数组+最长回文子串)
- SVD在推荐系统中的应用
- mxonline实战14,全局搜索,修改个人中心页面个人资料信息
- 【元胞自动机】基于matlab元胞自动机短消息网络病毒传播仿真【含Matlab源码 1289期】
- kernal tch 下载 天正_【T20天正插件下载】T20天正插件最新版 v5.0 官方版-开心电玩...
- 【老生谈算法】matlab实现FFT算法源码——FFT算法
- 十大算法之迪杰斯特拉算法
- Chrome的插件安装与使用
- 乘着爱的翅膀—《爱的教育》读后感—吕中琪
热门文章
- 深蓝视觉SLAM课程第四讲--相机模型,非线性优化(G2O)
- 2019年春运首日 上海三大火车站预计发送旅客35.9万人次
- chrome浏览器安装插件显示程序包无效
- 老人智能手表方案/案列/APP/小程序/网站
- 红米note10和红米k40的区别 哪个好
- BUUCTF-千层套路(python脚本)
- 【matplotlib】21.多图合并【python3、numpy、pandas、matplotlib完结】
- ImportError: /home/yang/anaconda3/envs/sar/bin/../lib/libgio-2.0.so.0: undefined symbol: g_unix_get_
- 今日头条启动很快,你觉得可能是做了哪些优化?
- labview 控件变透明