我是参考https://www.cnblogs.com/kidney/p/6052935.html 这位大神的

最开始接触vue的时候,是他的input框输入的文字和旁边的span展示的文字同步,当时非常惊讶。在没有接触vue的时候,我的脑补了一下实现方案。那就是jquer的keyup监控input的输入事件,在事件中及时把值付给span的text(),感觉好像也不是很难。但是Vue腻害的地方就是在于他只需要声明好变量什么 v-model v-text什么的,这些数据就自动绑定了,不需要我们去些那些写过无数遍的1+1=2的代码。

  今天废话比较多,放心干货少不了的。为了学习Vue这做乘法的JS,没错我就是说原生JS和jquery都是加法JS,但是必不可少。因为乘法能做的加法都能做,但是乘法更快。

  学了两年的编程,其实发现自己不像那些技术狂一般喜欢技术,在空闲的时间我更倾向去打游戏和看电影以及对爱情抱有幻想。虽然是靠技术吃饭的,现在我的每一餐饭,每一部看的电影,甚至每一天晚上睡觉的地方都是来自工资,都是来自我的技术。现在的状态还是倾向去看剧或者睡觉那些不需要动脑的事情。

  关于我自己就不再多说了,接下来讲讲我对vue的理解。

 vue的原理,其核心就是双向绑定,就是VMMV模型

监听事件:订阅发布者模式 observer(data)  发布者--》主题对象--》订阅者

编译HTML:数据劫持nodeToFragement()+访问器属性

联动: 编译HTML为每个节点绑定一个watche订阅者,data中每一个数据都是主题对象 ,每一个节点都是订阅者,发布者就是当有数据被改变时

Vue.js-Vue的初体验的更多相关文章

  1. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

  2. (vue.js)Vue element tab 每个tab用一个路由来管理?

    (vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词:   关于网友提出的“ (vue.js) ...

  3. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程

    缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...

  5. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  6. js随堂初体验(一)

    Js初体验(-) 1 js的基础知识 A web三大标准:1 html:结构标准    2 css:表现标准  3 javascript:行为标准 B js三种书写方式:1 行内js:onclick ...

  7. (vue.js)vue中引用了别的组件 ,如何使this指向Vue对象

    Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...

  8. requirejs实验002. r.js合并文件. 初体验.

    requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrbu ...

  9. Node.js后台开发初体验

    Node.js是什么 Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质时对Chrome V8引擎进行了封装 Node.js安装 ...

  10. Awesome Vue.js vue.js学习资源链接大全 中文

    https://blog.csdn.net/caijunfen/article/details/78216868

随机推荐

  1. SpringBoot全局异常处理与定制404页面

    一.错误处理原理分析 使用SpringBoot创建的web项目中,当我们请求的页面不存在(http状态码为404),或者器发生异常(http状态码一般为500)时,SpringBoot就会给我们返回错 ...

  2. Ansible Facts 变量详解

    Ansible Facts 变量详解与使用案例 主机规划 添加用户账号 说明: 1. 运维人员使用的登录账号: 2. 所有的业务都放在 /app/ 下「yun用户的家目录」,避免业务数据乱放: 3. ...

  3. 箭头函数的this指向问题-一看就懂

    OK,对于箭头函数的this 用一句话概括:箭头函数中的this指向的是定义时的this,而不是执行时的this. 如果上面这句话听的是懂非懂或者完全不懂的,没关系,下面会有案例讲解. 举个栗子 来看 ...

  4. typeahead自动补全插件的limit参数问题

    遇到的问题很诡异: 后台返回的数据都正确就是显示不正常(有时多有时少),后来发现是typeahead的问题,在1.11版本之后,limit参数从option选项里改到了setdata选项: limit ...

  5. phpcms 后台分页

    php 代码public function init() { $where='';//条件 $page = $_GET['page'] ? intval($_GET['page']) : '1'; $ ...

  6. SpringCloud入门(十一):Sleuth 与 Zipkin分布式链路跟踪

    现今业界分布式服务跟踪的理论基础主要来自于 Google 的一篇论文<Dapper, a Large-Scale Distributed Systems Tracing Infrastructu ...

  7. 【Linux常见命令】cd命令

    BASH_BUILTINS(1) cd命令用于切换当前工作目录至 dirName(目录参数). 其中 dirName 表示法可为绝对路径或相对路径.若目录名称省略,则变换至使用者的 home 目录 ( ...

  8. 几年前的今天,Google发了这几篇“大”新闻

    免责声明: 因阅读本文所导致的任何时间或经济上的损失,皆由您自行承担,本小编概不负责. 估计今天我的朋友圈会被"震惊!"刷屏,来看看 Google 做过哪些令人"震惊&q ...

  9. Micropython教程之TPYBoard开发板驱动舵机教程(萝卜学科编程教育)

    大家应该都看到过机器人的手臂啊腿脚啊什么的一抽一抽的在动弹吧...是不是和机械舞一样的有节奏,现在很多机器人模型里面的动力器件都是舵机. 但是大家一般见到的动力器件都是像步进电机,直流电机这一类的动力 ...

  10. Vs Code中炫酷写代码插件Power Mode的安装配置

    扩展栏搜索 Power Mode 安装 安装后重启vs code 文件->首选项->设置 搜索setting.json,点击在setting.json中编辑 打开之后在右侧用户设置里添加以 ...