全局API：
(1)Vue.directive
(2)Vue.use
(3)Vue.extend
(4)Vue.set
(5)Vue.mixin
实例属性
(6)vm.$props
(7)vm.$options
(8)vm.$el
(9)vm.$children
(10)vm.$root
(11)vm.$slots
(12)vm.$attrs
全局配置
(13)productionTip
(14)silent
(15)devtools
组件进阶
(16)mixins
(17)render
(18)createElement
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>各种全局Api及属性的使用</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>Vue.directive：用来注册自定义指令，对低级DOM元素进行访问，为DOM元素添加新的特性</p>
<p>自定义注册指令v-focus:</p>
<p>控制input文本框是否自动获得焦点</p>
<p>打开文件时,光标自动插入该input</p>
<p><input type="text" v-focus="true"></p>
<hr size="2" color="#efefef"/>
<div class="vue_use_content">
<p>Vue.use：<br/>Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加<span>全局功能</span>。插件可以是一个<span>对象或函数</span>，<br/>
如果是<span>对象</span>，必须提供<span>install()方法</span>，用来安装插件；如果是一个<span>函数</span>，则该函数将被当成<span>install()方法</span>。
</p>
<div class="my_directive_my_plugin" v-my-directive></div>
<div class="vue_use_directive">
<p>Vue.js官方提供的一些插件（如vue-router）在检测到 Vue 是可访问的全局变量时，</p>
<p>会自动调用 Vue.use()。</p>
<p>但是在CommonJS等模块环境中，则始终需要Vue.use()显式调用</p>
</div>
</div>
<div>
<p>Vue.extend：</p>
<p>Vue.extend用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展。</p>
<p>它有一个options参数，表示包含组件选项的对象</p>
<div id="app1">app1: {{title}}</div>
<div id="app2">app2: {{title}}</div>
</div>
<hr/>
<div>
<p>Vue.set：</p>
<p>Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，当数据改变后，通知视图也自动更新。</p>
<p>Vue.set用于向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。</p>
<p>
<div>{{a}}</div>
<div>{{obj.file_name}}</div>
</p>
</div>
<hr color="#3efefe"/>
<p>Vue.mixin：</p>
<p>Vue.mixin用于全局注册一个混入，它将影响之后创建的每个Vue实例。</p>
<p>该接口主要是提供给插件作者使用，在插件中向组件注入自定义的行为。</p>
<p>该接口不推荐在应用代码中使用。</p>
<hr/>
<p>$props：使用vm.$props属性可以接收上级组件向下传递的数据。</p>
<p>通过$props实现手机信息搜索(华为,vivo,三星,苹果)</p>
<p>在子组件的data中定义props用来接收name的值</p>
<!-- 父组件 -->
<my-parent></my-parent>
<hr size="2"/>
<div class="option_content_vue">
<p>$options：Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项。</p>
<p>自定义选项的值可以是数组、对象、函数等，通过vm.$options来获取</p>
<p>{{base}}</p>
<p>{{noBase}}</p>
<p>$el：vm.$el用来访问vm实例使用的根DOM元素，案例展示如下</p>
</div>
<div>
<p>$children：vm.$el用来访问vm实例使用的根DOM元素，案例演示如下</p>
<button @click="child">查看子组件</button>
<my-component></my-component>
<hr width="670" size="2"/>
<p>$root：</p>
<p>vm.$root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身</p>
<p>控制台查看结果：</p>
<look-root-component></look-root-component>
</div>
<hr width="670" size="2"/>
<!-- slots插槽 -->
<p>$slots：Vue中的组件中使用template模板定义HTML结构，为了方便使用template公共模板结构。</p>
<p>Vue提出了插槽（Slots）的概念，插槽就是定义在组件内部的template模板，可以通过$slots动态获取。</p>
</div>
<!-- 父组件模板 -->
<template id="parent">
<div>
<h3>手机信息搜索</h3>
手机品牌：<input type="text" v-model="brand">
<!-- 子组件 -->
<my-child v-bind:name="brand"></my-child>
</div>
</template>
<!-- 子组件模板 -->
<template id="child">
<ul>
<li>手机品牌：{{show.brand}}</li>
<li>手机型号：{{show.type}}</li>
<li>市场价格：{{show.price}}</li>
</ul>
</template>
</body>
<script>
Vue.directive('focus', {
inserted(el, binding) {
if (binding.value) {
el.focus();
console.info("v-focus传入的值: " + binding.value)
}
}
});
// 定义一个插件
/* 定义一个MyPlugin（自定义插件）对象*/
let MyPlugin = {};
// 编写插件的install方法
MyPlugin.install = function (Vue, options) {
console.info("插件中输出options: " + options);
// 在插件中未Vue添加自定义的指令
Vue.directive('my-directive', {
bind(el, binding) {
// 为自定义指令v-my-directive绑定的DOM元素设置style样式
el.style = 'margin:20px auto;height:100px;background-color:#ccc;padding-top:50px;color:#efefef'
el.innerHTML = "可以在该插件内绘制表格";
}
});
}
// 使用插件
Vue.use(MyPlugin, {someOption: true})
let Vue2 = Vue.extend({
data() {
return {
title: 'hello'
}
}
});
let vm1 = new Vue2({el: '#app1'})
let vm2 = new Vue2({el: '#app2'})
// Vue.set 设置新属性,并更新视图
// 注册父组件
Vue.component('my-parent', {
template: "#parent",
data() {
return {
brand: {}
}
}
});
// 组成子组件
Vue.component('my-child', {
template: "#child",
data() {
return {
content: [
{brand: '华为', type: 'Mate20', price: 3699},
{brand: '苹果', type: 'iPhone7', price: 2949},
{brand: '三星', type: 'Galaxy S8+', price: 3299},
{brand: 'vivo', type: 'Z5x', price: 1698},
{brand: '一加', type: 'OnePlus7', price: 2999},
{brand: '360', type: 'N7 Pro', price: 1099},
{brand: 'oppo', type: 'Reno', price: 2599}
],
show: {brand: '', type: '', price: ''}
}
},
props: ['name'], // 用name属性来接收父组件传递过来的值
watch: {
name() {
if (this.$props.name) {
let found = false
this.content.forEach((value, index) => {
if (value.brand === this.$props.name) {
found = value // 反映一条数据对象
}
})
this.show = found ? found : {brand: '', type: '', price: ''}
} else {
return
}
}
}
});
Vue.component('my-component', {
template: '<div>myComponent</div>'}
)
// 查看根
Vue.component('look-root-component',{
template: '<button @click="root">查看根实例</button>',
methods: {
root () {
console.log(this.$root)
console.log(this.$root === vm.$root)
}
}
})
let vm = new Vue({
el: "#app",
myOption: 'helloWorld这是vue实例初始化时自定义的数据',
customOption: '我是自定义数据',
data: {
a: '我是根级响应式属性a',
obj: {},
base: '我是基础数据'
},
created () {
this.noBase = this.$options.customOption;
},
methods: {
child () {
console.log(this.$children)
}
}
})
Vue.set(vm.obj, 'file_name', '我是Vue.set添加的响应式属性obj的属性file_name');
Vue.mixin({ // 注册混入
created() {
let myOptions = this.$options.myOption;
if (myOptions) {
console.info("初始化的属性: " + myOptions.toUpperCase());
}
}
})
</script>
<style scoped>
body {
margin: 0px;
padding: 0px;
border: 0px;
text-align: center;
background-color: #657180;
}
div.vue_use_content span {
font-size: 15px;
font-family: '微软雅黑';
color: #e3e6c7;
}
div.vue_use_directive {
font-size: large;
}
div.option_content_vue {
margin-top: 20px;
margin-bottom: 17px;
font-size: 17px;
font-family: '微软雅黑';
}
</style>
</html> 效果图：
3587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
