Vue3重点-个人项

最新推荐文章于 2024-06-27 23:53:10 发布

Wanberr

最新推荐文章于 2024-06-27 23:53:10 发布

阅读量569

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/wang535956800/article/details/122875522

这里写自定义目录标题

本文自用

本文自用

本文作为个人笔记存在。

Provide / Inject

通常，我们从父组件向子组件传递数据（或者说子组件接收父组件传递的数据）时，使用 props。当我们想用父组件向深层子组件传递数据时，需要使用** props** 沿着组件链逐级传递下去，十分麻烦，这时 provide / inject 就可以派上用场。

// 在入口中
app.provide('guide', 'Vue 3 Guide')

// 在子组件中
export default {
  inject: {
    book: {
      from: 'guide'
    }
  },
  template: `<div>{{ book }}</div>`
}

<!-- 父组件 -->
<template>
  <div>
    <button @click="handleChange">按钮</button>
    <child-component></child-component>
  </div>
</template>
<script>
  import ChildComponent from '@/components/child-component'
  import { reactive } from 'vue'
  export default {
    components: {
      ChildComponent
    },
    // 注意：要访问组件实例 property，我们需要将 provide 转换为返回对象的函数，否则不起作用
    provide() {
      return {
        obj: this.obj
      }
    },
    setup() {
      const obj = reactive({name: '对象', age:12})
      const handleChange = () => {
        obj.name = '名称改变了'
      }
      return { obj, handleChange }
    }
  }
</script>

<!-- 孙子组件 sun-component -->
<template>
  <div>
    孙子组件：{{obj.name}}
  </div>
</template>
<script>
  export default {
   //  方式1
    inject: ['obj']，
    setup(){
     //  方式2
      let getFaytherData = inject('obj');
    }
  }
</script>

在应用之间共享配置

在应用之间共享配置 (如组件或指令) 的一种方法是创建工厂函数，如下所示：

import { createApp } from 'vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const createMyApp = options => {
  const app = createApp(options)
  app.directive('focus' /* ... */)

  return app
}

createMyApp(Foo).mount('#foo')
createMyApp(Bar).mount('#bar')

现在，Foo 和 Bar 实例及其后代中都可以使用 focus 指令。

nextTick()

import { nextTick } from 'vue'

nextTick(() => {
  // 一些和 DOM 有关的东西
})

import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'
import { nextTick } from 'vue'

test('an async feature', async () => {
  const wrapper = shallowMount(MyComponent)

  // 执行一些 DOM 相关的任务

  await nextTick()

  // 运行你的断言
})

直接调用 Vue.nextTick() 将导致臭名昭著的 undefined is not a function 错误。

通过这一更改，如果模块打包工具支持 tree-shaking，则 Vue 应用中未使用的全局 API 将从最终的打包产物中排除，从而获得最佳的文件大小。

插件中的用法及优化

如果你的插件依赖到了受影响的 Vue 2.x 全局 API，例如：

const plugin = {
  install: Vue => {
    Vue.nextTick(() => {
      // ...
    })
  }
}

在 Vue 3 中，必须显式导入：

import { nextTick } from 'vue'

const plugin = {
  install: app => {
    nextTick(() => {
      // ...
    })
  }
}

如果使用了 webpack 这样的模块打包工具，这可能会导致 Vue 的源代码输出打包到插件中，而通常情况下，这并不是你所期望的。为了防止发生这种情况，一种常见做法是配置模块打包工具以将 Vue 从最终的打包产物中排除。对于 webpack 来说，你可以使用 externals 配置选项：

// webpack.config.js
module.exports = {
  /*...*/
  externals: {
    vue: 'Vue'
  }
}

这将告诉 webpack 将 Vue 模块视为一个外部库，而不将它打包进来。

key Attribute

对于 v-if/v-else/v-else-if 的各分支项 key 将不再是必须的，因为现在 Vue 会自动生成唯一的 key。

如果你手动提供了 key，那么每个分支都必须使用一个唯一的 key。因此大多数情况下都不需要设置这些 key

<!-- Vue 2.x -->
<div v-if="condition" key="a">Yes</div>
<div v-else key="a">No</div>

<!-- Vue 3.x (推荐方案：移除 key) -->
<div v-if="condition">Yes</div>
<div v-else>No</div>

