一文速览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. Z点餐系统项目下期改进计划

    随着计算机应用范围的日益广泛深人,应用软件的规模及复杂程度也日趋大型化.复杂化,这就导致软件开发的方式也从早期的单兵作战式或手工作坊式渐渐转变为集团化.工厂流水 问题: (一)缺乏项目管理系统培训.项 ...

  2. 自动化冒烟测试 Unittest , Pytest 哪家强?

    前言:之前有一段时间一直用 Python Uittest做自动化测试,觉得Uittest组织冒烟用例比较繁琐,后来康哥提示我使用pytest.mark来组织冒烟用例 本文讲述以下几个内容: 1.Uni ...

  3. 按行读取String类型

    BufferedReader br = new BufferedReader(new InputStreamReader(new ByteArrayInputStream(content.getByt ...

  4. 淺談Coach思考模式

    我現在是個窮屌,沒錯.我清楚的知道這一點,但是我也知道,我能改變. 之前幹了7年的評估行業,中間換了3家公司,第一家公司待的時間最長,待了5年.2018年開始,我就在思考轉行.之前在第一家企業接觸過一 ...

  5. 托管堆和垃圾回收(GC)

    一.基础 首先,为了深入了解垃圾回收(GC),我们要了解一些基础知识: CLR:Common Language Runtime,即公共语言运行时,是一个可由多种面向CLR的编程语言使用的"运 ...

  6. py+selenium IE 定位到元素,但点击不了元素的问题【已解决】

    目标:定位到[网点大客户清单],并点击该链接 问题:可以定位到元素id,但一直click不了 页面目标元素部分源码:  自动化源码: 进入frame后,可以定位到id,但点击不了  解决方法: 调用执 ...

  7. Oracle 学习笔记二

    一.oracle通用函数vnl(a,b) 用于任何类型,如果a的值不为null返回a的值否则返回b的值 条件判断oracle中可以使用 case 字段 when 条件1 then 表达式1 when ...

  8. 洛谷 P1039 侦探推理

    题目:https://www.luogu.org/problemnew/show/P1039 分析: 这道题是一道有技术含量的模拟,我们主要是不要让计算机向人一样思考,只需要让他穷举变化的星期几和当罪 ...

  9. 个人永久性免费-Excel催化剂功能第42波-任意字符指定长度随机函数

    日常做表过程中,难免会有一些构造数据的场景,构造数据最好是用随机的数据,如随机密码,随机英文字母.数字等.在Excel原生的随机函数Rand中,仅能处理数字的随机,且最终生成的结果也是数字类型.今天E ...

  10. K-Means(K均值)、GMM(高斯混合模型),通俗易懂,先收藏了!

    1. 聚类算法都是无监督学习吗? 什么是聚类算法?聚类是一种机器学习技术,它涉及到数据点的分组.给定一组数据点,我们可以使用聚类算法将每个数据点划分为一个特定的组.理论上,同一组中的数据点应该具有相似 ...