Vue基础知识(Web开发技术)(二)—Vue开发基础
第一篇在这里:Vue期末复习(一)—Vue开发基础_m0_48788975的博客-CSDN博客_vue期末考试导读:本章着重在:Vue提供的全局APIVue实例对象中的常用属性使用render渲染函数完成页面渲染的方法通过全局对象配置Vue的方法1.全局APIAPI(Application Programming Interface,应用程序编程接口:构建自定义的指令、组件、插件,通过Vue实例属
第一篇在这里:Vue期末复习(一)—Vue开发基础_m0_48788975的博客-CSDN博客_vue期末考试
目录
导读:
本章着重在:
- Vue提供的全局API
- Vue实例对象中的常用属性
- 使用render渲染函数完成页面渲染的方法
- 通过全局对象配置Vue的方法
1.全局API
API(Application Programming Interface,应用程序编程接口:
构建自定义的指令、组件、插件,通过Vue实例属性完成更强大的功能等。
指令包括:
- Vue.directive:用来注册自定义指令,对低级DOM元素进行访问,为DOM元素添加新的特性。
- Vue.use:用于基于Vue构造器创建一个Vue子类,可以对Vue构造器进行扩展。它有一个options参数,表示包含组件选项的对象。
- Vue.extend
- Vue.set:用于向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。
- Vue.mixin:用于全局注册一个混入,它将影响之后创建的每个Vue实例。在插件中向组件注入自定义的行为,可以用来为自定义选项注入处理逻辑。
下面来逐一讲解以下这些API指令:
-
Vue.directive
说明:用来注册自定义指令,对低级DOM元素进行访问,为DOM元素添加新的特性。
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。
(复习:v-model 双向数据绑定 v-show 控制元素的显示和隐藏)
用法:
模板:
Vue.directive( id, [definition] )
参数:
{string} id
{Function | Object} [definition]
用法:
注册或获取全局指令。
举例:
// 注册
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// 注册 (指令函数)
Vue.directive('my-directive', function () {
// 这里将会被 `bind` 和 `update` 调用
})
// getter,返回已注册的指令
var myDirective = Vue.directive('my-directive')
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在即可)。
- update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
- componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind:只调用一次,指令与元素解绑时调用。
钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
- el:指令所绑定的元素,可以用来直接操作 DOM。
- binding:一个对象,包含多个 property。
- vnode:Vue 编译生成的虚拟节点。
- oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。 除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。
v-directive的实例应用:
<div id="app">
<input type="text" v-focus="true">
</div>
<script>
Vue.directive('focus', {
inserted (el, binding) { #inserted:被绑定元素插入父节点时调用
if (binding.value) { #binding:指令的相关信息
el.focus() #el:自定义指令的元素,input;
}
}
})
var vm = new Vue({ el: '#app' })
</script>
-
Vue.use
说明:用于基于Vue构造器创建一个Vue子类,可以对Vue构造器进行扩展。它有一个options参数,表示包含组件选项的对象。
Vue.use的实例应用1:
<div id="app1">app1: {{title}}</div>
<div id="app2">app2: {{title}}</div>
<script>
var Vue2 = Vue.extend({
data () { #data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数
return {
title: 'hello‘
}
}
})
var vm1 = new Vue({ el: '#app1' })
var vm2 = new Vue2({ el: '#app2' })
</script>
Vue.use的实例应用2:插件:
在Vue中安装插件。插件如果是对象,必须提供install()方法,用来安装插件;如果是一个函数,则该函数将被当成install()方法。当 install 方法被同一个插件多次调用,插件将只会被安装一次。
#定义插件
<script>
// 定义一个MyPlugin(自定义插件)对象
let MyPlugin = {}
// 编写插件对象的install方法
MyPlugin.install = function (Vue, options) {
console.log(options)
// 在插件中为Vue添加自定义指令
Vue.directive('my-directive', {
bind (el, binding) {
// 为自定义指令v-my-directive绑定的DOM元素设置style样式
el.style = 'width:100px;height:100px;background-color:#ccc;'
}
})
}
#使用插件
Vue.use(MyPlugin, { someOption: true }
</script>
-
Vue.extend
用法:
Vue.component( id, [definition] )
参数:
{string} id
{Function | Object} [definition]
用法:
注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称
// 注册组件,传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件,传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })
// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')
参考:组件
Vue.extend的实例应用:
例3-3-1
<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')
结果如下:
<p>Walter White aka Heisenberg</p>
-
Vue.set
说明:用于向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。
Vue的核心具有一套响应式系统,简单来说就是通过监听器监听数据层的数据变化,当数据改变后,通知视图也自动更新。
用法:
格式:Vue.set( target, propertyName/index, value )
参数:
{Object | Array} target,目标对象;
{string | number} propertyName/index,属性名;
{any} value,属性值
返回值:设置的值。
注意:Vue 不允许动态添加根级别的响应式 property,所以你必须在初始化实例前声明所有根级响应式 property,哪怕只是一个空值。
Vue.set的实例应用:
#页面结构
<div id="app">
<div>{{a}}</div>
<div>{{obj.b}}</div>
</div>
#创建vm对象动态设置属性b
<script>
var vm = new Vue({
el: '#app',
data: {
a: '我是根级响应式属性a',
obj: {}
}
})
Vue.set(vm.obj, 'b', '我是Vue.set添加的响应式属性obj.b'
</script>
#不会响应:vm.obj.c = '我是直接添加的c属性'
用法错误:Vue.set(vm, 'b', '我是Vue.set添加的响应式属性obj.b')
-
Vue.mixin(全局混入)
说明:用于全局注册一个混入,它将影响之后创建的每个Vue实例。慎用!
在插件中向组件注入自定义的行为,可以用来为自定义选项注入处理逻辑。
Vue.mixin的实例应用:
<div id="app"></div>
<script>
var vm = new Vue({
myOption: 'hello vue!' #myOption是一个自定义属性。
Vue.mixin({
created () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption.toUpperCase())
}
}
})
})
</script>
2.实例属性
实例属性是指Vue实例对象的属性。
实例属性包括:
- vm.$data,获取vm实例中的数据对象;
- vm.$props,接收父组件传输的数据;
- vm.$options,创建自定义选项。
- vm.$el,用来访问vm实例使用的根DOM元素
- vm.$children,用来获取当前实例的直接子组件,其并不保证顺序,也不是响应式的。
- vm.$root,用来获取当前组件树的根Vue实例,如果当前实例没有父实例,则获取到的是该实例本身。
- vm.$slots,可以通过$slots动态获取定义在组件内部的template模板。为了方便使用template公共模板结构
- vm.$attrs,可以获取组件的属性,但其获取的属性中不包含class、style以及被声明为props的属性。
-
vm.$props
$props:使用vm.$props属性可以接收上级组件向下传递的数据。
-
vm.$options
$options:Vue实例初始化时,除了传入指定的选项外,还可以传入自定义选项。自定义选项的值可以是数组、对象、函数等,通过vm.$options来获取。
$options的实例应用:
#定义根标签:
<div id="app">
<p>{{base}}</p>
<p>{{noBase}}</p>
</div>
#创建vm实例
<script>
var vm = new Vue({
el: '#app',
data: {
base: '我是基础数据'
},
customOption: '我是自定义数据',
created () {
this.noBase = this.$options.customOption
}
})
</script>
-
vm.$el
$el:用来访问vm实例使用的根DOM元素
$el的实例应用:
<div id="app">
<p>我是根标签结构</p>
</div>
<script>
var vm = new Vue({
el: '#app'
})
vm.$el.innerHTML = '<div>我是替换后的div标签</div>'
</script>
-
vm.$children
$children:用来获取当前实例的直接子组件,其并不保证顺序,也不是响应式的。
$children的实例应用:
<div id="app">
<button @click="child">查看子组件</button>
<my-component></my-component>
</div>
<script>
#定义子组件
Vue.component('my-component', {
template: '<div>myComponent</div>'}
)
#获取子组件
var vm = new Vue({
el: '#app',
methods: {
child () {
console.log(this.$children)
}
}
})
</script>
-
vm.$root
$root:用来获取当前组件树的根Vue实例,如果当前实例没有父实例,则获取到的是该实例本身。
$root的实例应用:
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
template: '<button @click="root">查看根实例</button>',
methods: {
root () {
console.log(this.$root)
console.log(this.$root === vm.$root)
}
}
})
var vm = new Vue({ el: '#app' })
</script>
$root与$el区别?
$root组件树的根实例,
$el:vm实例的根DOM元素
-
vm.$slots
$slots:Vue的组件使用template模板定义HTML结构,为了方便使用template公共模板结构,Vue提出了插槽(Slots)的概念。
可以通过$slots动态获取定义在组件内部的template模板。
$slots的实例应用:
<div id="app">
<my-component>你好</my-component>
</div>
<template id="first">
<div>
<slot></slot> #slot占位作用
</div>
</template>
<script>
Vue.component('my-component', { template: '#first' })
var vm = new Vue({ el: '#app' })
</script>
#vm.$children[0].$slots.default[0].text
vm第1个子组件中的所有插槽中的默认插槽中第1个节点的内容
default获取默认插槽
<slot> 元素作为组件模板之中的内容分发插槽。
<slot> 元素自身将被替换。
vm.$slots访问被插槽分发的内容。 具名插槽,例如:v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到; 未具名的插槽,采用vm.$slots.default 。
-
vm.$attrs
$attrs:可以获取组件的属性,但其获取的属性中不包含class、style以及被声明为props的属性。
$attrs的实例应用:
<div id="app">
<my-component id="test"></my-component>
</div>
<script>
Vue.component('my-component', {
template: '<button @click="showAttrs">查看属性</button>',
methods: {
showAttrs () {
console.log(this.$attrs)
}
}
})
var vm = new Vue({ el: '#app' })
</script>
3.render渲染
<div id="app">
<my-component>成功渲染</my-component>
</div>
<script>
Vue.component('my-component', {
render (createElement) {
return createElement('p', {
style: {
color: 'red',
fontSize: '16px',
backgroundColor: '#eee'
}
}, this.$slots.default)
}
})
var vm = new Vue({ el: '#app' })
</script>
createElement
<div id="app">
<my-component>
<template v-slot:header>
<div style="background-color:#ccc;height:50px">
这里是导航栏
</div>
</template>
<template v-slot:content>
<div style="background-color:#ddd;height:50px">
这里是内容区域
</div>
</template>
<template v-slot:footer>
<div style="background-color:#eee;height:50px">
这里是底部信息
</div>
</template>
</my-component>
</div>
<script>
Vue.component('my-component', {
render (createElement) {
return createElement('div', [
createElement('header', this.$slots.header),
createElement('content', this.$slots.content),
createElement('footer', this.$slots.footer)
])
}
})
var vm = new Vue({ el: '#app' })
</script>
4.全局配置
Vue提供了全局配置对象Vue.config,通过配置可以实现生产信息提示、警告忽略等人性化处理。
全局配置包括:
- Vue.config.productionTip,打开或关闭生产信息提示信息,默认为打开状态。
- Vue.config.silent,silent可以取消Vue日志和警告,silent默认值为false,开启警告功能。
- Vue.config.devtools:表示打开或关闭vue-devtools调试工具,默认值为true,表示vue-devtools工具可用。
-
productionTip
Vue.config.productionTip:打开或关闭生产信息提示信息,默认为打开状态。
-
silent
Vue.config.silent:silent可以取消Vue日志和警告,silent默认值为false,开启警告功能。
silent的值设置为true,可以取消Vue日志和警告。
<script>
Vue.config.silent = true
var vm = new Vue({
el: '#app'
})
</script>
-
devtools
Vue.config.devtools:表示打开或关闭vue-devtools调试工具,默认值为true,表示vue-devtools工具可用。
有案例
更多推荐
所有评论(0)