Vue框架之双向绑定事件

首先介绍下Vue框架的语法

vue通过 {{temp}} 来渲染变量

{{count+100}}  # 求和
v-text  # 为标签插入text文本 v-html  # 为标签插入html v-show   # 根据布尔值判断,显示与隐藏, v-if   # if判断语句,根据真假值来显示对应的内容 v-else  # 与v-if连用 v-for   # for循环,如果对象是列表的话,可以显示其索引,字典默认显示value值 v-model #这是一个双向绑定事件(白话:就是我这边输入,就可以直接获取到值,数据修改值后我页面可以立即变更,中间省去很多的查找标签的内容)
注意事项:在Vue中的this代表的是window,在前端定义的变量以及函数都是定义在window中。

Vue框架双向绑定实例(input输入页面实时显示)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="myapp"> 首先要先定义一个div标签也就是说要对操作的标签设置一个父标签
<input type="text" v-model="message"> 绑定一个双向事件
<p>{{ message }}</p> 这个是和绑定的双向事件同名
</div>
<script>
new Vue({ 通过new定义一个Vue的方法
el:'#myapp', 使用el 找到设置的标签,这个方法只支持id属性
data:{ data 是一个json数据
message:'' 找到定义的变量然后设置成一个空字符串,这个要和绑定的那个名称一样
}
})
</script>
</body>
</html>

Vue框架双向绑定实例(下拉选择内容然后点击绑定的button按钮页面显示选择的内容)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script src="vue.js"></script>
</head>
<body>
<div id="int">
<input type="text" v-model="message">
<!--v-model是实现双向绑定-->
<p>{{message}}</p>
<input type="button" value="clicke me" v-on:click="butText" >
<select v-model="sel">
<option value="111">111</option>
<option value="222">2222</option>
<option value="333">3333</option>
<option value="444">4444</option>
</select> </div>
<script>
var na = new Vue({
el:'#int',
data:{
message:'',
sel:'111'
},
methods:{
butText:function () {
alert(this.sel)
}
}
}); </script>
</body>
</html>

Vue框架之双向绑定事件的更多相关文章

  1. Backbone.Events—纯净MVC框架的双向绑定基石

    Backbone.Events-纯净MVC框架的双向绑定基石 为什么Backbone是纯净MVC? 在这个大前端时代,各路MV*框架如雨后春笋搬涌现出来,在infoQ上有一篇 12种JavaScrip ...

  2. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  3. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  4. Vue 框架-05-动态绑定 css 样式

    Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 cl ...

  5. 组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双向绑定数据

    组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...

  6. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  7. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  8. vue 单向数据流 & 双向绑定

    在react中是单向数据绑定,而在vue中的特色是双向数据绑定.但是其实就我个人的理解是: 其实无论是vue还是react其实还是提倡单向数据流去管理状态,这一点在vuex和redux状态管理器上体现 ...

  9. 剖析Vue原理&实现双向绑定MVVM-1

    本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考 ...

随机推荐

  1. Keeweb-Linux的密码管理器

    Keeweb-Linux的密码管理器 如今,我们依赖于越来越多的线上服务.我们每注册一个线上服务,就要设置一个密码:如此,我们就不得不记住数以百计的密码.这样对于每个人来说,都很容易忘记密码.那么,下 ...

  2. Dubbo学习1-Hello world

    前言 互联网技术到今天已经非常成熟和稳定了,其中为了解决高并发.大规模的服务请求,出现了微服务.RPC这样的分布式架构.今天就从头开始学习RPC框架dubbo. 为什么要学Dubbo 关于分布式的解决 ...

  3. ELK学习笔记(五)简单搜索和DSL查询

    检索文档 现在我们有一些数据存储在Elasticsearch中,我们可以开始处理这个应用程序的业务需求. 这在Elasticsearch中很容易.我们只需执行HTTP GET请求并指定文档的地址--索 ...

  4. 小程序实现非swiper组件的自定义伪3D轮播图

    效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...

  5. windows2003NLB群集配置(工作组和域)

    详情地址查看:http://wenku.baidu.com/link?url=kiyyeZcSXZV9vLIZFbAlQXq1Qsm3_N0A7cue-qz6CorUYbXaGn-Ocfo49Qyal ...

  6. java性能调优---------------------JVM调优方案

    JVM的调优的主要过程有: 1.确定堆内存大小(-Xmx.-Xms) 2.合理分配新生代和老年代(-XX:NewRatio.-Xmn.-XX:SurvivorRatio) 3.确定永久区大小(-XX: ...

  7. python全栈开发-Day9 函数对象、函数嵌套、名称空间与作用域

    一 .函数对象 一 .函数是第一类对象,即函数可以当作数据传递 可以被引用 可以当作参数传递 返回值可以是函数 可以当作容器类型的元素 二. 利用该特性,优雅的取代多分支的if def foo(): ...

  8. oracle维护数据的完整性

    介绍: 数据的完整性用于确保数据库数据遵从一定的商业的逻辑规则.在oracle中,数据完整性可以使用约束.触发器.应用程序(过程.函数)三种方法来实现,在这三种方法中,因为约束易于维护,并且具有最好的 ...

  9. php缩放gif和png图透明背景变成黑色的解决方法_php技巧

    工作中需要缩放一些gif图然后在去Imagecopymerge,可是发现使用了imagecreatetruecolor和imagecopyresampled后发现背景图不对,本来透明的背景图变成了黑色 ...

  10. C语言程序设计基础-第1周作业-初步

    1.安装带有计算机术语的翻译软件 2.在自己电脑上安装C编译器,windows系统建议安装dev-c++,其他系统自行查找. 3.加入课程小组,有任何疑问可以在小组中提问:https://group. ...