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. 浅析C#之委托、Action、Func

    一.委托 1.1 委托的定义 delegate(委托)是一种可用于封装命名方法或匿名方法的引用类型, 委托类似于 C++ 中的函数指针: .Net通过委托来提供回调函数机制. 声明一个委托类型 int ...

  2. NEO从入门到开窗(1) - 一个智能合约的诞生

    一.啰嗦两句 最近一直都在研究区块链,BitCoin,Etherenum, Hyper Ledger Fabric还有今天的主角小蚂蚁,当然出名以后改了一个艺名叫NEO.区块链大部分都是用Golang ...

  3. java函数回调

    Class A实现接口CallBack callback--背景1 class A中包含一个class B的引用b --背景2 class B有一个参数为callback的方法f(CallBack c ...

  4. [SCOI2010] 连续攻击问题

    题目 Description lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一 ...

  5. linux性能调试之iostat

    iostat用来监控调试linux系统的IO性能. 一般用法: iostat -xdct time_interval count [disk] -x:显示扩展统计项,如果不使用-x参数只会打印基本统计 ...

  6. poj-1131-（大数）八进制转化成十进制

    Description Fractions in octal (base 8) notation can be expressed exactly in decimal notation. For e ...

  7. IT连创业系列：产品设计之答题模块

    前言: 距上篇写完:IT连创业系列:新的一年,先淫文一篇! 转眼又两个星期了,今天不写文,估计大伙又得等两周了. 所以啊~~ 只能再努力一点了,花一天半天的,继续和大伙分享这让人心碎的创业历程. 这两 ...

  8. ArcEngine 10.2 汉化问题

    开发环境:VS2010 + ArcEngine 10.2 + DEV 15.2 arcengine自带工具条提示汉化方法: 1:重写tool里的方法 2:利用工具箱里的ToopTip 3:把:ArcG ...

  9. 浅谈 JSON.stringify 方法

    一.前言 最近项目中,遇到需要将对象转换成字符串进行传递,上次写过一篇文章关于json字符串转换成json对象,json对象转换成字符串,值转换成字符串,字符串转成值.当时主要是用在有时候处理字符串和 ...

  10. Matlab绘图基础——用print函数保存图片(Print figure or save to file)

    print(figure_handle,'formats','-rnumber','filename')  %将图形保存为png格式,分辨率为number的(默认为72),最好指定的分辨率大一点,否则 ...