一文速览Vue全栈

原创: 新哥Lewis 天道酬勤Lewis 7月7日

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全栈的更多相关文章

  1. 一文读懂NodeJS全栈开发利器:CabloyJS(万字长文)

    目录 0 修订 0.1 修订说明 0.2 修订历史 1 基本概念 1.1 CabloyJS是什么 1.2 CabloyJS核心解决什么问题 1.3 CabloyJS的开发历程 2 数据版本与开发流程 ...

  2. Gin + Vue全栈开发实战(二)

    尝试地写了第一篇自己学习Go Web框架的感受和入门的文章,发现反响还不错,大家也提出了很多的问题来一起交流.近期也渐渐地出现了很多有关go语言开发的相关文章,包括有在蚂蚁金服的大牛的分享,我也一直有 ...

  3. Gin + Vue全栈开发实战(一)

    Gin入门 本章概要 Gin简介 开发第一个Gin程序 1.1 Gin简介 Gin是用Go语言编写的一个轻量级Web应用框架,现在在各个公司包括字节跳动.bilibili等大互联网公司都得到了广泛的应 ...

  4. Spring boot+Vue全栈开发---Spring Boot文件上传

    https://blog.csdn.net/Day_and_Night_2017/article/details/86980743 文件上传涉及到两个组件:CommonsMultipartResolv ...

  5. 全栈工程师眼中的HTTP

    HTTP,是Web工程师每天打交道最多的一个基本协议.很多工作流程.性能优化都围绕HTTP协议来进行,但是我们对HTTP的理解是否全面呢?如果前端工程师和后台工程师坐在一起玩捉鬼游戏,他们对HTTP的 ...

  6. NodeJS全栈开发利器:CabloyJS究竟是什么

    CabloyJS CabloyJS是一款顶级NodeJS全栈业务开发框架, 基于KoaJS + EggJS + VueJS + Framework7 文档 官网 && 文档 演示 PC ...

  7. spring boot + vue + element-ui全栈开发入门——开篇

    最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...

  8. 一个 Vue & Node 的全栈小项目

    约学 - 可以寻找一起自习的小伙伴的Web APP 一个基于 Vue & Node 的移动端全栈小项目 在线演示(请使用移动端查看效果) 源码地址: https://github.com/G- ...

  9. 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    写在前面 参考答案及资源在看云平台发布,如果大家想领取资源以及查看答案,可直接前去购买.一次购买永久可看,文档长期更新!有什么意见与建议欢迎您及时联系作者或留言回复! 文档描述 本文是关注微信小程序的 ...

随机推荐

  1. easyui combobox name选择器

    HTML: <input name="myinputdom" id="myinputdom" class="easyui-combobox my ...

  2. WebLogic 任意文件上传远程代码执行_CVE-2018-2894漏洞复现

    WebLogic 任意文件上传远程代码执行_CVE-2018-2894漏洞复现 一.漏洞描述 Weblogic管理端未授权的两个页面存在任意上传getshell漏洞,可直接获取权限.Oracle 7月 ...

  3. 【RabbitMQ】一文带你搞定RabbitMQ死信队列

    本文口味:爆炒鱿鱼   预计阅读:15分钟 一.说明 RabbitMQ是流行的开源消息队列系统,使用erlang语言开发,由于其社区活跃度高,维护更新较快,性能稳定,深得很多企业的欢心(当然,也包括我 ...

  4. c++学习书籍推荐《C和C++安全编码》下载

    <华章程序员书库:C和C++安全编码(原书第2版)>致力于解决C和C++中已经导致危险的.破坏性的常见软件漏洞的基本编程错误,这些漏洞自CERT 1988年创立以来就记录在案.针对导致这些 ...

  5. Fiolki题解

    问题 B: Fiolki 时间限制: 3 Sec  内存限制: 128 MB 题目描述 化学家吉丽想要配置一种神奇的药水来拯救世界. 吉丽有n种不同的液体物质,和n个药瓶(均从1到n编号).初始时,第 ...

  6. 乘法口诀表(C语言实现)

    输出乘法口诀表,关键在于利用好循环语句,而且是二层循环.

  7. 7月18日刷题记录 二分答案跳石头游戏Getting

    通过数:1 明天就要暑假编程集训啦~莫名开心 今天做出了一道 二分答案题(好艰辛鸭) 1049: B13-二分-跳石头游戏(二分答案) 时间限制: 5 Sec  内存限制: 256 MB提交: 30  ...

  8. NFS存储服务及部署

    1 NFS简介 1.1 什么是NFS NFS=Network File System=网络文件系统.主要功能是通过网络(一般是局域网)让不同的主机系统之间可以共享文件或目录.NFS客户端(一般为应用服 ...

  9. Netty编码流程及WriteAndFlush()的实现

    编码器的执行时机 首先, 我们想通过服务端,往客户端发送数据, 通常我们会调用ctx.writeAndFlush(数据)的方式, 入参位置的数据可能是基本数据类型,也可能对象 其次,编码器同样属于ha ...

  10. 机器学习-特征值,svd分解

    求矩阵的秩 设 ,已知r(A)=2,则参数x,y分别是 解:任意三阶子式=0,有二阶子式≠0,但是这些子式比较多,可以使用初等变换,因为初等变换不改变矩阵的秩,可以将矩阵通过初等行(列)变换,化为行阶 ...