Vue模块在Markdown中的调用

模板语法

{{}}插值函数

在.md文件中，可以使用 Vue 的插值表达式，像下面这样

{{ 1 + 1 }}

2

#

指令

除了像上面那样使用插值表达式，我们还可以使用v-for等指令，下面是一个使用v-for指令的例子

<span v-for="i in 3">{{ i }} </span>

1 2 3

访问网站以及页面的数据

{{ $page }}  <!-- 获取页面数据 -->

{ "title": "Vue模块在Markdown中的调用", "frontmatter": { "title": "Vue模块在Markdown中的调用", "date": "2019-08-08T00:00:00.000Z", "updated": "2020-07-27T00:00:00.000Z", "sidebar": "auto", "categories": [ "代码" ], "tags": [ "MarkDown", "Vue", "扩展语法" ], "comments": true, "keywords": "Vue MarkDown 扩展语法", "permalink": "code/markdown/vueextend", "readingShow": "top" }, "regularPath": "/code/markdown/notes/Markdown%E6%89%A9%E5%B1%95%E8%AF%AD%E6%B3%95Vue.html", "relativePath": "code/markdown/notes/Markdown扩展语法Vue.md", "key": "v-eb7d2acc", "path": "/code/markdown/vueextend/", "headers": [ { "level": 2, "title": "模板语法", "slug": "模板语法" }, { "level": 3, "title": "{{}}插值函数", "slug": "插值函数" }, { "level": 3, "title": "指令", "slug": "指令" }, { "level": 3, "title": "访问网站以及页面的数据", "slug": "访问网站以及页面的数据" }, { "level": 3, "title": "使用组件", "slug": "使用组件" }, { "level": 3, "title": "内置的组件", "slug": "内置的组件" }, { "level": 3, "title": "使用原生JavaScript和CSS", "slug": "使用原生javascript和css" }, { "level": 3, "title": "使用CSS预处理器", "slug": "使用css预处理器" }, { "level": 3, "title": "Algolia搜索", "slug": "algolia搜索" } ] }

使用组件

• VuePress 除了让我们使用内置组件以外，还可以让我们使用自己的组件，
• 在vuepress中是支持编写自定义组件的,并且全局范围内都可以使用
• 它默认所有在 .vuepress/components 中找到的 *.vue 文件将会自动地被注册为全局的异步组件，注册后我们可以直接在.md文件中使用。如：

.
└─ .vuepress
   └─ components
      ├─ my-demo.vue
      ├─ OtherComponent.vue
      └─ Foo
         └─ Bar.vue

在my-demo.vue中输入代码

<template>
  <div>
    <button @click="change">{{buttonName}}</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        buttonName: "点击按钮"
      };
    },
    methods: {
      change() {
        console.log(111);
      }
    }
  };
</script>

你可以直接使用这些组件在任意的 Markdown 文件中（组件名是通过文件名取到的）：

<my-demo/>

<OtherComponent/>

<Foo-Bar/>

如：此处调用<my-demo/>

自定义组件

<template>
  <div class="customer-component">
    todoList:
    <div v-for="item in list" :key="item.id">
      项目：{{item.text}}，状态：{{item.done ? '完成': '进行中'}}
    </div>
  </div>
</template>
<script>
export default {
  name: 'CustomerComponent',
  data () {
    return {
      list: []
    }
  },
  created () {
    this.list = [
      { id: 1, text: 'JavaScript', done: false },
      { id: 2, text: 'HTML', done: false },
      { id: 3, text: 'CSS', done: true },
      { id: 4, text: 'Vue.js', done: true },
      { id: 5, text: 'VuePress', done: true }
    ]
  }
}
</script>

在.md文件中引入，使用自定义组件

临床路径设计

肩袖修补术临床路径

在vuepress中注入全局组件

• fixed.vue
• ShangPic.vue

在/.vuepress/components/ShangPic.vue,创建一个全局的xxxx.vue组件 具体代码如下所示:

<template>
  <div class="shang-wrap">
    <a target="_blank">
      <img height="80" v-if="shangeFlag" class="shange" src="/images/itclanCoder-shang.png" />
    </a>
  </div>
</template>

