Vue.js开发基础（下）

最新推荐文章于 2022-11-12 16:05:59 发布
最新推荐文章于 2022-11-12 16:05:59 发布
阅读量639 收藏 1
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45443449/article/details/116024094
版权

本篇文章是我根据vue官方文档所整理的一篇文章，便于观看，因为我还是初学者，有不对的地方多多指教。

Vue.js开发基础（下）

一. 全局API

1. Vue.directive

用来注册自定义指令，对低级DOM元素进行访问，为DOM元素添加新的特性。
在这里插入图片描述

控制input文本框是否自动获取焦点。

<body>
	<div id="app">
		<input type="text" v-focus="true"/>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.directive("focus", {
			inserted(el, binding) {
				if(binding.value) {
					el.focus()
				}
			}
		})
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

2. Vue.use

Vue.use主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能。插件可以是一个对象或函数，如果是对象，必须提供install()方法，用来安装插件；如果是一个函数，则该函数将被当成install()方法。

Vue.js官方提供的一些插件（如vue-router）在检测到Vue是可访问的全局变量时，会自动调用Vue.use()。但是在CommonJS等模块的环境下，则始终需要Vue.use()显示调用。

在这里插入图片描述

<body>
	<div id="app" v-my-directive></div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		let MyPlugin = {};
		MyPlugin.install = function(Vue, options) {
			console.log(options);
			Vue.directive('my-directive', {
				bind(el, binding) {
					el.style = 'width:100px; height:100px; background-color:#ccc'
				}
			})
		}
		Vue.use(MyPlugin, {
			someOption: true
		})
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

3. Vue.extend

Vue.extend用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展。它有一个options参数，表示组件选项的对象。
在这里插入图片描述

<body>
	<div id="app1">app1：{{title}}</div>
	<div id="app2">app2：{{title}}</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var Vue2 = Vue.extend({
			data() {
				return {
					title: 'hello'
				}
			}
		})
		var vm1 = new Vue({
			el: '#app1'
		})
		var vm2 = new Vue2({
			el: '#app2'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

4. Vue.set

Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，当数据改变后，通知视图也自动更新。
Vue.set用于向响应式对象中添加一个属性，并确保这个新属性同样式响应式的，且触发视图更新。
在这里插入图片描述

<body>
	<div id="app">
		<div>{{a}}</div>
		<div>{{obj.b}}</div>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				a: '我是根级响应式属性a',
				obj: {}	
			}
		})
		Vue.set(
			vm.obj,
			'b',
			'我是Vue.set添加的响应式属性obj.b'
		)
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

5. Vue.mixin

Vue.min用于全局注册一个混入，它将影响之后创建的每个Vue实例。该接口主要是提供给插件作者使用，在插件中向组件注入自定义的行为。该接口不推荐在应用代码中使用。
在这里插入图片描述

