虚拟dom和声明式渲染:

Vue的编译器在编译模板之后,会把这些模板编译成一个渲染函数 。而函数被调用的时候就会渲染并且返回一个 虚拟DOM的树 。
这个树非常轻量,它的职责就是描述当前界面所应处的状态。当我们 有了这个虚拟的树之后,再交给一个patch函数,负责把这些虚拟DOM真正施加到真实的DOM上 。
在这个过程中,Vue有自身的响应式系统来侦测在渲染过程中所依赖到的数据来源。在渲染过程中,侦测到的数据来源之后,之后就可以精确感知数据源的变动。
到时候就可以根据需要重新进行渲染。当重新进行渲染之后,会生成一个新的树,将新树与旧树进行对比,就可以最终得出应施加到真实DOM上的改动。

Vue是一个数据驱动页面的一个框架,基于MVVM模式,M指的是数据,V指得是视图,VM是视图模型,将数据绑定视图上。

这个框架着重于VM部分,它以DOM元素为模版,提供数据绑定的功能。一个web app可能会含有多个vue组件。Vuex是基于vue的web app框架。

核心思想都是一样,把UI结构映射到恰当的组件树 ↓↓↓↓↓↓↓↓↓↓↓↓↓

父子通讯:
在Vue中,父子组件之间的通信是通过 props 传递。
.vue文件??
Vue的组件引入构建工具之后有一个 单文件组件概念 ,如
在同一个Vue文件里,可以同时写 template, script 和 style,三个东西放在一个里面。
同时,Vue的单文件组件和 Web Components 有一个本质不同,它是基于构建工具实现。
这样的好处是有了一个构建的机会,可以对这些单文件组件做更多的分析处,在每一个语言块里可以单独使用不同的处理器

这三个东西是一个单向数据流,State 驱动 View 的渲染,而用户对 View 进行操作产生 Action,会使State产生变化,从而导致 View 重新渲染。

state--->view---->Action(再回到state去)

css引入时:scoped

优势:不同的页面即使相同的层级、相同的class或者id都不会互相影响。

2、css使用 style的动态样式表

使用vue的过程中,发现使用的不是平时开发用的 style后缀的文件,而是类似于less/sass 的动态样式。

优势:动态的样式表,层级更加精确、减少了几乎所有的层级冗余代码、可以设置样式变量这样会减少很多的样式不统一的错误,以及减少代码量等,这样大大加快了样式的开发速度。

vuc-cli

npm run dev

npm run dev:热重载,在项目脚手架搭建完成之后,运行这个命令行,会开启代码做了修改之后,一旦ctrl+s,或者焦点离开IDE,就会局部刷新页面。

但是美中不足的是,动态的数据发生变化后,页面DOM是没有刷新的,只有手动刷新页面DOM数据才会发生变化。当然,在vue已经提供了强大的方便的前提下,这点小瑕疵是我完全可以接受的。

严格模式

语法检查可要可不要(建议开启代码规范前期初学者可关闭)

作用域:

通过el定义一个Vue视图的容器元素,可以传递css选择器,id选择,类选择器,元素名称选择器等等

页面中有多个符合条件选择器,vue只会捕获第一个符合条件的选择器对应的元素选择器

data:数据绑定实现了将模型到视图模型的绑定

总结起来:(1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块化 (6) 组件化Vue

项目骨架:static静态文件 src下 static这个文件夹下的文件(夹)会按照原本的结构放在网站根目录下,这样按默认打包后,就不会图片路径错误而无法显示

vue2.0框架认识的更多相关文章

  1. Vue2.0框架搭建基础操作及目录说明

    一.概述 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组件和v ...

  2. Webpack+vue2.0如何注册全局组件 (01)

    Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...

  3. 后端Python3+Flask结合Socket.io配合前端Vue2.0实现简单全双工在线客服系统

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_158 在之前的一篇文章中:为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统,详 ...

  4. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探

    更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...

  5. vue 专题 vue2.0各大前端移动端ui框架组件展示

    Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...

  6. Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?(转)

    https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...

  7. vue2.0实践的一些细节

    最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...

  8. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

  9. 项目vue2.0仿外卖APP(四)

    组件拆分 先把项目搭建时生成的代码给清了吧 现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯, ...

随机推荐

  1. IOS开发UI篇--一个支持图文混排的ActionSheet

    一.简单介绍 UIActionSheet是IOS提供给我们开发人员的底部弹出菜单控件.一般用于菜单选择.操作确认.删除确认等功能.IOS官方提供的下面方式对UIActionView进行实例化: - ( ...

  2. Smart Home DIY 计划

    工作了这么长时间了,感觉自己眼下的工作内容非常不利于技术水平的提升,对此状况,我心里深感不踏实.因此,我决定利用下班时间.边学习边做,做一套真正可用的智能家居系统,首先部署到自己居住的房间. 对此智能 ...

  3. Android系统开发(4)——Autotools

    Autotools工具的构成 1.autoscan autoscan是用来扫描源码文件夹生成configure.san文件的,configure.san包括了系统配置的基本选项.里面都是一些宏定义,我 ...

  4. Go语言核心之美 3.2-slice切片

    Slice(切片)是长度可变的元素序列(与之相应,上一节中的数组是不可变的),每一个元素都有同样的类型.slice类型写作[]T.T是元素类型.slice和数组写法非常像,差别在于slice没有指定长 ...

  5. ssh 远程登陆指定port

    ssh 到指定port  ssh -p xx user@ip      xx 为 port号    user为username   ip为要登陆的ip

  6. shell 爬虫 从日志分析到数据采集与分析

    [root@VM_61_158_centos ~]# curl http://ip.chinaz.com/220.112.233.179 |grep -e Whwtdhalf.*span.*span. ...

  7. NTFS文件系统的单个文件最大到底有多大?

    于NTFS文件系统的单个文件最大到底有多大? 闲来无事突然想到这个问题,到网上搜索了一下也没有一个固定的解释. 于是到微软官方知识库去寻找答案: 注意:基础硬件限制可能会对任何文件系统施加额外的分区大 ...

  8. 今天要查一下,如果没有密保手机的号码在使用,怎么更换qq的密保手机

    本来我是想是使用284来作为foxmail的一个记事本账号,但是需要验证130的手机,这是以前使用的手机,现在不能接受该短信了,得反馈下.

  9. 4.8 Using Ambiguous Grammars

    4.8 Using Ambiguous Grammars It is a fact that every ambiguous grammar fails to be LR and thus is no ...

  10. mysql/sql server和java之间的数据类型对应关系

    Mysql************************************当前列 ClassName ColumnType DisplaySize TypeName0: java.lang.I ...