点击蓝色 "达达前端" 关注我哦!
加个 "星标" , 每天一篇文章, 一起学编程
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 ☆
来源: http://www.jianshu.com/p/68dac05114c8