<body>
	<div id="app"></div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.mixin({
			created() {
				var myOption = this.$options.myOption
				if(myOption) {
					console.log(myOption.toUpperCase());
				}
			}
		})
		var vm = new Vue({
			myOption: 'hello vue!'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

二. Vue实例

1. vm.$props

$props：使用vm.$props属性可以接收上级组件向下传递的数据。
在这里插入图片描述
在这里插入图片描述

当输入框中输入手机品牌，下面列表中即出现对应的手机信息。

<body>
	<div id="app">
		<!-- 父组件 -->
		<my-parent></my-parent>
	</div>
	<!-- 父组件模板 -->
	<template id="parent">
		<div>
			<h3>手机信息搜索</h3>
			手机品牌：<input type="text" v-model="brand">
			<!-- 子组件 -->
			<my-child :name="brand"></my-child>
		</div>
	</template>
	<!-- 子组件模板 -->
	<template id="child">
		<ul>
			<li>手机品牌：{{show.brand}}</li>
			<li>手机型号：{{show.type}}</li>
			<li>市场价格：{{show.price}}</li>
		</ul>
	</template>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.component('MyParent', {
			template: '#parent',
			data() {
				return {
					brand: ''
				}
			}
		})
		Vue.component('MyChild', {
			template: '#child',
			data() {
				return {
					content: [
						{brand: '华为', type: 'Mate20', price: 3699},
						{brand: '苹果', type: 'iPhone7', price: 2949}
					],
					show: {
						brand: '', type: '', price: ''
					}
				}
			},
			props: ['name'],
			watch: {
				name() {
					if(this.$props.name) {
						var found = false;
						this.content.forEach((value, index) => {
							if(value.brand === this.$props.name) {
								found = value
							}
						})
						this.show = found ? found : {brand: '', type: '', price: ''}
					}else {
						return
					}
				}
			}
		})
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

2. vm.$options

Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项。自定义选项的值可以是数组、对象、函数等，通过vm.$options来获取。
在这里插入图片描述

<body>
	<div id="app">
		<p>{{base}}</p>
		<p>{{noBase}}</p>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				base: '我是基础数据'
			},
			customOption: '我是自定义数据',
			created() {
				this.noBase = this.$options.customOption
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

3. vm.$el

vm.$el用来访问vm实例使用的根DOM元素。
在这里插入图片描述

<body>
	<div id="app">
		<p>我是根标签结构</p>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app'
		})
		vm.$el.innerHTML = '<div>我是替换后的div标签</div>'
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

4. vm.$children

查看直接子组件。
在这里插入图片描述
在这里插入图片描述

