diff --git a/packages/nav-bar/index.js b/packages/nav-bar/index.js
new file mode 100644
index 000000000..279ea11ea
--- /dev/null
+++ b/packages/nav-bar/index.js
@@ -0,0 +1,53 @@
+import { use } from '../utils';
+import Icon from '../icon';
+
+const [sfc, bem] = use('nav-bar');
+
+export default sfc({
+  props: {
+    title: String,
+    fixed: Boolean,
+    leftText: String,
+    rightText: String,
+    leftArrow: Boolean,
+    border: {
+      type: Boolean,
+      default: true
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    }
+  },
+
+  render(h) {
+    return (
+      <div
+        class={[bem({ fixed: this.fixed }), { 'van-hairline--bottom': this.border }]}
+        style={{ zIndex: this.zIndex }}
+      >
+        <div
+          class={bem('left')}
+          onClick={() => {
+            this.$emit('click-left');
+          }}
+        >
+          {this.$slots.left || [
+            this.leftArrow && <Icon class={bem('arrow')} name="arrow-left" />,
+            this.leftText && <span class={bem('text')}>{this.leftText}</span>
+          ]}
+        </div>
+        <div class={[bem('title'), 'van-ellipsis']}>{this.$slots.title || this.title}</div>
+        <div
+          class={bem('right')}
+          onClick={() => {
+            this.$emit('click-right');
+          }}
+        >
+          {this.$slots.right ||
+            (this.rightText && <span class={bem('text')}>{this.rightText}</span>)}
+        </div>
+      </div>
+    );
+  }
+});
diff --git a/packages/nav-bar/index.vue b/packages/nav-bar/index.vue
deleted file mode 100644
index 7c823c224..000000000
--- a/packages/nav-bar/index.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <div
-    :class="[b({ fixed }), { 'van-hairline--bottom': border }]"
-    :style="style"
-  >
-    <div
-      :class="b('left')"
-      @click="$emit('click-left')"
-    >
-      <slot name="left">
-        <icon
-          v-if="leftArrow"
-          :class="b('arrow')"
-          name="arrow-left"
-        />
-        <span
-          v-if="leftText"
-          v-text="leftText"
-          :class="b('text')"
-        />
-      </slot>
-    </div>
-    <div
-      :class="b('title')"
-      class="van-ellipsis"
-    >
-      <slot name="title">{{ title }}</slot>
-    </div>
-    <div
-      :class="b('right')"
-      @click="$emit('click-right')"
-    >
-      <slot name="right">
-        <span
-          v-if="rightText"
-          v-text="rightText"
-          :class="b('text')"
-        />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'nav-bar',
-
-  props: {
-    title: String,
-    fixed: Boolean,
-    leftText: String,
-    rightText: String,
-    leftArrow: Boolean,
-    border: {
-      type: Boolean,
-      default: true
-    },
-    zIndex: {
-      type: Number,
-      default: 1
-    }
-  },
-
-  computed: {
-    style() {
-      return {
-        zIndex: this.zIndex
-      };
-    }
-  }
-});
-</script>
diff --git a/packages/nav-bar/test/__snapshots__/demo.spec.js.snap b/packages/nav-bar/test/__snapshots__/demo.spec.js.snap
index f118ee7c7..e1a96b64b 100644
--- a/packages/nav-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/nav-bar/test/__snapshots__/demo.spec.js.snap
@@ -5,16 +5,16 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-nav-bar van-hairline--bottom" style="z-index:1;">
       <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow" style="color:undefined;font-size:undefined;">
-          <!----></i> <span class="van-nav-bar__text">返回</span></div>
-      <div class="van-ellipsis van-nav-bar__title">标题</div>
+          <!----></i><span class="van-nav-bar__text">返回</span></div>
+      <div class="van-nav-bar__title van-ellipsis">标题</div>
       <div class="van-nav-bar__right"><span class="van-nav-bar__text">按钮</span></div>
     </div>
   </div>
   <div>
     <div class="van-nav-bar van-hairline--bottom" style="z-index:1;">
       <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow" style="color:undefined;font-size:undefined;">
-          <!----></i> <span class="van-nav-bar__text">返回</span></div>
-      <div class="van-ellipsis van-nav-bar__title">标题</div>
+          <!----></i><span class="van-nav-bar__text">返回</span></div>
+      <div class="van-nav-bar__title van-ellipsis">标题</div>
       <div class="van-nav-bar__right"><i class="van-icon van-icon-search" style="color:undefined;font-size:undefined;">
           <!----></i></div>
     </div>