事件

案例：

　　vue的事件绑定原理:改变图片的背景颜色问题来实现这个框架的使用方法，

　　new Vue({

　　　　el:"",

　　　　data:{},

　　　　methord:{},

　　　　computed:{}   计算属性的使用：用于大量基于数据模型的计算，但并不是每一次渲染都发生更改，计算属性就会将数据直接返回，这样提高计算效率。

　　　　mounthd:{}

})

我们在事件绑定的时候传入参数：比如点击事件，@click=“funname($event,index)”

vue数据的双向绑定

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <input type="text" name="" id="input" value="" />

        <h1></h1>

        <h3 id="username"></h3>

        <h4 id="age"></h4>

        <script type="text/javascript">

            var inputText = document.querySelector('#input')

            var h1 = document.querySelector('h1')

            var h3 = document.querySelector('#username')

            var age = document.querySelector('#age')

            inputText.oninput = function(){

                var value =  inputText.value

                h1.innerHTML = value;

            }

            var obj = {

//                name:'张三',

                age:,

                set name(value){

//                    console.log(value)

                    this._name = value

                    h3.innerHTML = this._name

                },

                get name(){

                    return this._name

                },

            }

            console.log(obj)

            //setter,getter//es6,es2015标准

            //在给对象属性赋值，或者是获取对象属性的时候，会调用setter、getter两个方法

        </script>

    </body>

</html>

vue事件双向绑定的更多相关文章

  1. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  2. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  3. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  4. 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  5. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  6. 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  7. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  8. 揭密 Vue 的双向绑定

    Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 剖析Vue原理& ...

  9. Vue && Angular 双向绑定检测不到对象属性的添加和删除

    由于ES5的限制 Vue  && Angular 双向绑定检测不到对象属性的添加和删除  还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...

随机推荐

  1. wpf 使用矢量字体 fontawesome

    第一步:首先下载矢量字体 :http://www.fontawesome.com.cn/ 第二步:在将fontawesome-webfont.ttf 文件引用到项目 设置fontawesome-web ...

  2. MySQL在Linux系统环境的安装和无主机登录配置

           将mysql 安装在单个Linux系统主机,并配置本地或远程(此处可仅单指局域状态下的环境)的无主机登录.谨记的是:操作完mysql 设置时,需以flush privileges进行权限 ...

  3. 读《深入理解Elasticsearch》点滴-查询分类

    1.如何分类,略.个人不接受书中的分类方法,建议采用官网上的分类方法 2.term查询,可以模拟No-SQL数据库

  4. MySQL 中间件汇总比较

    360 Atlas 较为活跃,Atlas 是由 360 Web平台部基础架构团队开发维护的一个基于 MySQL 协议的数据中间层项目.它是在mysql-proxy 0.8.2版本的基础上,对其进行了优 ...

  5. JPA 已作废的SQLQuery.class、setResultTransformer方法替换

    1.hibernate 5.2 之后,SQLQuery.class.setResultTransformer方法已作废,其用法如下: Query query = entityManager.creat ...

  6. OpenGl 导入读取多个3D模型 并且添加鼠标控制移动旋转

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11627508.html 前言: 因为接下来的项目需求是要读取多个3D模型,并且移动拼接,那么我 ...

  7. 3. Git与TortoiseGit基本操作

    1. GitHub操作 本节先简单介绍 git 的使用与操作, 然后再介绍 TortoiseGit 的使用与操作. 先看看SVN的操作吧, 最常见的是 检出(Check out ...), 更新 (U ...

  8. onethinkphp 添加钩子报错

    今天改了下程序再保存,出现错误:Namespace declaration statement has to be the very first statement in the script 度娘一 ...

  9. Java基础学习笔记(四) - 认识final关键字、权限修饰符和内部类

    一.final关键字 为什么要使用 final 关键字? 通过继承我们知道,子类可以重写父类的成员变量和方法.final 关键字可以用于修饰父类,父类成员变量和方法,使其内容不可以被更改. 1.被修饰 ...

  10. js对数组、对象的深拷贝、复制

    基本类型的数据是存放在栈内存中的,而引用类型的数据是存放在堆内存中的 基本类型:Number Boolean undefined String Null 引用类型:Object Function js ...