想知道如何在Vue3中使用这些东西吗，其实只需要.....

Vue2 与vue3 最大的区别是vue2使用选项类型api，对比vue3合成型api。
旧得选项型api在代码里分割了不同得属性：data,computed,methods等；
新得合成型api能让我们使用方法来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

想学习更多，请关注个人微信GZH：Magic全靠想象

1、vue3中是setup()方法

1. 在vue2.x的版本中，主要是使用data()来存放数据，method()来存放方法

<script>
    export default {
        data(){
            return {
                data1:value
            }
        },
        method:{
            m1(){
                return value;
            }
        }
    }
</script>

2. 在vue3.x的版本中，使用了setup()方法来代替vue2.x中的data()和method()方法

<script>
    import {ref} from 'vue'
    export default {
        setup(){
            // 给变量赋初始值
            let data1 = value.ref();
            // 单个方法
            let m1 = ()=>{
                return value;
            }
            // 不论是方法，还是变量，都需要return才可以在html中使用
            return {
                data1,m1
            }
        }
    }
</script>

3. 也可以将上面的方法封装起来

封装出来的方法也需要将变量进行return，并且要在setup中进行接收，然后再在setup中进行return才可以使用

<script>
    import {ref} from 'vue';
	// 对特定的方法或者变量进行封装
	const packMethod = ()=>{
        // 单个方法
        let m1 = ()=>{
            return value;
        }
        // 这里同样需要返回方法，或者变量
        return {
            m1
        }
    }
    export default {
        setup(){
            // 给变量赋初始值
            let data1 = value.ref(),{m1} = packMethod();
            
            // 不论是方法，还是变量，都需要return才可以在html中使用，包括装返回的变量和方法
            return {
                data1,m1
            }
        }
    }
</script>

2、vue3中slot具名插槽的使用方法

vue3.x中的插槽与vue2.x中的有两个不同，默认的插槽可以和2.x中一样使用

1、父组件中使用组件指定插槽由 slot=“插槽名称” ----> v-slot:插槽名称

2、在指定标签外面需要包裹一对template标签

3、v-slot:插槽名称需要在template中使用

// 组件代码  组件名称：child
<template>
    <div class="child">
    	<slot name="child_slot"></slot>
    </div>
</template>
<script>
	export default {

	}
</script>

// 引用组件的代码
<template>
	<div class="parent">
        <child>
        	<!--使用teplate来包裹，每一个插槽都需要使用-->
        	<template v-slot:child_slot>
        		<span>我是组件插槽</span>
        	</template>
        </child>
    	
    </div>
</template>
<script> 
	export default {
		components:{
            // 引入组件
            child
        }
	}
</script>

3、vue3中store和router的导入和使用

在vue2.x中可以直接使用$.router或者$.store来获取vuex和router的信息数据

vue3.x中需要直接引入相关方法，并且通过userStore()和userRouter()来使用

1、使用vuex：

import {useStore} from 'vuex';
let store = useStore();

2、使用router：

import {useRouter} from 'vue-router';
let router = useRouter();

4、vue3中router-view的使用

在vue3.x中，修改了transition和keep-alive的使用规则

需要改成下面这样，不允许transition和keep-alive包裹router-view，

<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

以下代码可以直接使用，直接代替原来的<router-view / >

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

但是在进行路由跳转的时候，会有一个页面同时出现两个router-view的情况，需要在transition标签中添加mode

mode：

xxxxxxxxxx /** * @param {Object} th this * @param {Object} msg 显示内容 * @param {Object} time 显示时间 /export function comitLayer(th,msg,time){ th.KaTeX parse error: Expected '}', got 'EOF' at end of input: …ut(()=>{ th.store.commit(“updateLayer”,{layerFlag:false}) },th.$store.state.layer.time1000)}javascript

2、in-out：先进入后离开

5、vue3中使用highlight.js代码块

通过npm下载highlight.js

npm install --save highlight.js
npm install --save @highlightjs/vue-plugin

在main.js中引入

# --- 文件src/main.ts | src/main.js 
# highlight 的样式，依赖包，组件
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'

import { computed, createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 引入代码高亮，并进行全局注册
app.use(hljsVuePlugin)
app.mount('#app')

页面中使用

<!-- 把数据绑定到 `code` 属性-->
<highlightjs autodetect :code="code" />
<!--或者直接将显示的代码写到 `code`中 -->
<highlightjs language='javascript' code="var x = 5;" />

6、在Vue3中使用v-md-editor

下载相关模块

npm i @kangc/v-md-editor@next -S

在main.js中引入,使用代码块之前需要引入highlight，需要先安装highlight模块

// 引入hightlight高亮代码的所有语言
import hljs from 'highlight.js';
// markDown编辑器导入
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
// github主题
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

VMdEditor.use(githubTheme, {
    Hljs: hljs,
});
app.use(VMdEditor);

自定义工具栏的默认值

左侧工具栏
默认值： undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save
名称            说明
undo            撤销
redo            重做
clear           清空
h               标题
bold            粗体
italic          斜体
strikethrough   中划线
quote           引用
ul              无序列表
ol              有序列表
table           表格
hr              分割线
link            链接
image           插入图片
code            代码块
save            保存，点击后触发save事件

右侧工具栏
默认值： preview toc sync-scroll fullscreen
名称            说明
preview         预览
toc             目录导航
sync-scroll     同步滚动
fullscreen      全屏

使用示例

<v-md-editor
            v-model="text"
            placeholder="请使用markdown语法..."
            :height="editor_height"
            left-toolbar="undo redo | h bold table quote clear | save | link code"
            :toolbar="toolbar"
        ></v-md-editor>
<script>
import {ref,onMounted,watch} from 'vue';
export default {
    name:'markDown',
    setup(props){
        let text = ref('');
        watch(()=>props.text,(val)=>{
            text.value = val;
        })
        // markDown工具栏
        let toolbar = {
            save:{
                title:'保存',
                icon: 'v-md-icon-save',
                action(editor){
                    props.saveFun();
                }
            }
        }
        return {
            text,toolbar
        }
    }
}
</script>

7.在vue3中使用v-md-editor的预览

model-value：markdown格式文本

mode：preview预览模式

<v-md-editor v-if="data.length > 0" :model-value="value" mode="preview"></v-md-editor>

想学习更多，请关注个人微信GZH：Magic全靠想象