vue的理解
vue提供的MVVM框架模式的数据双向绑定,实现了HTML和js的代码分离,提高代码的维护性
vue.js的核心思想包括:数据驱动和组件化思想。
如果没有中间的ViewModel则关系图编程下面所示:通过Ajax通信获得后台数据,那么要将获得数据显示在DOM上,则需要手动操作DOM节点。这是一个繁琐的过程,还很容易出错。
而使用vue.js后则省去手动操作DOM 。在vue.js里面只需要改变数据,Vue.js通过Directives指令去对DOM做封装,当数据发生变化,会通知指令去修改对应的DOM,数据驱动DOM的变化,DOM是数据的一种功能自然的映射。vue.js还会对操作做一些监听(DOM Listener),当我们修改视图的时候,vue.js监听到这些变化,从而改变数据。这样就形成了数据的双向绑定。
实现数据双向绑定的方法:
数据劫持结合发布者-订阅者模式(vue.js)【vue data是如何实现的??】
vue.js采用数据劫持结合发布者-订阅者的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时,发布消息给订阅者,触发相应的监听回调。
具体的来讲,Vue.js通过Directives指令去对DOM做封装,当数据发生变化,会通知指令去修改对应的DOM,数据驱动DOM的变化。vue.js还会对操作做一些监听(DOM Listener),当我们修改视图的时候,vue.js监听到这些变化,从而改变数据。这样就形成了数据的双向绑定。
vue组件的功能
1)能够把页面抽象成多个相对独立的模块
2)实现代码重用,提高开发效率和代码质量,使得代码易于维护





$set和$delete是对对象来进行更改的
添加和删除:

更改:

指令就是用来操作dom的
组件:相当于封装代码的,具有复用性
组件创建的;两种方式:这个是外部创建组件

创建组件并且引用组件:

局部注册组件:

组件他是一个独立的模块:

引用了组件模块:

脚手架:相当于一个项目搭建了一个环境
打包工具

vue的文件是要经过解析的,vue-loader是基于webpack的

main.js里面的

vue的理解的更多相关文章
- 关于Vue的理解以及与React框架的对比
1.Vue的理解 概念: Vue是一套用于构建用户界面的渐进式框架: Vue的核心库只关注视图层: 是一个数据驱动的MVVM框架: 特性: 确实轻量:体积比较小: 数据绑定简单.方便: 有一些简单的内 ...
- vue之理解异步更新 --- nextTick
默认情况下,vue中DOM的更新是异步执行的,理解这一点非常重要. 当侦测到数据变化时,Vue会打开一个队列,然后把在同一个事件循环(event loop)当中观察到的数据变化的watcher推送进入 ...
- Vue nextTick 理解
官网解释: 将回调延迟到下次 DOM 更新循环之后执行.在修改数据之后立即使用它,然后等待 DOM 更新.它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例 ...
- Vue系列---理解Vue.nextTick使用及源码分析(五)
_ 阅读目录 一. 什么是Vue.nextTick()? 二. Vue.nextTick()方法的应用场景有哪些? 2.1 更改数据后,进行节点DOM操作. 2.2 在created生命周期中进行DO ...
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- vue动画理解,进入、离开、列表过度和路由切换。
vue的动画对于很多初学者,甚至对很多老鸟来说也是很费劲,不容易控制的. 这篇文章讲vue动画的理解.其实没那么难. 动画理解 一个元素从A状态变成B状态,如果这个过程通过某种方式反应在视图上了,那么 ...
- vue插槽理解
1.插槽作用:父向子传递一段Html代码块 2.分类: (1)默认插槽:规则:父给子传,用父,不传,用子. (2)具名插槽:适用于一个页面有多个插槽时,需要做区分,使用name属性.给插槽取个名字 ( ...
- Vue的理解:Vue.js新手入门指南----转
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
- Vue.js——理解与创建使用
Vue.js 概念:是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API,作者是尤雨溪是中国人. 优点: 1)易用 已经会了HTML,CSS,JavaScript?即刻阅读指南开始构 ...
随机推荐
- redis客户端windows版中文乱码解决方案
1.在cmd窗口,在redis-cli.exe 后加上--raw 2.修改cmd窗口编码 http://jingyan.baidu.com/article/e75aca85440f01142edac6 ...
- RabbitMQ 设置消息的优先级
在RabbitMQ中,可以设置消息的优先级,也就相当于在队列中置顶某条消息,让某个消息优先得到处理的功能. 既然是设置消息的优先级,那么就是针对生产者,也就是消息发布端. 设置消息的优先级一共有2个步 ...
- 输入三个double型的数据,放入到a,b,c三个变量中去,使用条件结构与交换逻辑将这三个变量中的值从小到大排列。
import java.util.Scanner; public class C8{ public static void main(String []args){ /* 8.输入三个double型的 ...
- 玩转X-CTR100 l STM32F4 l DAC数字模拟转换
我造轮子,你造车,创客一起造起来!塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ] 本文介绍X-CTR100控制器 DAC接口 ...
- linux一些命令的介绍
http://www.runoob.com/linux/linux-command-manual.html 寻找文档操作命令wc -l时,发现一个好的介绍linux操作命令的网站.
- SharePoint Framework 企业向导(十)
博客地址:http://blog.csdn.net/FoxDave 接上一讲 SharePoint Framework部署范围 对于SharePoint Framework解决方案,只有一个部署范围: ...
- 运行时常量池中的符号引用/String.intern() /ldc指令
运行时常量池,之前放在方法区(永久代)中,1.8之后被转移到元空间,放到了native memory中. 具体的数据结构是:(看对象的内存布局,句柄访问还是对象头中保存指向类的元数据的指针,这里以对象 ...
- nginx防DOS攻击
将 timeout 设低来防止 DOS 攻击 client_body_timeout 10; client_header_timeout 10; keepalive_timeout 5 5; send ...
- linux 断网 扫描基本命令
kali使用arpspoof命令进行ARP欺骗. 做法是获取目标主机IP镜像流量,再进行ARP欺骗. 此次测试实在局域网中进行,使用kali虚拟机和Windows10物理机测试. 最终效果是利用kal ...
- python--Selenium-模拟浏览器
python--Selenium-模拟浏览器基本使用from selenium import webdriverfrom selenium.webdriver.common.by import Byf ...