Vue 2.0 进阶知识之学习笔记

smobee

已于 2023-02-23 23:27:35 修改

阅读量194

点赞数

分类专栏： Vue 文章标签： vue.js 学习 javascript

于 2023-02-17 23:26:23 首次发布

本文链接：https://blog.csdn.net/wg8ofk08/article/details/129095152

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

系列文章目录

提示：阅读本章之前，请先阅读目录

前言

Vue组件

在这里插入图片描述


<div id="root">
	<school-view></school-view>
	<Student></Student>
	<Student />
	<student />
</div>


const school = Vue.extend({
	template: `
		<h1>{{name}}</h1>
	`,
	// 这里写成函数式，是为了让组件被引用时，都是独立的数据
	data() {
		return {
			name: "xiaoxueschool"
		}
	}
})

const student = Vue.extend({
	template: `
		<h2>{{name}} - {{age}}</h2>
	`,
	data() {
		return {
			name: "xiaoming",
			age: 18
		}
	}
})

const vm = new Vue({
	el: "#root",
	components: {
		'school-view': school,
		student
	}
})

// 注册全局组件

const global = Vue.extend({
	name: "myNameIsGlobal",
	template: `
		<div>hello</div>
	`		
})

Vue.component('hello', hello)

// 其实可以不写Vue.extend，因为在注册组件的时候，vue会自动判断，如果不是一个extend对象，就会自动帮你调用一次extend

const global = {
	name: "myNameIsGlobal",
	template: `
		<div>hello</div>
	`		
}

App 嵌套


<div id="root"></div>


const a = Vue.extend({
	template: `
		<div>Hello i am is a</div>
	`
})

const b = Vue.extend({
	template: `
		<div>Hello i am is b</div>
		// 我这里嵌套着a
	`,
	components: { a }
})

const c = Vue.extend({
	template: `
		<div>Hello i am is c</div>
	`
})

const app = Vue.extend({
	template: `
		<b></b>
		<c></c>
	`,
	components: { b, c }
})

const vm = new Vue({
	template: `
		<app></app>
	`,
	components: { app }
})

VueComponent

在这里插入图片描述

组件本质上是一个VueComponent构造函数，他会出现在vm的children

每一个组件，VueComponent都是全新的

因为从源码上，是通过 var = function VueComponent(){}，然后return var返回回来的

Vue内置关系，原型对象

在这里插入图片描述


Vue.prototype.x = 99

const school = Vue.component({
	template: `
		<div>hello</div>
		<button @click="inputValue">输出x</button>
	`,
	methods: {
		inputValue() {
		// 经过Vue原型链，自动找到Vue的prototype的x值
			console.log(this.x)
		}
	}
})

const vm = new Vue({
	template: `
		<school></school>
	`,
	components: {
		school
	}
})

Vue单文件项目结构

在这里插入图片描述
index.html 网站根文件

<html>
    <header>
        <title>xmf的Vue学习</title>
    </header>
    <body>
        <div id="root"></div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
        <script src="./main.js"></script>
    </body>
</html>

main.js Vue的js主函数，引入App.vue

import App from './App.vue'

const vm = new Vue({
    el: "#root",
    template:  `
        <App></App>
    `,
    components: {
        App
    }
})

App.vue 这个是Vue项目的启动vue文件，入口

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

<script>
    import School from './School.vue'
    import Student from './Student.vue'
    export default {
        components: {
            School,
            Student
        }
    }
</script>

School.vue 组件

<template>
    <div>
        <div>大家好，我是{{schoolName}}</div>
    </div>
</template>

<script>
export default {
    name: "School",
    data() {
        return {
            schoolName: "Smobee Scholl"
        }
    },
}
</script>

<style>

</style>

Student.vue 组件

<template>
    <div>
        <div>大家好，我是{{studentName}}</div>
    </div>
</template>

<script>
export default {
    name: "Student",
    data() {
        return {
            studentName: "smobee"
        }
    },
}
</script>

<style>

</style>

Vue-cli 脚手架

第一步，安装好npm

第二步，配置镜像

npm config set registry https://registry.npm.taobao.org

第三步，安装vue-cli

npm install -g @vue/cli

第四步，创建项目

vue create xxxxx

第五步，启动项目

npm run serve

关于脚手架vue-cli，默认用的vue版本

在这里插入图片描述

module": “dist/vue.runtime.esm.js”

用的是阉割版的vue，没有模板解析的功能

所以，会报错

在这里插入图片描述

解决方法：

使用完整版的vue

在这里插入图片描述

使用render函数

在这里插入图片描述
当然，可以简写

在这里插入图片描述

配置vue.config.js

输出Vue的配置项

vue inspect > output.js

在这里插入图片描述

ref 属性

在这里插入图片描述

props 属性

在这里插入图片描述

组件外，如果要传递数字
<School name="hello" :age="18+1"></School>

并且，里面的组件，是不可以修改传递进来的prop的

可以通过data赋值，比如name
data() {
	return {
	// 因为props是优先加载的，所以这里可以直接拿到props的数据
		myName: this.name
	}
}

mixin 混入

在这里插入图片描述

自定义插件

在这里插入图片描述

style的scoped

在这里插入图片描述

npm view webpack versions

查看某个插件的全部版本

在这里插入图片描述
安装less-loader指定版本

在这里插入图片描述
使用

在这里插入图片描述

统计函数，reduce

在这里插入图片描述

const list = [1,2,3,4,5,6]

// pre是上一次的返回值，num是每条数据，list中有几条数据，这里就会执行几次，，后面那个0参数，是作为初始值
const count = list.reduce((pre, num)= > {
	return pre + (num% 2 === 0 ? 1 : 0)
}, 0)

上面的简写
const count = list.reduce((pre, num)= > return pre + (num% 2 === 0 ? 1 : 0), 0)

自定义事件

在这里插入图片描述

<School @hello="handleHello">
</School>

methods: {
	handleHello(name) {
		console.log("我收到了name")
	},
	handleHello(name,age,sex) {
		console.log("我收到了name")
	},
	// 利用解包，多参数
	handleHello(name, ...params) {
		console.log("我收到了params，并且是一个数组", params)
	}
}

// 里面的子组件是通过this.$emit("自定义事件名"，传参)来触发

// 灵活写法，通过ref，来绑定事件

<Student ref="student"></Student>


mouted() {
	this.$refs.student.$on("hello", this.handleHello)
	// 只触发一次
	this.$refs.student.$once("hello", this.handleHello)
},
methods: {
	handleHello() {
		console.log("我被触发了")
	}
}

解绑自定义事件

// 解绑单个
this.$off("hello")

// 解绑多个
this.$off(["hello", "demo"])

// 全部解绑
this.$off()

自定义事件注意

在这里插入图片描述

<Student @click="onClick"></Student>

//这样是无法触发click，因为也是会把click当做自定义事件

// 解决方法1
this.$emit("click")

// 解决方法2
<Student @click.native="onClick"></Student>