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 单向数据流 &amp; 双向绑定

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

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

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

随机推荐

  1. 【Java EE 学习 32 上】【JQuery】【选择器】

    一.JQuery简介 1.JQuery是JavaScript库,封装了很多预定义对象和实用函数. 2.JQury的优势: (1)简洁,其宗旨就是写更少的代码做更多的事. (2)文档声明非常全面:htt ...

  2. EasyUI中Base(基础)的基本用法

    EasyUI中Base(基础)的用法 一.Base(基础) 1.parser 解析器 2.easyloader 简单加载 3.draggable 拖动 4.droppable 放置 5.resizab ...

  3. C语言结构体占用空间内存大小解析

    结构体的数据类型的有点我们就不啰嗦了,直接来看相同数据结构体的几种书写的格式吧. 格式一: 01.struct tagPhone 02.{ 03.     char   A; 04.     int  ...

  4. 搭建nexus私服(maven)

    这里提供nexus的直接下载页面的链接: https://www.sonatype.com/download-oss-sonatype maven获取依赖jar包是从中央仓库获取,但很莫名的出现jar ...

  5. linux视频之media媒体框架

    linux视频媒体(kernel层分析)主要包括三个文件: (/drivers/media/media-device.c ,  /drivers/media/media-devnode.c , /dr ...

  6. python爬虫(1)——urllib包

    人生苦短,我用python! 一.关于爬虫 鉴于我的windos环境使用命令行感觉非常不便,也懒得折腾虚拟机,于是我选择了一个折中的办法--Cmder.它的下载地址是:cmder.net Cmder是 ...

  7. Sqlautocode使用过程的一些坑

    Sqlautocode是SQLAlchemy一个数据库映射工具,可以将数据库文件映射为python代码,直接在程序中移植使用.最近在使用过程中遇到了一些坑,通过用代码编辑工具pycharm阅读源码和多 ...

  8. session和token

    功能是一样的,都是要与浏览器建立连接,获取与客户端对应的用户数据,只不过完成这个功能的实现方式不太一样. 本质上的区别: session的使用方式是客户端cookie里存id,服务端session存用 ...

  9. python 库安装方法及常用库

    python 库安装方法及常用库 python库安装方法: 方法一:setpu.py 1.下载库压缩包,解压,记录下路径:*:/**/……/ 2.运行cmd,切换到*:/**/……/目录下 3.运行s ...

  10. 3分钟读懂移动端rem使用方法

    1.为什么要用rem 博客很久没写了,原因很简单. 最近接手了一个项目,要同时做PC和移动端的页面,之前没接触过,但毕竟给钱的是大爷,所以还是硬着头皮上了. 移动端最麻烦的是什么? 不同分辨率适配! ...