<body>
	<div id="app">
		<button @click="child">查看子组件</button>
		<my-component></my-component>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.component('MyComponent', {
			template: `
				<div>myCompontent</div>
			`
		})
		var vm = new Vue({
			el: '#app',
			methods: {
				child() {
					console.log(this.$children);
				}
			}
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

5. vm.$root

vm.$root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身。
在这里插入图片描述
在这里插入图片描述

<body>
	<div id="app">
		<my-component></my-component>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.component('MyComponent', {
			template: `
				<button @click="root">查看根实例</button>
			`,
			methods: {
				root() {
					console.log(this.$root);
					console.log(this.$root === vm.$root);
				}
			}
		})
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

6. vm.$slots

Vue的组件中使用template模板定义HTML结构，为了方便使用template公共模板结构。Vue提出了插槽（Slots）的概念，插槽就是定义在组件内部的template模板，可以通过$slots动态获取。

示例一：通过<slot></slot>展示组件的内容

在这里插入图片描述

</head>
<body>
	<div id="app">
		<my-component>你好</my-component>
	</div>
	<template id="first">
		<div>
			<slot></slot>
		</div>
	</template>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.component('MyComponent', {
			template: '#first'
		})
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

示例二：通过v-slot定义插槽对象

在这里插入图片描述

<body>
	<div id="app">
		<my-component>你好
			<template v-solt:second>
				<div>内部结构</div>
			</template>
		</my-component>
	</div>
	<template id="first">
		<div>
			<slot></slot>
		</div>
	</template>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.component('MyComponent', {
			template: '#first'
		})
		var vm = new Vue({
			el: '#app'
		})
		// 在控制台查看插槽内容
		console.log(vm.$children[0].$slots.default[1].children[0].text);
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

6. vm.$attrs

vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style以及被声明的props属性。
在这里插入图片描述
在这里插入图片描述

<body>
	<div id="app">
		<my-component id="test"></my-component>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.component('MyComponent', {
			template: `
				<button @click="showAttrs">查看属性</button>
			`,
			methods: {
				showAttrs() {
					console.log(this.$attrs);
				}
			}
		})
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

三. 全局配置

1. productionTip

Vue.config.productionTip打开或关闭生产信息提示信息，默认为打开状态。

打开生产信息提示信息

在这里插入图片描述

<body>
	<div id="app"></div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = true
	</script>
</body>

关闭生产信息提示信息

在这里插入图片描述

<body>
	<div id="app"></div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

2. silent

Vue.config.silent可以取消Vue日志和警告，默认为false，开启警告功能。

不取消Vue日志和警告

在这里插入图片描述

<body>
	<div id="app">{{msg}}</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.config.silent = false
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

取消Vue日志和警告

在这里插入图片描述

<body>
	<div id="app">{{msg}}</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.config.silent = true
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

3. devtools

Vue.config.devtools表示打开或关闭vue-devtools调试工具。开发版本默认为true，生产版本默认为 false。生产版本设为true可以启用检查。

启用检查

在这里插入图片描述

<body>
	<div id="app"></div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.config.devtools = true
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

关闭检查

在这里插入图片描述

<body>
	<div id="app"></div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.config.devtools = false
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

四. 组件进阶

1. mixins

  • mixins是一种分发Vue组件中可复用功能的方式；
  • mixins对象可以包含任何组件选项，将定义的mixins对象引入组件中即可使用，mixins中的所有选项将会混入到组件自己的选项中。
    在这里插入图片描述
<body>
	<div id="app"></div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		var myMixin = {
			created() {
				this.hello()
			},
			methods: {
				hello() {
					console.log('hello form mixin!');
				}
			}
		}
		var Component = Vue.extend({
			mixins: [myMixin]
		})
		var component = new Component()
		
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

2. render

render()渲染函数：在Vue中可以使用Vue.render()实现对虚拟DOM的操作。在Vue中一般使用template来创建HTML，但这种方式可编程性不强，而使用Vue.render()可以更好地发挥JavaScript的编程能力。
在这里插入图片描述

<body>
	<div id="app">
		<my-component>成功渲染</my-component>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.component('MyComponent', {
			render(createElement) {
				return createElement('p', {
					style: {
						color: 'red',
						fontSize: '16px',
						backgroundColor: '#eee'
					}
				}, this.$slots.default)
			}
		})
		var vm = new Vue({
			el: '#app'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>

3. createElement

createElement：createElement()函数返回的并不是一个实际的DOM元素，它返回的其实是一个描述节点（createNodeDescription）。

  • 第1个参数可以是一个HTML标签名或组件选项对象；
  • 第2个参数是可选的，可以传入一个与模板中属性对应的数据对象；
  • 第3个参数是由createElement()构建而成的子级虚拟节点，也可以使用字符串来生成文本虚拟节点。
    在这里插入图片描述
<body>
	<div id="app">
		<my-component>
			<template v-slot:header>这里是导航栏</template>
			<template v-slot:content>这里是图书展示信息</template>
			<template v-slot:footer>这里是底部信息</template>
		</my-component>
	</div>
		
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
	<script>
		Vue.component('MyComponent', {
			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'
		})
		Vue.config.productionTip = false  // 阻止vue在启动时生成生产提示
	</script>
</body>
养老院一霸ღ
关注
专栏目录
Vue实例属性
liangsaichi的博客
05-21 2373
Vue实例属性 $props:使用这个属性可以接受上级组件向下传递的数据 $options:获取vue实例属性，包含自定义属性 $el:vue实例的根doom元素 $children:获得vue实例的直接子组件 $root:用获取当前组件树的根vue实例 $attrs:可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性。 1.$props 首先做一个小案例： <div id="app"> <p>vm.$props <
vue习题
热门推荐
qq_45179355的博客
06-03 1万+
一 单选题，每道小题1分，共9道小题，9分1. 下面选项中，可以用来创建store实例对象的是（）。A new Vuex.Store({})B new Vue({})C new Vuex({})D new Store({})2. 以下代码 {{this.$store.state.name}}var store = new Vuex.Store({ state:{name:'store'}})var vm = new Vue({...
养老院管理系统.rar
08-06
养老院管理系统代码，使用的mysql数据库:https://download.csdn.net/download/weixin_40490238/11484946
Vue框架学习（五）
qq_46087627的博客
01-14 357
Vue的全局API
Vue(自定义事件)课后总结案例
Zningsir的博客
05-19 182
<p v-color>我喜欢你</p> </div> <script src="../js/vue.js"></script> <script> Vue.directive('color',{ inserted(el){ el.style.background = 'red' } }) const app = new Vue({ el:"#a...
安装插件：Vue.use
tangtian_yes的博客
03-28 691
Vue.use：主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能。插件可以是一个对象或函数，如果是对象，必须提供install()方法，用来安装插件；如果是一个函数，则该函数将被当成install()方法。 （就是在Vue里面使用use安装一个插件，然后再DOM元素里面直接使用） 实现效果： ...
Vue.js前端开发基础与项目实战
最新发布
08-13
在“Vue.js前端开发基础与项目实战”这个主题中，我们将深入探讨Vue.js的核心概念、基本语法以及实际项目的构建过程。 1. **Vue.js核心概念**： - **虚拟DOM**：Vue.js使用虚拟DOM来提高网页更新性能，减少不必要...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
Vue.js开发基础（上）
qq_45443449的博客
04-23 1004
Vue.js一、Vue基础1.用Vue.js在页面上显示“Hello Vue”2.创建Vue实例*Vue实例配置对象*3.Vue数据绑定*绑定样式**常用内置指令* 一、Vue基础 1.用Vue.js在页面上显示“Hello Vue” <body> <div id="app">{{msg}}</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script&gt
Vue.js前端开发 PDF
05-30
1. **基础概念**：Vue.js的基础包括Vue实例、组件系统、模板语法、数据绑定等。Vue实例是应用的核心，负责管理应用的状态和方法。组件是Vue的可复用部分，类似于HTML元素，可以包含自己的视图和数据逻辑。模板语法是...
Vue.js基础（一）
Joyechen1的博客
11-12 69
vue
大家都在看的!VUE第三章课后习题
qq_46556714的博客
10-16 1万+
课后习题 一、 填空题 Vue 实例对象通过 vm.$root方式来获取。 Vue 初始数据通过vm.$data 方式获取。 Vue 中通过 vm.$children获取当前实例的子组件。 Vue 中创建插件提供的方法是install 。 Vue 中通过Vue.directive()创建自定义指令。 二、 判断题 1, Vue 提供的全局 AP 接口 component（）,不能用来注册组件。✖ 2, Vue 中 Vue . config 对象用来实现 Vue 全局配置。✔ 3、 Vue 中 data
Vue自定义插件及使用
"BLOG"
04-14 371
开发插件 在项目中经常会用到Loading框、toast框、dialog框等，这些经常被用的组件我们也都会把它设定成全局组件，其实我们...
养老服务项目
leaders_forerver的专栏
04-22 469
名词解释 服务对象：该平台上的老人 呼叫中心：接听服务对象电话，派单到服务商 服务商：服务商接单，派单到具体的服务人员 服务人员： 服务商下的员工 系统流程 表结构设计 服务商： 服务对象： 服务项目：...
vue-插件
l2461821849的博客
09-22 92
Vue.js 文章目录Vue.js插件安装插件实例 插件 插件通常是用来给 vue 提供扩展功能的一种方式 给 Vue 添加属性和方法 给 Vue 实例 添加属性和方法 添加全局资源：指令、过滤器、组件等 添加配置选项 安装插件 通过全局方法 Vue.use() 使用插件。它需要在调用 new Vue() 启动应用之前完成 Vue.use(插件); 如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参
vue.js基础（2）
Jy123_的博客
09-07 135
Vue指令之v-for和key属性 循环数组，循环对象和循环数组中的对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="
Vue框架学习（六）
qq_46087627的博客
01-15 1029
Vue的实例属性
vue学习笔记（四）——Vue实例以及生命周期
weixin_33976072的博客
03-19 205
1.Vue实例API 1.构造器(实例化) 　var vm = new Vue({　 　　　//选项 　　　|-------DOM（3） 　　　|  　　　　|-------el (提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。) 　　　|  　　　　|-------template (一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元...
vm.$root、vm.$slots、vm.$arrts
tangtian_yes的博客
03-29 1032
vm.$root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身。 vm.$slots就是一个插糟，在组件的中间写入，返回到template的插槽中 vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值