<script>
export default {
  name: "ShangPic",
  data() {
    return {
      shangeFlag: false
    };
  },

  mounted() {
    window.addEventListener("scroll", this.isShangImg);
  },

  destroyed() {
    window.removeEventListener("scroll", this.isShangImg);
  },

  methods: {
    // 为了计算距离顶部的高度，当高度大于60px,小图标显示，小于60px则隐藏
    isShangImg() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 60) {
        that.shangeFlag = true;
      } else {
        that.shangeFlag = false;
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.shang-wrap {
  width: 170px;
  height: 80px;
  position: fixed;
  bottom: 50px;
  right: 118px;
  z-index: 999999;
  opacity: 1;
  text-align: center;

  img {
    display: inline-block;
    vertical-align: center;
  }
}

@media screen and (max-width: 768px) {
  .shang-wrap img {
    width: 150px;
    height: 80px;
    position: fixed;
    right: 3.5rem;
    bottom: 50px;
    text-align: center;
    z-index: 777;
  }
}
</style>

然后在./vuepress/configs/plugin.js配置插件处

const plugins = [
  [
    {
      name: "page-plugin"
    },
    globalUIComponents: [
      'ShangPic'
    ]
  ]
]

内置的组件

OutboundLink

() 用来表明当前是一个外部链接。在 VuePress 中这个组件会紧跟在每一个外部链接后面。

百度一下

ClientOnly

浏览器的 API 访问限制

https://www.bilibili.com/video/BV1vb411m7NY?p=15

<ClientOnly>
  <my-demo></my-demo>
</ClientOnly>

Content

• Props:
  • pageKey - string, 要渲染的 page 的 hash key, 默认值是当前页面的 key.
  • slotKey - string, 页面的 markdown slot 的 key. 默认值是 default slot.
• Usage：

指定一个指定页面的特定 slot 用于渲染，当你使用 自定义布局 或者自定义主题时，这将非常有用。

<Content/>

参考:

• 全局计算属性 > $page
• Markdown 插槽

Badge(角标) beta 默认主题

• 说明

  内置组件Badge有三个属性需要传递 ，Props：

  • text - string 它指明了角标的内容
  • type - string, 同自定义容器类似，它有三种不同的类型，可选值： "tip"|"warning"|"error"，默认值是： "tip"
  • vertical - string, 它指明了角标同内容的对齐方式，有两个值，可选值： "top"|"middle"，默认值是： "top"

• Usage:你可以在标题中，使用这个组件来为某些 API 添加一些状态：

标题<Badge text="注释1" type="warning"/> <Badge text="注释2"/>
Vue <Badge text="2.5.0+"/> 
Vuex <Badge text="beta" type="warn" vertical="top"/> 
Vue-Resource<Badge text="废弃" vertical="middle" type="error"/>

Vue 2.5.0+

Vuex beta

Vue-Resource废弃

使用原生JavaScript和CSS

注意

如果我们要在原生JS中操作DOM，那么一定要记住VuePress的页面是经过服务端渲染而来，最好是在页面加载完毕之后再操作DOM

VuePress 赋予了我们在.md文件中直接书写原生js和css的能力，它们可以是下面这样的形式

<style>
.box {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  background-color: #58a;
}
</style>
#### 使用原生的JS和CSS
<div id="container"></div>

<script>
window.onload = function() {
  var dom = document.getElementById('container');
  dom.innerHTML = 'box content'
  dom.className = 'box'
}
</script>

以上代码的结果如下图所示

使用CSS预处理器

VuePress 不仅像上面一样赋予我们使用原生JS和CSS的能力，还赋予我们使用CSS预处理器的能力，它内置了相关CSS预处理器的配置，我们只需要安装对应的依赖并使用即可，特别要注意的是，VuePress 内置了Stylus，我们无需安装，直接使用即可，现在让我们使用Stylus来改写上面的例子

<style lang="stylus">
.box
  width: 100%
  height: 100px
  line-height: 100px
  text-align: center
  color: #fff
  background-color: #fb3
</style>
#### 使用原生的JS和CSS
<div id="container"></div>

<script>
window.onload = function() {
  var dom = document.getElementById('container');
  dom.innerHTML = 'box content'
  dom.className = 'box'
}
</script>

使用Stylus预处理器后的结果如下图所示:

Algolia搜索

在基础配置章节我们讲到了内置搜索，内置搜索只会为页面的h2和h3标题建立索引，而如果我们想进行全文搜索，就需要使用到本小结的Algolia搜索了，它的配置可以是下面这样的

module.exports = {
  // 其它配置
  themeConfig: {
    algolia: {
      apiKey: '<API_KEY>',
      indexName: '<INDEX_NAME>'
    }
  }
}

注意

不同于内置搜索的开箱即用，使用Algolia搜索，需要我们将网站提交给它们以建立索引