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. 常见的if语句shell脚本

    常见的if语句shell脚本 author :headsen  chen  2017-10-17  15:00:07 1,cat if.sh 2, cat  if2.sh

  2. 分享python分析wave, pcm音频文件

    最近研究的,我用的是python3.3, 用matplotlib画图, 下面代码演示分析pcm文件,如果是wave文件,把wave的文件头去掉就是pcm文件了. 代码如下 # -*- coding:u ...

  3. Junit test使用

    1.导入maven依赖 <dependency> <groupId>junit</groupId> <artifactId>junit</arti ...

  4. java安全框架shiro(一)

    第一个简单的案例 ,通过读取.ini文件的方式模拟登陆, 1.通过Factory工厂的getInstance()方法来获取SecurityManager的实例,实例化Factory需要一个ini文件的 ...

  5. Docker 网络管理及容器跨主机通信

    1.网络模式 docker支持四种网络模式,使用--net选项指定: host,--net=host,如果指定此模式,容器将不会获得一个独立的network namespace,而是和宿主机共用一个. ...

  6. 【网络】 应用&传输层笔记

    应用层 应用层常用的协议和各自对应的TCP/UDP端口: DNS TCP/UDP 53 HTTP TCP 80 SMTP TCP 25 POP UDP 110 Telnet TCP 23 DHCP U ...

  7. OC和JS交互的三种方法

    看简书上说一共有六种OC和JS交互的方法,但是前三种原理都一致,都是通过检测.拦截Url地址实现互相调用的.剩下的react native等第三方框架原理不一样,也没有去研究,下边记录我使用的三种方法 ...

  8. Go实现海量日志收集系统(二)

    一篇文章主要是关于整体架构以及用到的软件的一些介绍,这一篇文章是对各个软件的使用介绍,当然这里主要是关于架构中我们agent的实现用到的内容 关于zookeeper+kafka 我们需要先把两者启动, ...

  9. JAVA基础之字符串和面向对象

    * [String 类] * 1. String类位于java.lang包中,java.lang是java的语言包,使用时无须导包,自动导入. * * 2.拿到一个字符串对象: * ①字面量声明:St ...

  10. Java并发编程实战（chapter_2）（对象发布、不变性、设计线程安全类）

    一.发布与溢出 "发布(Publish)"一个对象的意思是指,使对象能够在当前作用于之外的代码中使用.这个"之外",尤为关键,各种出问题的地方,都是因为这个&q ...