Vue学习笔记

1. 什么是Vue

Vue.js是一款流行的JavaScript框架，用于构建用户界面和单页面应用程序（SPA）。它具有轻量级、灵活和易学的特点，同时提供了诸多功能强大的工具。

2. 指令修饰符

指令修饰符是用于改变指令行为的特殊后缀，例如.prevent用于阻止默认事件、.stop用于停止事件冒泡等。

3. 容器

Vue中的容器指的是用来包裹和组织页面内容的元素，例如<div>、<section>等。

4. 基本构建

Vue应用的基本构建包括创建Vue实例、数据绑定、指令的使用以及组件的构建和使用。

4.1 示例

<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>

5. 脚手架

脚手架是用来快速搭建Vue项目的工具，例如Vue CLI。

6. 创建脚手架

创建Vue脚手架可以通过Vue CLI工具来实现，通过命令行输入vue create <project-name>即可创建一个新的Vue项目。

7. 脚手架结构理解

一个Vue脚手架项目通常包含public、src、node_modules等文件夹，其中src文件夹包含项目的源代码。

8. 将一切组件化

Vue鼓励将页面上的各个部分抽象为组件，以便于复用和维护。

9. 局部和全局定义

Vue组件可以在全局范围内注册，也可以在其他组件内部进行局部注册。

10. 父传子 子传父 数据

在Vue中，父组件通过props向子组件传递数据，子组件则通过$emit向父组件发送事件。

11. 打包传递 prom 串子

这部分内容可能需要进一步说明，是否指代组件间通信？

12. 路由

Vue Router是Vue.js官方的路由管理器，用于构建SPA应用的路由系统。

13. 子路由 一级路由 二级路由 路由页面展示

Vue Router支持嵌套路由，可以实现一级路由下的子路由，或者更深层次的嵌套。

index.js:

import Vue from 'vue'
import VueRouter from "vue-router";
// 导入Vue页面
import Article from "../views/Article.vue";
import ArticleDetail from "../views/ArticleDetail.vue";
import Collect from "../views/Collect.vue";
import Layout from "../views/Layout.vue";
import Like from "../views/Like.vue";
import User from "../views/User.vue";
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
// 一级路由
{path:'/',component:Layout,
// 二级路由
children:[
{path:'/article',component:Article},
{path:'/collect',component:Collect},
{path:'/like',component:Like},
{path:'/user',component:User}
]
},
{path:'./articleDetail',component:ArticleDetail}
]
})
export default router

使用路由的方式:

<template>
<div class="h5-wrapper">
<div class="content">
<!-- 展示路由 -->
<router-view></router-view>
</div>
<nav class="tabbar">
<!-- 使用路由 -->
<!-- 当点击链接的时候会 匹配 index.js里绑定好的路由链接然后展示在上方的router-view -->
<router-link to="/article">面经</router-link>
<router-link to="/collect">收藏</router-link>
<router-link to="/like">喜欢</router-link>
<router-link to="/user">我的</router-link>
</nav>
</div>
</template>

14. 路由传值

在Vue Router中可以通过路由参数或路由元信息进行路由间的数据传递。

路由动态传参接收

this.$route.params.值名

路由动态传参

this.$router.push(值名);

articleDetail是路由路径 id是要传递的值
this.$router.push({ path:`/articleDetail/${id}`});

15.插槽

Vue.js 2 中的插槽（slot）是一种强大的特性，它允许你在父组件中插入内容到子组件中。插槽使得组件的结构更加灵活，可以根据需要插入不同的内容。下面是一个简单的例子来说明Vue.js 2中插槽的使用方法：

首先，在父组件中定义一个带有插槽的子组件。

<!-- ParentComponent.vue -->
<template>
<div>
<ChildComponent>
<!-- 这里是插槽的内容 -->
<p>这是插槽中的内容</p>
</ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
}
}
</script>

然后，在子组件中通过<slot>标签指定插槽的位置。

<!-- ChildComponent.vue -->
<template>
<div>
<h2>子组件</h2>
<slot></slot> <!-- 这里定义了插槽 -->
</div>
</template>
<script>
export default {
name: 'ChildComponent'
}
</script>

在这个例子中，<slot> 标签表示插槽的位置。当在父组件中使用 <ChildComponent> 时，插槽中的内容会被替换成父组件中的内容。

最终的渲染结果会是这样：

<div>
<h2>子组件</h2>
<p>这是插槽中的内容</p>
</div>

这就是Vue.js 2中插槽的简单介绍和使用方法。通过使用插槽，你可以轻松地在父组件中传递内容到子组件中，并且使得组件的结构更加灵活。