<!-- Vue 3.x (替代方案：确保 key 始终是唯一的) -->
<div v-if="condition" key="a">Yes</div>
<div v-else key="b">No</div>

在 Vue 2.x 中，template 标签不能拥有 key。不过，你可以为其每个子节点分别设置 key。

<!-- Vue 2.x -->
<template v-for="item in list">
  <div :key="'heading-' + item.id">...</div>
  <span :key="'content-' + item.id">...</span>
</template>

在 Vue 3.x 中，key 则应该被设置在 template 标签上。

<!-- Vue 3.x -->
<template v-for="item in list" :key="item.id">
  <div>...</div>
  <span>...</span>
</template>

类似地，当使用 template v-for 时如果存在使用 v-if 的子节点，则 key 应改为设置在 template 标签上。

<!-- Vue 2.x -->
<template v-for="item in list">
  <div v-if="item.isVisible" :key="item.id">...</div>
  <span v-else :key="item.id">...</span>
</template>

<!-- Vue 3.x -->
<template v-for="item in list" :key="item.id">
  <div v-if="item.isVisible">...</div>
  <span v-else>...</span>
</template>

按键修饰符

不再支持使用数字 (即键码) 作为 v-on 修饰符
不再支持 config.keyCodes

在 Vue 2 中，keyCodes 可以作为修改 v-on 方法的一种方式。

<!-- 键码版本 -->
<input v-on:keyup.13="submit" />

<!-- 别名版本 -->
<input v-on:keyup.enter="submit" />

此外，也可以通过全局的 config.keyCodes 选项定义自己的别名。

Vue.config.keyCodes = {
  f1: 112
}

<!-- 键码版本 -->
<input v-on:keyup.112="showHelpText" />

<!-- 自定义别名版本 -->
<input v-on:keyup.f1="showHelpText" />

config.keyCodes 现在已弃用,因此，现在建议对任何要用作修饰符的键使用 kebab-cased (短横线) 名称。

<!-- Vue 3 在 v-on 上使用按键修饰符 -->
<input v-on:keyup.page-down="nextPage">

<!-- 同时匹配 q 和 Q -->
<input v-on:keypress.q="quit">

移除$listeners

$listeners 对象在 Vue 3 中已被移除。事件监听器现在是 $attrs 的一部分

$attrs就是一个容器对象，这个容器对象会存放:父组件传过来的且子组件未使用props声明接收的数据

祖孙之间的数据传递，需要通过中间的父组件 v-bind="$attrs"做一个桥梁。其实就是这个意思。

在 Vue 2 中，你可以通过 this. $a tt rs 访问传递给组件的 a tt r ib u t e ，以及通过 t hi s .$ listeners 访问传递给组件的事件监听器。结合 inheritAttrs: false，开发者可以将这些 attribute 和监听器应用到根元素之外的其它元素：

<template>
  <label>
    <input type="text" v-bind="$attrs" v-on="$listeners" />
  </label>
</template>
<script>
  export default {
    inheritAttrs: false
  }
</script>

在 Vue 3 的虚拟 DOM 中，事件监听器现在只是以 on 为前缀的 attribute，这样它就成为了 $attrs 对象的一部分，因此 $listeners 被移除了。

<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
// $attrs一般搭配interitAttrs 一块使用
  inheritAttrs: false, // 默认会继承在html标签上传递过来的数据，类似href属性的继承
}
</script>

如果这个组件接收一个 id attribute 和一个 v-on:close 监听器，那么 $attrs 对象现在将如下所示:

{
  id: 'my-input',
  onClose: () => console.log('close 事件被触发')
}

详解 $a tt rs 和$ listeners

被挂载的应用不会替换元素

在 Vue 2.x 中，当挂载一个具有 template 的应用时，被渲染的内容会替换我们要挂载的目标元素。在 Vue 3.x 中，被渲染的应用会作为子元素插入，从而替换目标元素的 innerHTML。

在 Vue 2.x 中，我们为 new Vue() 或 $mount 传入一个 HTML 元素选择器：

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: `
    <div id="rendered">{{ message }}</div>
  `
})

// 或
const app = new Vue({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: `
    <div id="rendered">{{ message }}</div>
  `
})

app.$mount('#app')

当我们把应用挂载到拥有匹配被传入选择器 (在这个例子中是 id=“app”) 的 div 的页面时：

<body>
  <div id="app">
    Some app content
  </div>
</body>

