Vue框架之双向绑定事件
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框架之双向绑定事件的更多相关文章
- Backbone.Events—纯净MVC框架的双向绑定基石
Backbone.Events-纯净MVC框架的双向绑定基石 为什么Backbone是纯净MVC? 在这个大前端时代,各路MV*框架如雨后春笋搬涌现出来,在infoQ上有一篇 12种JavaScrip ...
- 用ES6的class模仿Vue写一个双向绑定
原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...
- Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
- Vue 框架-05-动态绑定 css 样式
Vue 框架-05-动态绑定 css 样式 今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 cl ...
- 组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双向绑定数据
组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...
- 原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- vue 单向数据流 & 双向绑定
在react中是单向数据绑定,而在vue中的特色是双向数据绑定.但是其实就我个人的理解是: 其实无论是vue还是react其实还是提倡单向数据流去管理状态,这一点在vuex和redux状态管理器上体现 ...
- 剖析Vue原理&实现双向绑定MVVM-1
本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考 ...
随机推荐
- tcpdump抓包工具的使用
个人原创,转载请注明,否则依法追究法律责任 2018-02-28 16:01:26 tcpdump 倾倒网络传输数据,直接启动tcpdump将监视第一个网络接口上所有流过的数据包. 1 不接任何参数 ...
- 使用git指令下载github仓库代码(笔记)
通过Git指令下载源码 Git概念说明 三种状态:修改状态.暂存状态和Git仓库 基本的Git工作流程: 在工作目录中修改文件 暂存文件,将文件的快照放入暂存区域 提交更新,找到暂 ...
- sublime COMMAND + B 调用 python3 运行
用sublime写了python3的代码,COMMAND + B运行调用 PYTHON3 我们先来新建一个sublime build system 然后自动打开了一个文本,清空并写入以下内容: { & ...
- [POJ1631] nlogn求LIS
用到了algorithm自带的lower_bound函数进行二分查找 #include<cstdio> #include<cstring> #include<algori ...
- 用golang 实现一个代理池
背景 写爬虫的时候总会遇到爬取速度过快而被封IP的情况,这个时候就需要使用代理了.在https://github.com/henson/ProxyPool 的启发下,决定自己实现一个代理池.项目已经开 ...
- Node的前端化工具
1.页面实时更新 browser-sync start --server --files "css/*.css, *.html,js/*.js"
- poj-2909-哥德巴赫猜想
Description For any even number n greater than or equal to 4, there exists at least one pair of prim ...
- The Beginning of the Graph Theory
The Beginning of the Graph Theory 是的,这不是一道题.最近数论刷的实在是太多了,我要开始我的图论与树的假期生活了. 祝愿我吧??!ShuraK...... poj18 ...
- centos7上安装ffmpeg
FFmpeg介绍 FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依据你选择的组件).它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进的音 ...
- <经验杂谈>C#使用AES加密解密的简单介绍
AES 算法是基于置换和代替的.置换是数据的重新排列,而代替是用一个单元数据替换另一个.AES 使用了几种不同的技术来实现置换和替换. 以下是我自己用c#研究出来算法Code: /// <sum ...