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. Java基础知识回顾之二 ----- 修饰符和String

    前言 在上一篇中,回顾了Java的基本数据类型 ,这篇就来回顾下Java中的一些修饰符以及String. 修饰符介绍 Java修饰符主要分为两类: 访问修饰符 非访问修饰符 其中访问修饰符主要包括 p ...

  2. AngularJS - 常用方法汇总

    1. 数组元素的常用方法: http://www.cnblogs.com/diaosizhang/p/3729078.html 2. js的强大的splice方法  http://www.jb51.n ...

  3. JS时间处理由CST格式转成GMT格式时间

    问题描述:js接收java后台的时间数据时,时间格式的CST时间,而js默认的是GMT时间格式,js 需要对这个时间进行处理才能使用,具体处理方法如function dateToGMT(sDate){ ...

  4. oracle10g 基于linux6安装问题收集

    1.[oracle@rsyslogserver database]$ dbca -silent -responseFile /home/oracle/database/dbca.rsp No comm ...

  5. [poj3254]Corn Fields_状压dp

    Corn Fields poj3254 题目大意:给你一个n*m的地,每一块地可以种或不种,两块种过的地不能挨着,可以一块都不种,问所有的种地方案数. 注释:读入用0和1,1<=n,m<= ...

  6. PHP-CGI，FASTcgi,php-fpm,之间的关系？

    刚开始对这个问题我也挺纠结的,看了<HTTP权威指南>后,感觉清晰了不少.首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者.   ...

  7. [COGS 2583]南极科考旅行

    2583. 南极科考旅行 ★★   输入文件:BitonicTour.in   输出文件:BitonicTour.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] 小美要 ...

  8. Struts2学习笔记五 拦截器

    拦截器,在AOP中用于在某个方法或字段被访问之前,进行拦截,然后在之前或之后加入某些操作.拦截是AOP的一种实现策略. Struts2中,拦截器是动态拦截Action调用的对象.它提供了一种机制可以使 ...

  9. 2017-2018-1 Java演绎法 第二周 作业

    团队任务:讨论Android上的游戏软件 参考现代软件工程 第一章 [概论]练习与讨论: 软件有很多种,也有各种分类办法,本次团队任务是讨论选取Android上的一个游戏软件,考虑到每位组员接触的游戏 ...

  10. 【Alpha】咸鱼冲刺日记第一天-黄紫仪

    总汇链接 一,合照 emmmmm.自然是没有的. 二,项目燃尽图 emmmmm,事实上它还没有正式开始.所以依旧没有[突然觉得明天任务真重] 三,项目进展 emmmmm,我错了咸鱼了两天才突然反应过来 ...