专栏首页达达前端Vue.js渐进式JavaScript框架

Vue.js渐进式JavaScript框架

2020年02月09日

什么是vue.js?

vue.js是一款渐进式的JavaScript框架。

什么是渐进式?

渐进式就是指可以由浅入深的,由简单到困难的一种方式。

那么vue.js有什么优点?

vue.js拥有更小的体积,压缩后的vue.js就只有33k;vue.js拥有更高的运行效率,vue.js是基于虚拟dom的,虚拟dom是一种可以预先通过JavaScript进行各种计算,把最终的dom操作计算出来并进行优化的技术。

因为这个Dom的操作属于预处理操作,并没有真实的操作Dom,所以叫做虚拟Dom。

vue.js基于虚拟Dom操作,大幅度提高了Dom的操作以及渲染效率。不仅如此,vue.js还实现了双向数据绑定。

vue.js的双向数据绑定,让开发者(程序员)不用再去操作Dom对象,可以把更多的精力投入到业务逻辑上。

对于vue.js的学习,其学习成本低,生态丰富等,目前市场上拥有大量的成熟,稳定的基于vue.js的Ui框架,常用的组件,可以拿来即用地进行快速开发。

安装

vue.js的安装方式有很多种,第一种:直接使用script标签的方式去引入,vue会被注册为一个全局变量。

在开发环境下不要使用压缩版本,否则会失去所有常见错误相关的警告!

因为开发版本,包含完整的警告和调试模式,而生产版本删除了警告。

CDN

对于学习环境,可以使用如下代码:

对于生产环境,建议使用如下代码:

链接到一个明确的版本号和构建文件

如果使用原生的ES Modules,如下使用一个兼容的构建文件:

在用vue构建大型应用时推荐使用npm的安装方式,因为npm能够很好的使用webpack或Browserify模块打包器配合使用。

使用命令行:

vue提供了一个官方的cli,为单页面应用快速搭建的脚手架。

随便点击下载一个开发版本的或者是生产版本的,下载文件如下,就一个vue.js文件。

然后创建vueDemo,把vue.js文件复制进入。

创建一个index.html文件,以后可以用.vue文件。

开始创建第一个vue.js的应用

vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进Dom的系统。可以说vue.js的应用可以分成两个重要的组成部分,一个是视图,一个是脚本。

文档结构:

运行效果:

数据与方法

每个vue应用都是通过用vue函数创建一个新的vue实例开始的:

虽然vue没有完全遵守mvvm模型,但是vue的设计也受到了它的启发,所以我们在开发中会经常使用vm来代表一个vue的实例。

这个vm就是viewModel视图模型的缩写,当一个vue实例被创建时,它将data对象中的所有属性都加入到vue的响应式系统中。

核心:当这些属性的值发生改变时,视图将会产生“响应”,改变为新的值。

生命周期

每个vue实例在被创建时,都要经历一系列的初始化过程。比如说要设置数据的监听,编译模板,将实例挂载到Dom结构,并且在数据变化时更新Dom等等。

在这些过程中,运行的一些为生命周期的钩子函数,给我们有了添加代码的机会。

整个页面调用之前创建的生命周期,beforeCreate,创建之前,在实例初始化后,数据观测和事件配置之前被调用。

created创建之后,在实例创建完成后被调用的,实例已经完成的配置,如数据观测属性和方法的运算,事件回调,此时,挂载阶段还没有开始,$el属性目前不可见。

beforeMount挂载之前,准备挂载的阶段,在挂载开始之前被调用,相关的渲染函数首次被调用。

mounted挂载成功,el被新创建的vm.$el替换。

数据变化之前被调用的函数,beforeUpdate数据更新时调用。

updated是组件dom已经更新,组件更新完毕的情况。

activated,类型为function,是在keep-alive组件激活时调用,该钩子在服务器端渲染期间不被调用。

deactivated,类型为function,是在keep-alive组件停用时调用,该钩子在服务器端渲染期间不被调用。

beforeDestroy,类型为function,是在实例销毁之前调用,该钩子在服务器端渲染期间不被调用。

destroyed,类型function,是在vue实例销毁之后,vue实例指示的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

errorCaptured是去捕获来自子组件的一个错误的时候被调用,它可以去捕获子组件的错误。

模板语法

vue.js使用了基于HTML额模板语法,允许开发者声明地将dom绑定到底层vue实例的数据。所有vue.js的模板都是合法的HTML,所以能够被规范的浏览器和HTML解析器所解析。

在底层的实现上,vue将模板编译成虚拟dom渲染函数,结合响应系统,vue能够计算出最少需要重新渲染多少组件,并把dom操作次数减少。vue.js这样可以提高JavaScript的效率。

数据绑定的形式是使用“mustache"语法的文本插值:

使用v-once指令,执行一次性地插值,当改变数据时,插值里的内容不会被更新。

双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:

使用JavaScript的表达式

指令

什么是指令?指令式带有v-前缀的特性,指令特性的值预期是单个JavaScript表达式,指令的职责是,当表达式的值改变时,将其产出的连带影响,响应地作用于Dom。

v-if,v-else,v-show,v-else-if

这些指令用于显示与隐藏各类元素:

v-if和v-show的区别

v-if,在切换过程中条件内的事件监听器和子组件适当地被销毁和重建,开销高,在运行时条件很少改变时才使用这个指令。

v-show,调整的是css display属性,开销较小,在常频繁地切换中使用。

v-for的基本用法和对象遍历

v-text和v-html

v-text的取值有一个缺点,当网速慢时,会在页面中显示{{xx}},而v-text可以解决这个bug。

v-html指令式用于输出Html代码的

class与style绑定

绑定HTML class

