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. python中的lambda函数用法

    例1:传入多个参数的lambda函数def sum(x,y): return x+y用lambda来实现:p = lambda x,y:x+yprint(4,6) 例2:传入一个参数的lambda函数 ...

  2. 理解C语言中几个常见修饰符

    写在前面 今天下午一个同事问「register」关键字是什么作用?噢,你说的是「register」啊,它的作用是……脑袋突然断片儿,我擦,啥意思来着,这么熟悉的陌生感.做C语言开发时间也不短了,不过好 ...

  3. git 菜鸟入门

    1. 推荐的 git 仓库(注册帐号并登录): https://github.com/ https://git.oschina.net/2. 创建仓库       里面的地址为 git 仓库的地址 , ...

  4. 详解Tomcat线程池原理及参数释义

    omcat线程池有如下参数: maxThreads, 最大线程数,tomcat能创建来处理请求的最大线程数 maxSpareTHreads, 最大空闲线程数,在最大空闲时间内活跃过,但现在处于空闲,若 ...

  5. salesforce lightning零基础学习(一) lightning简单介绍以及org开启lightning

    lightning对于开发salesforce人员来说并不陌生,即使没有做过lightning开发,这个名字肯定也是耳熟能详.原来的博客基本都是基于classic基于配置以及开发,后期博客会以ligh ...

  6. bashell基础

    身为一个iOS程序员,虽然iOS相关技术十分重要,但是bash也是不可不了解的,因为技能的成长,除了深度,还需要广度.下面就来介绍下bash. Shell是C语言编写的,所以他是解释性语言,运行在Li ...

  7. 删除日志释放空间最好不要用rm

    目前在维护一些服务器有一个根目录空间经常告警no space left ,切到/var/log 目录下du -sh * 的时候,发现有一个authlog占了12G,然后立马执行了rm authlog: ...

  8. 解决Hash碰撞冲突方法总结

    Hash碰撞冲突 我们知道,对象Hash的前提是实现equals()和hashCode()两个方法,那么HashCode()的作用就是保证对象返回唯一hash值,但当两个对象计算值一样时,这就发生了碰 ...

  9. JavaScript(第十天)【Function类型】

    在ECMAScript中,Function(函数)类型实际上是对象.每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法.由于函数是对象,因此函数名实际上也是一个指向函数对象 ...

  10. 听翁恺老师mooc笔记（7）--字符串1

    C语言中字符串的定义 如果定义一个字符数组word,并使用大括号对其初始化,如下图所示: 但是这个不是C语言的字符串,只是字符数组,不是字符串,因为不能使用字符串的方式进行计算.那么C语言的字符串长什 ...