前言
vue2 截止 2023 年 12 月 31 日不再维护更新,将全面拥抱 vue3 了。
vue2
vue2 是一个实现 UI 层的渐进式 js 框架。vue2 本质是一个类,可以配置 options API 实例化为一个 vm 对象,通过模板编译处理成虚拟 DOM,对比更新后生成真实 DOM 并挂载至页面中,实现页面渲染,相较于原生 js 更加易用,灵活,高效。
简而言之,vue2 的实例对象就是一种特殊的 DOM,可以通过 Options API 配置化生成 DOM,vue2 也提供一系列的方法(静态方法和实例方法)和属性(静态属性和实例属性)来支持操作 DOM。这个 DOM 支持更小粒度的拆分和组合,这种小粒度的 DOM 称之为组件,而组件也是 vue2 的实例对象。
![](https://images.cnblogs.com/cnblogs_com/blogs/766345/galleries/2301986/o_230526084718_vue2.png)
Options API
Options API 是 vue 的配置选项,用户可以通过指定配置,实例化自定义的 vm 对象,可以具备数据,DOM元素,交互方法等。
DOM Options
DOM Options 主要包含 el
, template
, render
, renderError
四个选项。
-
el
el
是 vue 实例关联 HTML 文档的唯一配置项,可以通过配置el
选项指定 vm 对象挂载 DOM 位置。<div id="app"></div> <script type="text/javascript"> const vm = new Vue({ el: '#app', template: `<h1>template</h1>`, }) </script>
vm 对象也可以通过实例方法
vm.$mount()
挂载指定 DOM。<div id="app"></div> <script type="text/javascript"> const vm = new Vue({ template: `<h1>template</h1>`, }) vm.$mount('#app') </script>
注意:vue2 中实例化 vm 对象的方式有:new Vue(), Vue.component, Vue.extend() 三种方式,
el
选项只在 new Vue() 实例化过程生效,其他两种方式实例化对象需要通过components
方式挂载至 new Vue() 实例化对象上。 -
template
template
用于指定当前 vm 对象渲染在页面中的 DOM 元素,当el
选项生效时,可以省略,则挂载 DOM 即渲染 DOM。<div id="app"></div> <script type="text/javascript"> const vm = new Vue({ el: '#app', template: `<h1>template</h1>`, }) </script>
-
render
render
优先级最高,一旦重写render
方法,优先使用render
返回 DOM。<div id="app"></div> <script type="text/javascript"> const vm = new Vue({ el: '#app', template: `<h1>template</h1>`, render(createElement) { return createElement('div', { id: 'test' }, 'render') } }) </script>
render
方法参数 createElement 是一个函数,接收三个参数:标签名,属性,子元素,返回参数生成的 DOM 元素。 -
renderError
Data Options
-
data
-
props
-
propsData
-
computed
-
methods
-
watch
LifeCycle Options
-
beforeCreate
-
created
-
beforeMount
-
mounted
-
beforeUpdate
-
updated
-
beforeDestroy
-
destroyed
-
actived
-
deactived
-
errorCaptured
Source Options
-
directives
-
filters
-
components
Compostion Options
-
parent
-
mixins
-
extends
-
provide / inject
Other Options
-
name
-
delimiters
-
functional
-
model
-
inheritAttrs
-
comments
静态方法
vue2 中实例方式是全局 API,是实例方法的延伸。
extend
component
nextTick
set
delete
directive
filter
use
mixin
compile
observable
version
静态属性
vue2 中静态属性只有一个 config
配置属性,config
是一个配置对象属性,包含多个具体属性配置。
silent
optionMergeStrategies
devtools
errorHandler
warnHandler
ignoredElements
keyCodes
performance
productionTip
实例方法
Data Method
Event Method
LifeCycle Method
实例属性
vue2 中实例属性实际为组件属性。
data
props
el
options
parent
children
root
slots
scopedSlots
refs
isServer
attrs
listeners
内置组件
component
transition
transition-group
keep-alive
slot
内置指令
v-text
v-html
v-show
v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-slot
v-pre
v-cloak
v-once
特殊属性
key
ref
is
slot
slot-scope
scope
后记
尽管 vue2 不再支持,在框架的变更节点上的我们,势必要同时面对 vue2 和 vue3 项目,既不可抛弃旧爱 vue2,又必须另找新欢 vue3,尽力“渣”下去吧!
标签:Vue,template,DOM,vm,实例,vue2,系统化 From: https://www.cnblogs.com/huangminghua/p/17435387.html