对象语法,通过v-bind:class一个对象,以动态地切换class。

语法表示active这个class存在与否取决于isActive的值。这样你可以在对象中传入更多属性来动态切换多个class。

注意,v-bind:class指令可以与普通的class属性共存。

可以使用计算属性定义。

v-bind:class使用数组语法。

列表渲染

用v-for指令基于一个数组来渲染一个列表,v-for指令需要使用item in items形式的语法,其中items是源数据数组,而item是被迭代的数组元素的别名。

使用v-on指令监听dom事件,并在触发时运行一些JavaScript代码。

v-pre,v-cloak,v-once

v-pre可以在模板中跳过vue的编译,直接输出原始值。

v-cloak可以在vue渲染完指定的整个dom后才进行显示。它和css样式一起使用的。

v-once只显示第一次渲染的值,不再改变。

表单输入绑定

可以用v-model指令在表单input,textarea,以及selects元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素。

v-model在内部会根据不同的输入元素使用不同的属性并抛出不同的事件。text和textarea元素使用value属性和Input事件。checkbox和radio使用checked属性和change事件。select字段将value作为prop并将change作为事件。

组件基础

全局注册

局部注册

组件是可复用的vue实例。因为组件是可复用的vue实例,所以他们与New Vue接收相同的选项。

组件注册

组件props属性传值。

组件注册,在注册一个组件的时候,我们需要给它一个名字,比如在全局注册的时候我们需要按照如下代码:

组件名的大小写,定义组件名的方式可以有两种:

使用短横线分隔命名定义一个组件

使用首字母大写命名定义一个组件,驼峰式:

父子组件代码如下:

vue.js支持我们在模块系统中的局部注册,在这种情况下,推荐创建一个components目录,并将每个组件放置在其各自的文件中。

需要在局部注册之前导入你想使用的组件,让ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用。

实例事件

$on是在构造器外部添加事件,它接收两个参数,第一个参数是调用时的事件名称,第二个参数是一个匿名的方法。

$off的用法,关闭事件和$emit的用法是事件调用。

vue.js的单文件组件

在很多vue.js项目中,我们使用Vue.component来定义全局组件,这种方式在很多项目中运作是没有什么问题的。

在复杂的项目中,缺点就很明显。比如说,在全局定义,强制要求每个component中的命名不得重复。字符串模板缺乏语法高亮的支持,不支持css,没有构建步骤。

所以使用文件扩展名为.vued的单文件组件解决了这些问题,并且还可以使用webpack和browserify等构建工具。

安装 npm

npm 全称为 Node Package Manager,是基于Node.js的包管理器,也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。

npm -v

由于网络原因 安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 vue-cli

cnpm install -g @vue/cli

安装 webpack

webpack 是 JavaScript 打包器(module bundler)

cnpm install -g webpack

创建一个组件示例:

优点:

完整语法高亮

CommonJS 模块

组件作用域的 CSS

cli方式开发,cli是命令行,需要掌握终端,node,npm等很多知识,搭建项目环境,运行和发布项目,配置less/sass/typescript/babel等预编译器。掌握安装各种流行的组件库等。

组件的创建

computed计算属性,是对原始数据进行改造输出。

watch属性,数据变化的监听器,用于监测data中的数据变化。

filters过滤器,常用格式化字符等作用。

mixins用于减少代码污染,减少代码量,实现代码的重用。

extends是用于对构造器进行扩展的。

☆ END ☆

参考文档来源:vue.js官方地址

目前文章内容涉及前端知识点,囊括Vue、JavaScript、数据结构与算法、实战演练、Node全栈一线技术,紧跟业界发展步伐,将 Web前端领域、网络原理等通俗易懂的呈现给小伙伴。更多内容请到达达前端网站进行学习:www.dadaqianduan.cn

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (29)打鸡儿教你Vue.js

    vue.js的基本语法 css3和css的基本语法 静态资源服务器Nginx的搭建方法

    达达前端
  • (3)打鸡儿教你Vue.js

    vue.js是一套构建用户界面的渐进式框架 vue关注视图层,采用自底向上增量开发的设计

    达达前端
  • Node.js安装使用-VueCLI安装使用-工程化的Vue.js开发

    什么是Node.js简介呢?它是一个基于JavaScript的运行环境,Node.js发布于2009年5月,对Chrome V8引擎进行了封装,是由RyanDa...

    达达前端
  • 用Mathematica探究历史

    WolframChina
  • 不再空谈,奥创科技展示医疗全面VR体验系统

    VRPinea
  • 34.QT-制作串口助手(并动态检测在线串口,附带源码)

    将qextserialport-1.2rc.zip解压,将解压后的src目录拷贝到项目里的子目录SerialSrc下,在项目pro文件中增加下面这行

    张诺谦
  • Python获取控制台输入

    py3study
  • 关于大量CLOSE_WAIT连接分析

    某日线上登录出现故障,排查日志发现HttpClient请求时随机分配到的端口被占用,导致第三方登录拉取信息时无法拉取成功,错误如下:

    屈定
  • vue3.0 Composition API 上手初体验 神奇的 setup 函数 (一) 响应数据的绑定

    从网上大家对于 vue 3.0 的最大的变化,就是 Vue Composition API 的看法来说,两极分化比较严重。一种是认为这种写法实在太优秀了,很好,...

    FungLeo
  • 微软沈向洋自述:在实现职业目标的道路上,我得到了七个教训

    当我从卡内基梅隆大学获得机器人学博士学位时,我的职业目标是成为一名计算机科学教授。我将帮助塑造年轻人的思想,并为该领域贡献世界级的研究成果。

    机器之心

扫码关注云+社区

领取腾讯云代金券