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设计模式（四）Builder建造者模式

    一.场景描述 建造者模式同工厂模式.抽象工厂模式一样,用于创建继承类对象. 工厂模式:http://www.cnblogs.com/mahongbiao/p/8618970.html 抽象工厂模式:h ...

  2. poj 2681 字符串

    http://poj.org/problem?id=2681 给你任意长度的字符串,找出两串字符中不相同的字符个数(总数) #include<string> #include<cst ...

  3. [luogu1168]中位数_优先队列

    中位数 题目大意:输出读入的前2*k+1个数的中位数.一共有n个数,按照读入顺序. 注释:$1\le n \le 10^9$. 想法:这是优先队列的一个应用qwq.我们弄两个堆.小根堆和大根堆,保证: ...

  4. 定位bug的姿势对吗？

    举个例子来说明 WEB页面上数据显示错误,本来应该显示38,  结果显示35,这个时候你怎么去定位这个问题出在哪里? 1.通过fiddler抓包工具(或者其他抓包工具), 分析接口返回的数据是35还是 ...

  5. java 中的IO

    什么是文件文件可认为是相关记录或放在一起的数据集合 通过流来读写文件流是指一连串流动的字符,是以先进先出方式发送信息的通道输入输出流是相对计算机的内存来说的 字节流是八位通用字节流,字符流是16位Un ...

  6. （译文）掌握JavaScript基础--理解this关键字的新思路

    普通函数 下面这种就是普通函数 function add(x, y) { return x + y; } 每个普通函数被调用的时候,都相当于有一个this参数传进来. 内部函数this不会是外部函数传 ...

  7. eoLinker API-Shop 抓住区块链机遇，从这些API开始

    区块链是分布式存储.点对点传输.共识机制.加密算法等计算机技术的新型应用模式.所谓共识机制是区块链系统中实现不同节点之间建立信任.获取权益的数学算法. 区块链目前分为三类: 公有区块链(PublicB ...

  8. C语言博客作业—字符数组

    一.PTA实验作业 题目1:字符串转换成十进制整数 1. 本题PTA提交列表 2. 设计思路 (1)定义i为循环变量,number用于存放每一次转化的结果,flag用于判断是否为负数,p用于修改结果的 ...

  9. 201621123054 《Java程序设计》第六周实验总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 1.2 可选:使用常规方法总结其他上课内容. 2 ...

  10. iOS开发-OC中TabView的编辑

    UITableView编辑 1> UITableView 编辑流程 2> UITableView 编辑步骤(四步) ① 第一步 : 让 TableView 处于编辑状态(在按钮点击事件方法 ...