前端vue入门(纯代码)06

news2024/11/9 9:40:44

【04.mixin混入】

  1. 功能：可以把多个组件共用的配置提取成一个混入对象

  2. 使用方式：

    第一步：定义混合并暴露。

    export const mixin ={
    data(){....},
    methods:{....}
    ....
}

    第二步：导入mixin.js【混入】文件，并使用混入。

    • 全局导入：【import {hunhe,hunhe1} from './mixin'】

    • 全局混入：Vue.mixin(xxx)

    • 局部导入：【import { hunhe, hunhe1 } from '../mixin'】

    • 局部混入：mixins:['xxx']

  • **找错误：**导入文件的路径里面不能有空格。

    import Student from './components/Student'
//导入文件的路径里面不能有空格,得向上面那样
import School  from './components/School '

  • ..代表从当前目录【components】后退一级目录：【src】

    import { hunhe, hunhe1 } from '../mixin';

生命周期知识回顾：mounted（载入后）：

a、此时页面中呈现的是经过 Vue 编译过后的DOM。

b、在这个生命周期中，对DOM的操作均是有效的（但尽可能避免在此阶段操作DOM）

Student.vue文件

<template>
	<div>
		<h2 @click="showName">学生姓名：{{ name }}</h2>
		<h2>学生性别：{{ sex }}</h2>
		<h2>学生性别：{{ x }}</h2>
	</div>
</template>

<script>
/* 将文件作为一个整体引入则是使用：import xxx from ‘路径’。
引入文件的一部分或某些部分A,B的时候会使用带{}的方式：
import { A,B } from ‘路径’。 */
// ..代表从当前目录【components】后退一级目录：【src】
// import { hunhe, hunhe1 } from '../mixin';

export default {
	// 变量值:不许用双引号"",只能用单引号''。
	name: 'Student',
	data() {
		console.log(this); //组件Student实例对象VueComponent
		return {
			name: '鸡大宝',
			sex: '不详',
		};
	},
  // hunhe: 方法   ；hunhe1: data数据
  mixins:[hunhe,hunhe1]
}
</script>

<style></style>

School.vue文件

<template>
	<div>
		<h2 @click="showName">学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<h2>学校地址：{{y}}</h2>
	</div>
</template>

<script>
	//引入一个hunhe,hunhe1
	// import {hunhe,hunhe1} from '../mixin'

	export default {
		name:'School',
		data() {
			return {
				name:'小鸡岛杀手职业技术学院',
				address:'小鸡岛',
			}
		},
    // 局部混入
		// mixins:[hunhe,hunhe1],
	}
</script>

App.vue文件

<template>
  <div>
    <Student></Student>
    <hr>
    <School></School>
    <hr>
    <Student></Student>
  </div>
</template>

<script>
//引入Student组件
import Student from './components/Student'
import School  from './components/School'

  export default {
    name:'App',
    components: { Student,School }
  }
</script>

mixin.js文件

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
  // 每创建一个实例对象vm或vc时，都会有一个生命周期
	mounted() {
		console.log('我是mixin里面的mounted!')
	},
}

export const hunhe1={
  data() {
    return {
      x:66,
      y:88,
    }
  },
}

我是mixin里面的mounted! 被打印了5次

  • 因为App组件里写了 2个<Student/>，1个<School/> + 1个<App/> +1个vm【共：5个】

  • 最简单的就是去vue开发者工具去看：

    在这里插入图片描述

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import {hunhe,hunhe2} from './mixin'
//关闭Vue的生产提示
Vue.config.productionTip = false

// 全局混入
Vue.mixin(hunhe)
Vue.mixin(hunhe2)


//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

【05.插件】