在渲染结果中，上面提及的 div 将会被应用所渲染的内容替换：

<body>
  <div id="rendered">Hello Vue!</div>
</body>

在 Vue 3.x 中，当我们挂载一个应用时，其渲染内容会替换我们传递给 mount 的元素的 innerHTML：

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: `
    <div id="rendered">{{ message }}</div>
  `
})

app.mount('#app')

当这个应用挂载到拥有匹配 id=“app” 的 div 的页面时，结果会是：

<body>
  <div id="app" data-v-app="">
    <div id="rendered">Hello Vue!</div>
  </div>
</body>

移除propsData

propsData 选项之前用于在创建 Vue 实例的过程中传入 prop，现在它被移除了。如果想为 Vue 3 应用的根组件传入 prop，请使用 createApp 的第二个参数。

在 2.x 中，我们可以在创建 Vue 实例的时候传入 prop：

const Comp = Vue.extend({
  props: ['username'],
  template: '<div>{{ username }}</div>'
})

new Comp({
  propsData: {
    username: 'Evan'
  }
})

v3 propsData 选项已经被移除。如果你需要在实例创建时向根组件传入 prop，你应该使用 createApp 的第二个参数：

const app = createApp(
  {
    props: ['username'],
    template: '<div>{{ username }}</div>'
  },
  { username: 'Evan' }
)

在 prop 的默认函数中访问this

生成 prop 默认值的工厂函数不再能访问 this。

取而代之的是：

组件接收到的原始 prop 将作为参数传递给默认函数

inject API 可以在默认函数中使用

import { inject } from 'vue'

export default {
  props: {
    theme: {
      default (props) {
        // `props` 是传递给组件的、
        // 在任何类型/默认强制转换之前的原始值，
        // 也可以使用 `inject` 来访问注入的 property
        return inject('theme', 'default-theme')
      }
    }
  }
}

渲染函数 API

h 现在是全局导入，而不是作为参数传递给渲染函数
更改渲染函数参数，使其在有状态组件和函数组件的表现更加一致
VNode 现在有一个扁平的 prop 结构

2.x 语法

在 2.x 中，render 函数会自动接收 h 函数 (它是 createElement 的惯用别名) 作为参数：

// Vue 2 渲染函数示例
export default {
  render(h) {
    return h('div')
  }
}

3.x 语法

在 3.x 中，h 函数现在是全局导入的，而不是作为参数自动传递。

// Vue 3 渲染函数示例
import { h } from 'vue'

export default {
  render() {
    return h('div')
  }
}

在 3.x 中，由于 render 函数不再接收任何参数，它将主要在 setup() 函数内部使用。这还有一个好处：可以访问在作用域中声明的响应式状态和函数，以及传递给 setup() 的参数。

import { h, reactive } from 'vue'

export default {
  setup(props, { slots, attrs, emit }) {
    const state = reactive({
      count: 0
    })

    function increment() {
      state.count++
    }

    // 返回渲染函数
    return () =>
      h(
        'div',
        {
          onClick: increment
        },
        state.count
      )
  }
}

注册组件

2.x

在 2.x 中，注册一个组件后，把组件名作为字符串传递给渲染函数的第一个参数，它可以正常地工作：

