一文速览Vue全栈
一文速览Vue全栈
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,专注于声明式渲染视图层,结合丰富的生态系统和核心插件,致力于简单灵活快速驱动SPA、MPA等大小型应用。
本文依次介绍 双向数据绑定、计算属性、组件、事件机制、插件机制、前端路由、状态管理和服务端渲染等。
1. Vue实例与数据绑定
实例
Vue.js应用的创建很简单,通过构造函数 Vue 就可以创建一个 Vue 的根实例,并启动 Vue;
var app = new Vue({
//选项
});
变量 app 就代表了这个 Vue 实例,事实上几乎所有的代码都是一个对象,用来写入 Vue 实例的选项内的。
首先,必不可少的一个选项就是el,el用于指定一个页面中己存在的DOM元素来挂载Vue 实例,它可以是 HTMLElement ,也可以是CSS选择器,比如:
<div id='app'></div>
var app =new Vue({
el: document.getElementByld('app') // 或者是'#app'
});
一个 Vue 应用由一个通过 new Vue() 创建的根Vue实例,以及可选的嵌套的、可复用的组件树组成。
数据绑定
当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
建议所有会用到的数据都预先在data内声明,这样不至于将数据散落在业务逻辑中,难以维护。
Vue实例本身也代理了 data对象里的所有属性,所以可以这样访问:
var app = new Vue({
el: '#app',
data: {
a: 2
}
});
console.log(app.a); // 2
除了显式地声明数据外,也可以指向一个己有的变量,并且它们之间默认建立了双向绑定,当修改其中任意一个时,另一个也会一起变化:
var myData = {
a: 1
};
var app =new Vue({
el: '#app',
data: myData
});
console.log(app.a) ; // 1
//修改属性,原数据也会随之修改
app.a = 2;
console.log(myData.a); // 2
//反之,修改原数据, Vue属性也会修改
myData.a = 3;
console.log(app.a); // 3
生命周期
每个 Vue 实例创建时,都会经历一系列的初始化过程,同时也会调用相应的生命周期钩子, 我们可以利用这些钩子,在合适的时机执行我们的业务逻辑。
Vue的生命周期大致分为四个阶段:
beforeCreate(此时date、method和el均没有初始化,可以在此加载loading)
created(此时date和method初始化完成,但是DOM节点并没有挂载,判断是否有el节点,如果有则编译template,如果没有则使用vm.
beforeMount(编译模板,并且将此时在el上挂载一个虚拟的DOM节点)
mounted(编译模板,且将真实的DOM节点挂载在el上)
beforeUpdate(在数据有更新时,进入此钩子函数,虚拟DOM被重新创建)
updated(数据更新完成时,进入此钩子函数)
beforeDestory(组件销毁前调用,此时将组件上的watchers、子组件和事件都移除掉)
destoryed(组件销毁后调用)
在创建时,父子组件的生命周期是:
父组件beforeCreated -> 父组件created -> 父组件beforeMounted -> 子组件beforeCreated -> 子组件created -> 子组件beforeMounted -> 子组件mounted -> 父组件mounted。
在销毁时,父子组件的生命周期是:
父组件beforeDestory -> 子组件beforeDestoryed -> 子组件destoryed -> 父组件destoryed
总之记住,父子组件的生命周期遵循:由外到内,再由内到外。
不要在选项属性或回调上使用箭头函数,vue会自动绑定this的上下文环境。
模版语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
使用双大括号(Mustache 语法)“{{}}”
是最基本的文本插值方法,它会自动将我们双向绑定的数据实时显示出来,
<span>Message: {{ msg }}</span>
如果想显示{{}}
标签,而不进行替换,使用v-pre即可跳过这个元素和它的子元素的编译过程,例如 :
<span v-pre>{{这里的内容是不会被编译的}}</span>
在{{}}
中,除了简单的绑定属性值外,还可以使用JavaScript表达式进行简单的运算、三元运算等,例如 :
<div id='app'>
{{ number / 10 ))
{{ isOK ? ’确定’ : ’取消’ }}
{{ text.split(’,’).reverse().join(’,’) }}
</div>
通过使用 v-once
指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:
<span v-once>这个将不会改变: {{ msg }}</span>
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染 (render)
函数,使用可选的 JSX
语法。
指令
指令(Directives) 是带有 v-
前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for是例外情况)。指令的职责是当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
常用的指令如下:
v-cloak
v-cloak不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除 ,
经常和css的 display: none配合使用:
<div id='app' v-cloak> {{ message }}</div>
<style>
[v-cloak] {
display: none;
}
</style>
当网速较慢 Vue.js 文件还没加载完时,在页面上会显示{ { message }}的字样,直到 Vue 创建实例、编译模板时, DOM 才会被替换,所以这个过程屏幕是有闪动的,只要加上v-cloak就可以避免了。在一般情况下, v-cloak 是一个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实用,但是在具有工程化的项目里,项目的HTML 结构只有一个空的 div元素,剩余的内容都是由路由去挂载不同组件完成的,所以不再需要 v-cloak;
v-once
v-once 也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容,例如:
<span v-once>{{ message }}</div>
v-once在业务中也很少使用,当你需要进一步优化性能时,可能会用到。
v-html
为了输出真正的 HTML,需要使用 v-html 指令;
var contenthtml = `<span>哈哈大笑
一文速览Vue全栈的更多相关文章
- 一文读懂NodeJS全栈开发利器:CabloyJS(万字长文)
目录 0 修订 0.1 修订说明 0.2 修订历史 1 基本概念 1.1 CabloyJS是什么 1.2 CabloyJS核心解决什么问题 1.3 CabloyJS的开发历程 2 数据版本与开发流程 ...
- Gin + Vue全栈开发实战(二)
尝试地写了第一篇自己学习Go Web框架的感受和入门的文章,发现反响还不错,大家也提出了很多的问题来一起交流.近期也渐渐地出现了很多有关go语言开发的相关文章,包括有在蚂蚁金服的大牛的分享,我也一直有 ...
- Gin + Vue全栈开发实战(一)
Gin入门 本章概要 Gin简介 开发第一个Gin程序 1.1 Gin简介 Gin是用Go语言编写的一个轻量级Web应用框架,现在在各个公司包括字节跳动.bilibili等大互联网公司都得到了广泛的应 ...
- Spring boot+Vue全栈开发---Spring Boot文件上传
https://blog.csdn.net/Day_and_Night_2017/article/details/86980743 文件上传涉及到两个组件:CommonsMultipartResolv ...
- 全栈工程师眼中的HTTP
HTTP,是Web工程师每天打交道最多的一个基本协议.很多工作流程.性能优化都围绕HTTP协议来进行,但是我们对HTTP的理解是否全面呢?如果前端工程师和后台工程师坐在一起玩捉鬼游戏,他们对HTTP的 ...
- NodeJS全栈开发利器:CabloyJS究竟是什么
CabloyJS CabloyJS是一款顶级NodeJS全栈业务开发框架, 基于KoaJS + EggJS + VueJS + Framework7 文档 官网 && 文档 演示 PC ...
- spring boot + vue + element-ui全栈开发入门——开篇
最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...
- 一个 Vue & Node 的全栈小项目
约学 - 可以寻找一起自习的小伙伴的Web APP 一个基于 Vue & Node 的移动端全栈小项目 在线演示(请使用移动端查看效果) 源码地址: https://github.com/G- ...
- 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)
写在前面 参考答案及资源在看云平台发布,如果大家想领取资源以及查看答案,可直接前去购买.一次购买永久可看,文档长期更新!有什么意见与建议欢迎您及时联系作者或留言回复! 文档描述 本文是关注微信小程序的 ...
随机推荐
- Python编程菜鸟成长记--A1--02--Python介绍
目录 1.重点知识 2.Python 语言介绍 2.1.Python 在主要领域的应用前景 2.2.Python 在机构.行业巨头公司的应用 3.Python 的发展史 4.Python 的发展前景如 ...
- 补习系列(22)-全面解读 Spring Profile 的用法
目录 一.简介 二. 区分Bean对象 三. 设置Profile 3.1 WebApplicationInitializer接口 3.2 通过 web.xml定义 3.3 JVM启动参数 3.4 环境 ...
- ABP开发框架前后端开发系列---(15)ABP框架的服务端和客户端缓存的使用
缓存在一个大型一点的系统里面是必然会涉及到的,合理的使用缓存能够给我们的系统带来更高的响应速度.由于数据提供服务涉及到数据库的相关操作,如果客户端的并发数量超过一定的数量,那么数据库的请求处理则以爆发 ...
- 基于IdentityServer4的OIDC实现单点登录(SSO)原理简析
写着前面 IdentityServer4的学习断断续续,兜兜转转,走了不少弯路,也花了不少时间.可能是因为没有阅读源码,也没有特别系统的学习资料,相关文章很多园子里的大佬都有涉及,有系列文章,比如: ...
- GPS常识-A版(详)
第一章 绪论 1.简述GPS系统的特点有哪些? GPS在测绘工程中应用的优点 P13 ●定位精度高 应用实践证明,相对静态定位1小时以上观测解,其平面位置:在300-1500m范围内,绝对误差小于1m ...
- 最新 centos7下zabbix 监控redis状态
准备 先准备两台服务器,已经部署好了zabbix-sever和zabbix-agent zabbix-server 192.168.1.70 centos7.2 zabbix-agent 192.16 ...
- nuxt项目打包上线,以及nuxt项目基础代码分享
nuxt的项目部署到线上环境,有多种方法,这里分享我使用的方法,一步步照着配置,就可以配置成功~ (1)项目先执行npm run build 打包好 (2)服务器安装node 和pm2依赖 服务器 ...
- 论样式表css的重要性
如下图所示两个网页代码基本相同,但左边网页加入样式表后就形成了右边的视觉效果,由此可见 在网页中html用于标记,css用于显示,而JavaScript则用于增强与用户的交互性. 加入的代码是 < ...
- C#8.0 中使用默认接口成员更新接口
连载目录 [已更新最新开发文章,点击查看详细] 从 .NET Core 3.0 上的 C# 8.0 开始,可以在声明接口成员时定义实现. 最常见的方案是安全地将成员添加到已经由无数客户端发布并使 ...
- MySQL 5.7和8.0性能测试
目录 背景 前提 环境 测试 双1模式下 0 2 模式下 结论 背景 测试mysql5.7和mysql8.0 分别在读写.只读.只写模式下不同并发时的性能(tps,qps) 前提 测试使用版本为mys ...