您的位置：首页 > Web前端 > Vue.js

Vue 之 单向数据绑定实现双向数据绑定效果

2019-07-29 16:37 120 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/weixin_45408068/article/details/97652114
  • input 身上的事件（ focus 、 blur 、 change 、input）
  • 事件有几种绑定形式
      js中绑定
      var input = document.querySelector( ’ input ’ )
      input.oninput = function ( ) { }
      DOM2级事件 事件监听
    1. html结构中绑定
      function load ( ) { }
      vue中事件绑定形式选择2
  • 事件包含哪几个部分？
    事件源、 事件类型、 事件处理程序
  • vue中事件格式： （ 举例 ： ）
<div v-on:eventType = '事件处理程序'></div>

单向数据绑定实现双向数据绑定效果 案例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 指令 </title>
</head>
<body>
<div id="app">
<input type="text" :value="msg" v-on:input="change">
<!-- 简写 -->
<input type="text" :value="msg" @input="change">
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
new Vue({
el: '#app', //  挂载
data: {
msg: '真的很帅'
},
methods: {
//事件处理程序
change: function (e) {
this.msg = e.target.value
}
}
})
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航