// 2.x
Vue.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      Clicked {{ count }} times.
    </button>
  `
})

export default {
  render(h) {
    return h('button-counter')
  }
}

3.x

在 3.x 中，由于 VNode 是上下文无关的，不能再用字符串 ID 隐式查找已注册组件。取而代之的是，需要使用一个导入的 resolveComponent 方法：

// 3.x
import { h, resolveComponent } from 'vue'

export default {
  setup() {
    const ButtonCounter = resolveComponent('button-counter')
    return () => h(ButtonCounter)
  }
}

插槽统一

此更改统一了 3.x 中的普通插槽和作用域插槽。

this.$slots 现在将插槽作为函数公开
非兼容：移除 this.$scopedSlots

2.x

当使用渲染函数，即 h 时，2.x 曾经在内容节点上定义 slot 数据 property。

// 2.x 语法
h(LayoutComponent, [
  h('div', { slot: 'header' }, this.header),
  h('div', { slot: 'content' }, this.content)
])

此外，可以使用以下语法引用作用域插槽：

// 2.x 语法
this.$scopedSlots.header

3.x

在 3.x 中，插槽以对象的形式定义为当前节点的子节点：

// 3.x Syntax
h(LayoutComponent, {}, {
  header: () => h('div', this.header),
  content: () => h('div', this.content)
})

当你需要以编程方式引用作用域插槽时，它们现在被统一到 $slots 选项中了。

// 2.x 语法
this.$scopedSlots.header

// 3.x 语法
this.$slots.header()

在 3.x 中，将所有 this.$scopedSlots 替换为 this.$slots。
将所有 this.$slots.mySlot 替换为 this.$slots.mySlot()。

过渡的 class 名更改

过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from

2.x 语法

在 v2.1.8 版本之前，每个过渡方向都有两个过渡类：初始状态与激活状态。

在 v2.1.8 版本中，引入了 v-enter-to 来定义 enter 或 leave 变换之间的过渡动画插帧。然而，为了向下兼容，并没有变动 v-enter 类名：

.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-leave,
.v-enter-to {
  opacity: 1;
}

这样做会带来很多困惑，类似 enter 和 leave 含义过于宽泛，并且没有遵循类名钩子的命名约定。

3.x 语法

为了更加明确易读，我们现在将这些初始状态重命名为：

v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}

在这里插入图片描述
<transition> 组件的相关 prop 名称也发生了变化：

leave-class 已经被重命名为 leave-from-class (在渲染函数或 JSX 中可以写为：leaveFromClass)
enter-class 已经被重命名为 enter-from-class (在渲染函数或 JSX 中可以写为：enterFromClass)

Transition 作为根节点

当使用 <transition> 作为根结点的组件从外部被切换时将不再触发过渡效果。

2.x

在 Vue 2 中，通过使用 <transition> 作为一个组件的根节点，过渡效果存在从组件外部触发的可能性：

<!-- 模态组件 -->
<template>
  <transition>
    <div class="modal"><slot/></div>
  </transition>
</template>

<!-- 用法 -->
<modal v-if="showModal">hello</modal>

切换 showModal 的值将会在模态组件内部触发一个过渡效果。

这是无意为之的，并不是设计效果。一个 <transition> 原本是希望被其子元素触发的，而不是 <transition> 自身。

这个怪异的现象现在被移除了。

Transition Group 根元素

<transition-group> 不再默认渲染根元素，但仍然可以用 tag attribute 创建根元素。

2.x

在 Vue 2 中，像其它自定义组件一样，需要一个根元素。默认的根元素是一个，但可以通过 tag attribute 定制。

<transition-group tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</transition-group>

3.x

在 Vue 3 中，我们有了片段的支持，因此组件不再需要根节点。所以，<transition-group> 不再默认渲染根节点。

如果像上面的示例一样，已经在 Vue 2 代码中定义了 tag attribute，那么一切都会和之前一样
如果没有定义 tag attribute，而且样式或其它行为依赖于 <span> 根元素的存在才能正常工作，那么只需将 tag="span" 添加到 <transition-group>：

<transition-group tag="span">
  <!-- -->
</transition-group>

移除v-on.native修饰符

v-on 的 .native 修饰符已被移除。

2.x

默认情况下，传递给带有 v-on 的组件的事件监听器只能通过 this.$emit 触发。要将原生 DOM 监听器添加到子组件的根元素中，可以使用 .native 修饰符：

<my-component
  v-on:close="handleComponentEvent"
  v-on:click.native="handleNativeClickEvent"
/>

3.x

v-on 的 .native 修饰符已被移除。同时，新增的 emits 选项允许子组件定义真正会被触发的事件。

因此，对于子组件中未被定义为组件触发的所有事件监听器，Vue 现在将把它们作为原生事件监听器添加到子组件的根元素中 (除非在子组件的选项中设置了 inheritAttrs: false)。

<my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>

// MyComponent.vue
<script>
  export default {
    emits: ['close']
  }
</script>

v-model

非兼容：用于自定义组件时，v-model prop 和事件默认名称已更改：
– prop：value -> modelValue；
– 事件：input -> update:modelValue
非兼容：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可在 v-model 上加一个参数代替；
新增：现在可以在同一个组件上使用多个 v-model 绑定
新增：现在可以自定义 v-model 修饰符。

2.x 语法

在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件：

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

如果想要更改 prop 或事件名称，则需要在 ChildComponent 组件中添加 model 选项：

<!-- ParentComponent.vue -->

<ChildComponent v-model="pageTitle" />

// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

所以，在这个例子中 v-model 是以下的简写：

<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

使用 v-bind.sync

在某些情况下，我们可能需要对某一个 prop 进行“双向绑定”(除了前面用 v-model 绑定 prop 的情况)。为此，我们建议使用 update:myPropName 抛出事件。例如，对于在上一个示例中带有 title prop 的 ChildComponent，我们可以通过下面的方式将分配新 value 的意图传达给父级：

this.$emit('update:title', newValue)

然后父组件可以在需要时监听该事件，并更新本地的 data property。例如：

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

为了方便起见，我们可以使用 .sync 修饰符来缩写，如下所示：

<ChildComponent :title.sync="pageTitle" />

3.x

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

v-model 参数

若需要更改 model 的名称，现在我们可以为 v-model 传递一个参数，以作为组件内 model 选项的替代：

<ChildComponent v-model:title="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

在这里插入图片描述
这也可以作为 .sync 修饰符的替代，而且允许我们在自定义组件上使用多个 v-model。

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

<!-- 是以下的简写： -->

<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外，现在 3.x 还支持自定义修饰符：

<ChildComponent v-model.capitalize="pageTitle" />

检查你的代码库中所有使用 .sync 的部分并将其替换为 v-model

<ChildComponent :title.sync="pageTitle" />

<!-- 替换为 -->

<ChildComponent v-model:title="pageTitle" />

对于所有不带参数的 v-model，请确保分别将 prop 和 event 命名更改为 modelValue 和 update:modelValue

<ChildComponent v-model="pageTitle" />

// ChildComponent.vue

export default {
  props: {
    modelValue: String // 以前是`value：String`
  },
  emits: ['update:modelValue'],
  methods: {
    changePageTitle(title) {
      this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
    }
  }
}

v-if > v-for 的优先级

两者作用于同一个元素上时，v-if 会拥有比 v-for 更高的优先级。

v-bind

v-bind 的绑定顺序会影响渲染结果。

2.x 语法

在 2.x 中，如果一个元素同时定义了 v-bind="object" 和一个相同的独立 attribute，那么这个独立 attribute 总是会覆盖 object 中的绑定。

<!-- 模板 -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 结果 -->
<div id="red"></div>

3.x 语法

在 3.x 中，如果一个元素同时定义了 v-bind="object" 和一个相同的独立 attribute，那么绑定的声明顺序将决定它们如何被合并。换句话说，相对于假设开发者总是希望独立 attribute 覆盖 object 中定义的内容，现在开发者能够对自己所希望的合并行为做更好的控制。

<!-- 模板 -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 结果 -->
<div id="blue"></div>

<!-- 模板 -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- 结果 -->
<div id="red"></div>

VNode 生命周期事件

在 Vue 2 中，我们可以通过事件来监听组件生命周期中的关键阶段。这些事件名都是以 hook: 前缀开头，并跟随相应的生命周期钩子的名字。

在 Vue 3 中，这个前缀已被更改为 vnode-。额外地，这些事件现在也可用于 HTML 元素，和在组件上的用法一样。

2.x语法

在 Vue 2 中，这些事件名和相应的生命周期钩子一致，并带有 hook: 前缀：

<template>
  <child-component @hook:updated="onUpdated">
</template>

3.x 语法

在 Vue 3 中，事件名附带的是 vnode- 前缀：

<template>
  <child-component @vnode-updated="onUpdated">
</template>

或者在驼峰命名法的情况下附带前缀 vnode：

<template>
  <child-component @vnodeUpdated="onUpdated">
</template>

绝大多数情况下只需要修改前缀。生命周期钩子 beforeDestroy 和 destroyed 已经分别被重命名为 beforeUnmount 和 unmounted，所以相应的事件名也需要更新。

侦听数组

当侦听一个数组时，只有当数组被替换时才会触发回调。如果你需要在数组被改变时触发回调，必须指定 deep 选项。

3.x 语法

当使用 watch 选项侦听数组时，只有在数组被替换时才会触发回调。换句话说，在数组被改变时侦听回调将不再被触发。要想在数组被改变时触发侦听回调，必须指定 deep 选项。

watch: {
  bookList: {
    handler(val, oldVal) {
      console.log('book list changed')
    },
    deep: true
  },
}

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片:

居中的图片: Alt

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash