码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 双向数据绑定、事件介绍以及ref获取dom节点

时间:2018-06-02 11:33:57      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:methods   v-on   定义   this   谷歌   网页   -o   input   谷歌浏览器   

vue是一个MVVM的框架  

M  model

V  view

MVVM  model改变会影响视图view,view改变会影响model

双向数据绑定必须在表单里面使用

//我发现在谷歌浏览器翻译后的网页中vue的双向数据绑定不好用,暂时还没有解决方法

<h2>{{msg}}</h2>

<input type="text"  v-model="msg"/>

在视图层中input框改变时会引起model中msg的变化,从而影响h2中所绑定的msg

定义方法、执行方法

v-on:click="方法"绑定事件或者简写成@click,方法在methods:{里面放方法} 中定义  //methods与data平级用,隔开

也可以通过点击事件去改变model影响view

ref dom节点

<input type="text" ref="userinof" />

<buttom v-on:click="getInputValue()">获取dom节点中的数据</buttom>

getInputValue(){

alert(this.$refs.userinof.value);//获取dom节点

}

获取dom节点通过原生操作dom节点

 

methods

Vue 双向数据绑定、事件介绍以及ref获取dom节点

标签:methods   v-on   定义   this   谷歌   网页   -o   input   谷歌浏览器   

原文地址:https://www.cnblogs.com/1711643472qq/p/9124507.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!