​ Vue中自定义的插件，插件就是包含install方法的一个对象，install的第一个参数是Vue构造函数，第二个以后的参数是插件使用者传递的数据，插件对象中的install方法会被vue自动调用。

  1. 功能：主要是用于增强功能，可以把他看作是一个工具库，可以提供很多强大的功能，比如一些强大的自定义指令，一些强大的工具方法，过滤器等。

  2. 本质：包含install方法的一个对象，install方法的第一个参数是Vue构造函数，第二个参数及其以后的参数是插件使用者传递的数据

  3. 定义插件:install = function (Vue, options) { Vue.filter(....)// 添加全局过滤器},

    这里也可以添加其他的，比如自定义指令等，如下所示：

    对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

  4. 使用插件：Vue.use()

    • 通过全局方法Vue.use()使用插件，他需要在你调用new Vue() 启动应用之前完成。

    • Vue.use会自动阻止多次注册相同的插件，所以多次调用也只会注册一次该插件

    • Vue.js官方提供的一些插件，例如vue-router在检测到Vue是可访问的全局变量时是会自动调用Vue.use的

    • 但是 用 Browserify 或 webpack 提供的 CommonJS 模块环境时需要显式的调用

  • 如果use传入过来的是一个对象，则此对象中一定要有一个属性方法是install(){}

    const plugins = {
	  install(Vue){
      Vue.prototype.$http = '我是网络请求@'
		}
export default plugins
    管道符的符号：|

    管道符的作用：是用于两个命令或者多个命令相链接，将前边的命令的执行结果传递到后边的命令

plugins.js文件

export default{
  install(Vue) {
		//全局过滤器
		Vue.filter('mySlice', function (value) {
      // 只保留前4个字符
			return value.slice(0, 4);
		});
    // 或者一行代码【简写】
    // Vue.filter('mySlice', (value) => value.slice(0, 4)),

		//定义全局指令,名称：fbind
		Vue.directive('fbind', {
			// bind()钩子函数只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
			// element：指令所绑定的元素，可以用来直接操作 DOM。
			// binding：一个对象，包含很多property，如：name,value等
			bind(element, binding) {
				// 操作绑定的DOM节点【button】的value==
				// binding.value【fbind:value="name"】此处是name
				element.value = binding.value;
			},
			// inserted：被绑定元素插入【页面】父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
			inserted(element, binding) {
				// 绑定的DOM节点【button】自动聚焦
				element.focus();
			},

			// update：所在组件的 VNode 更新时调用【指令所在的模板被重新解析时】
			updata(element, binding) {
				element.value = binding.value;
			},
		});

		// 定义混入
		Vue.mixin({
			data() {
				return {
					x: 99,
					y: 88,
				};
			},
		});

		//给Vue原型上添加一个EDG方法（vm和vc就都能用了）
		Vue.prototype.EDG = () => {
			alert('夏季赛，EDG被JDG吊打！');
		};
	}
}

Student.vue

<template>
	<div>
		<h2>学生姓名：{{ name}}</h2>
		<h2>学生性别：{{ sex }}</h2>
		<h2>混入配置的data：{{ x }}</h2>
    <input type="text" v-fbind:value="name">
	</div>
</template>

<script>
export default {
	// 变量值:不许用双引号"",只能用单引号''。
	name: 'Student',
	data() {
		return {
			name: '梅花十三梅小姐',
			sex: '女',
		};
	},
}
</script>

School.vue

<template>
	<div>
    <!-- 管道符：将前边的命令的执行结果传递到后边的命令 -->
		<h2>学校名称：{{name | mySlice }}</h2>
		<h2>学校地址：{{address}}</h2>
		<h2>混入配置的data：{{y}}</h2>
    <button @click="haha">测试一个EDG方法</button>
	</div>
</template>

<script>

	export default {
		name:'School',
		data() {
			return {
				name:'小鸡岛杀手职业技术学院',
				address:'小鸡岛',
			}
		},
    methods: {
      haha(){
        this.EDG()
      }
    },
	}
</script>

App.vue

<template>
  <div>
    <Student></Student>
    <hr>
    <School></School>
  </div>
</template>

<script>
//引入Student组件
import Student from './components/Student'
import School  from './components/School'

  export default {
    name:'App',
    components: { Student,School }
  }
</script>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
// 导入插件
import plugins from './plugins'
//关闭Vue的生产提示
Vue.config.productionTip = false

//全局应用（使用）插件
// 也可以传入一个可选的选项对象
Vue.use(plugins,1,2,3)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

【06.style标签上scoped属性】

  • Vue文件中的样式style标签上，有一个特殊的属性：scoped。

  • 当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件【局部样式】，通过该属性，可以使得组件之间的样式不互相污染【重名也没有关系】。

  1. 作用：让样式在局部生效，防止冲突。
  2. 写法：<style scoped>

scoped的原理

  1. 为组件实例生成一个唯一标识，给组件中的每个标签对应的dom元素添加一个标签属性，data-v-xxxx
  2. 给<style scoped>中的每个选择器的最后一个选择器添加一个属性选择器，原选择器[data-v-xxxx]，如：原选择器为.container #id div，则更改后选择器为.container #id div[data-v-xxxx]

转译前的vue代码

<template>
	<div class="example">hello world</div>
</template>
<style scoped>
.example {
	color: red;
}
</style>

转译后：

<template>
	<div class="example" data-v-49729759>hello world</div>
</template>
<style scoped>
.example[data-v-49729759] {
	color: red;
}
</style>

main.js文件

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

App.vue文件

<template>
  <div>
    <h1 class="title">你好啊</h1>
    <Student></Student>
    <hr>
    <School></School>
  </div>
</template>

<script>
//引入Student组件
import Student from './components/Student'
//引入School组件
import School  from './components/School'

export default {
    name:'App',
    components: { Student,School }
  }
</script>

<style scoped>
.title{
 color: red;
}
</style>
  • style有scoped属性：本组件中有title属性，都会把字体设置成红色【局部样式】，但是其他组件里就算有title属性，都不会把字体设置成红色
<style scoped>
.title{
 color: red;
}
</style>
  • style没有scoped属性：所有有title属性，都会把字体设置成红色【全局样式】
  • 全局样式：【如果有两个组件里都设置了class=“title”,后导入的组件会把之前导入的组件的样式覆盖掉】
<style>
 .title{
  color: red;
 }
</style>

Student.vue文件

<template>
	<div class="demo">
		<h2 class="title">学生姓名：{{ name}}</h2>
		<h2 class="xiaojidao">学生性别：{{ sex }}</h2>
	</div>
</template>

<script>
export default {
	// 变量值:不许用双引号"",只能用单引号''。
	name: 'Student',
	data() {
		return {
			name: '梅花十三梅小姐',
			sex: '女',
		};
	},
}
</script>

<!-- 不写lang="css"也行：默认使用CSS -->
<style lang="less" scoped>
// 需要先安装less样式设置：npm i less-loader【nodejs指令】
// 查看依赖包【xxx】有哪些版本の指令：npm view xxx versions
// 【样式嵌套】
  .demo{
    background-color: bisque;
    .xiaojidao{
    font-size: 35px;
  }
  } 
</style>

  • 先安装less样式设置【注意版本兼容性问题】：npm i less-loader【nodejs指令】

  • 选择版本号：npm i less-loader@11【安装11版本的less-loader，默认安装最新版本】

  • 查看依赖包【xxx】有哪些版本の指令：npm view xxx versions

  • 不写lang="css"也行：默认使用CSS。下面设置使用less样式

  • <style lang="less">

School.vue文件

<template>
	<div class="demo">
		<h2 class="title">学校名称：{{name }}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>

export default {
    name:'School',
    data() {
        return {
            name:'小鸡岛杀手职业技术学院',
            address:'小鸡岛',
        }
    },
}
</script>
<style scoped>
.demo{
  background-color: aqua;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/635683.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

动态规划dp —— 20.环形子数组的最大和

动态规划dp —— 20.环形子数组的最大和

因为数组是环形的&#xff0c;所以子数组最大和有两种情况&#xff1a; 一个数组内所以数的和是固定的&#xff0c;如果阴影部分是最大子数组和&#xff0c;那么空白部分就是最小子数组和&#xff0c;因此&#xff1a;第二种情况下&#xff0c;只需要求得最小子数组和&#xff…
阅读更多...
Java虚拟机——垃圾收集算法

Java虚拟机——垃圾收集算法

垃圾收集算法的实现涉及大量的程序细节。这里只重点介绍 分代收集理论 和 几种算法思想及发展过程 3.3.1 分代收集理论 分代收集建立在两个 分代假说之上 弱分代假说 &#xff1a; 绝大多数对象都是朝生夕灭的强分代假说&#xff1a; 熬过越多次垃圾收集过程的对象就越难以…
阅读更多...
chatgpt赋能python：Python与数据库连接的完整指南

chatgpt赋能python：Python与数据库连接的完整指南

Python与数据库连接的完整指南 作为全球最受欢迎的编程语言之一&#xff0c;Python已经被广泛应用于各种领域&#xff0c;特别是与数据库的交互。 Python拥有用于连接各种数据库的强大库和API&#xff0c;其中包括MySQL&#xff0c;Oracle&#xff0c;PostgreSQL等。在这里&am…
阅读更多...
远程控制和原理和实践

远程控制和原理和实践

按理来说&#xff0c;本人不该发表此类专业的文章&#xff0c;但是从鄙人的开发经历出发&#xff0c;让本人斗胆在此对远控软件做一些论述&#xff0c;谈论一点自己的认识。 程序工程代码地址&#xff1a;点击此处下载。 程序分为两个部分&#xff0c;控制端和被控端&#xf…
阅读更多...
【Note7】uboot，

【Note7】uboot，

文章目录 1.uboot1.U-Boot命令之常用命令&#xff1a;7.U-Boot命令之EMMC和SD卡操作命令&#xff1a;一般EMMC和SD卡是同一个东西&#xff0c;没特殊说明&#xff0c;统一MMC来代指EMMC和SD卡8.U-Boot命令之内存操作命令&#xff1a;直接对DRAM进行读写操作&#xff0c;uboot命…
阅读更多...
CMake学习(7): CMake的嵌套

CMake学习(7): CMake的嵌套

博客参考自&#xff1a;爱编程的大丙: https://subingwen.cn/cmake/CMake-primer/ ,仅供学习分享使用 如果项目很大&#xff0c;或者项目中有很多的源码目录&#xff0c;在通过 CMake 管理项目的时候如果只使用一个 CMakeLists.txt&#xff0c;那么这个文件相对会比较复杂&…
阅读更多...
【嵌入式环境下linux内核及驱动学习笔记-（16）linux总线、设备、驱动模型之input框架】

【嵌入式环境下linux内核及驱动学习笔记-（16）linux总线、设备、驱动模型之input框架】

目录 1、Linux内核输入子系统概念导入1.1 输入设备工作机制1.2 运行框架1.3 分层思想 2、驱动开发步骤2.1 在init()或probe()函数中2.2 在exit&#xff08;&#xff09;或remove&#xff08;&#xff09;函数中&#xff1a;2.3 上报事件2.4 input驱动要素导图2.5 input驱动的总…
阅读更多...
代码生成器实现

代码生成器实现

代码生成器实现 实现封装元数据的工具类实现代码生成器的代码编写掌握模板创建的 构造数据模型 需求分析 借助Freemarker机制可以方便的根据模板生成文件&#xff0c;同时也是组成代码生成器的核心部分。对于Freemarker而 言&#xff0c;其强调 数据模型 模板 文件 的思…
阅读更多...
chatgpt赋能python：Python与硬件结合的现实价值

chatgpt赋能python：Python与硬件结合的现实价值

Python与硬件结合的现实价值 Python是当今最受欢迎和广泛使用的编程语言之一&#xff0c;因其易学易用、开放源代码和灵活性而备受欢迎。但是当我们将它与硬件相结合&#xff0c;它能做到什么&#xff1f; 在这篇文章中&#xff0c;我们将向您介绍如何将Python与硬件结合&…
阅读更多...
戴尔外星人m16r1国行中文原厂Windows11系统自带Support Assist OS Recovery恢复出厂设置

戴尔外星人m16r1国行中文原厂Windows11系统自带Support Assist OS Recovery恢复出厂设置

戴尔外星人m16r1国行中文原厂系统自带Support Assist OS Recovery恢复出厂设置 文件地址https://pan.baidu.com/s/1Pq09oDzmFI6hXVdf8Vqjqw?pwd3fs8 提取码:3fs8 支持Support Assist OS recovery型号: 戴尔外星人m18r1国行中文版Windows11系统 戴尔外星人x16r1国行中文版…
阅读更多...
2023/6/9总结

2023/6/9总结

CSS Less嵌套 子元素的选择器可以直接写在父元素里面。 如果不是它的后代元素&#xff0c;比如你想写伪类选择器、交集选择器&#xff0c;需要在前面加&号。 Less运算&#xff1a; 加减乘除都可以&#xff0c;运算符必须用空格隔开。如果俩个元素都有单位&#xff0…
阅读更多...
【SpringBoot 3.x】使用starter整合Druid

【SpringBoot 3.x】使用starter整合Druid

Druid介绍 Druid是阿里巴巴的一个开源项目&#xff0c;号称为监控而生的数据库连接池&#xff0c;在功能、性能、扩展性方面都超过其他例如DBCP、C3P0、BoneCP、Proxool、JBoss DataSource等连接池,而且Druid已经在阿里巴巴部署了超过600个应用&#xff0c;通过了极为严格的考…
阅读更多...
网络作业9【计算机网络】

网络作业9【计算机网络】

网络作业9【计算机网络】 前言推荐网络作业9一. 单选题&#xff08;共12题&#xff0c;36分&#xff09;二. 多选题&#xff08;共1题&#xff0c;3分&#xff09;三. 填空题&#xff08;共2题&#xff0c;10分&#xff09;四. 阅读理解&#xff08;共1题&#xff0c;17分&…
阅读更多...
C++【STL】之string的使用

C++【STL】之string的使用

STL简介 STL是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。STL由六大组件构成&#xff1a;仿函数、算法、迭代器、空间配置器、容器和配接器。 其中各种容器可以很大帮助的提升我们编写程序的效率&#…
阅读更多...
静态NAT配置与验证实验

静态NAT配置与验证实验

静态NAT配置与验证实验 【实验目的】 部署静态NAT。熟悉静态NAT的应用方法。验证配置。 【实验拓扑】 实验拓扑如图所示。 实验拓扑 设备参数如表所示。 设备参数表 设备 接口 IP地址 子网掩码 默认网关 R1 f0/0 192.168.10.1 255.255.255.0 N/A S1/0 10.0.0.1…
阅读更多...
GlyphControl: Glyph Conditional Control for Visual Text Generation

GlyphControl: Glyph Conditional Control for Visual Text Generation

GlyphControl: Glyph Conditional Control for Visual Text Generation (Paper reading) Yukang Yang, Microsoft Research Asia, arXiv2023, Cited: 0, Code, Paper 1. 前言 最近&#xff0c;人们对开发基于扩散的文本到图像生成模型的兴趣日益增长&#xff0c;这些模型能够…
阅读更多...
软件工程开发文档写作教程(11)—需求分析书的编写

软件工程开发文档写作教程(11)—需求分析书的编写

本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl本文参考资料&#xff1a;电子工业出版社《软件文档写作教程》 马平&#xff0c;黄冬梅编著 需求分析书主要内容 按照国家《软件需求说明书GB8567-88》所定义的标准&#xff0c;软件需求…
阅读更多...
2023去水印小程序saas系统源码修复独立版v1.0.3+uniapp前端

2023去水印小程序saas系统源码修复独立版v1.0.3+uniapp前端

&#x1f388; 限时活动领体验会员&#xff1a;可下载程序网创项目短视频素材 &#x1f388; &#x1f389; 有需要的朋友记得关赞评&#xff0c;阅读文章底部来交流&#xff01;&#xff01;&#xff01; &#x1f389; ✨ 源码介绍 一个基于uniapp写的小程序&#xff0c;后端…
阅读更多...
MATLAB | 绘图复刻(九) | 泰勒图及组合泰勒图

MATLAB | 绘图复刻(九) | 泰勒图及组合泰勒图

有粉丝问我这个图咋画&#xff1a; 我一看&#xff0c;这不就泰勒图嘛&#xff0c;就fileexchange上搜了一下泰勒图绘制代码&#xff0c;但是有的代码比较新的版本运行要改很多地方&#xff0c;有的代码需要包含一些压缩包没并没有的别人写的函数&#xff0c;于是我干脆自己写了…
阅读更多...
JAVA-八种基础数据类型和包装类型及相关面试题

JAVA-八种基础数据类型和包装类型及相关面试题

文章目录 前言一、基本数据类型1.1 分类1.2 概念1.3 代码1.4 二维表 二、各基本数据类型间强制转换2.1 为什么Java中有强制转换&#xff1f;2.2 示例代码 三、包装类型3.1 为什么有包装类型&#xff1f;3.2 基本概念3.3 转换方法 四、转换过程中使用的自动装箱和自动拆箱4.1 来…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023