原生js可以用elementui

ElementUI 是一个基于 Vue.js 的组件库，因此如果你使用原生的 JavaScript，是无法直接使用 ElementUI 组件的。但是，你可以使用其它的 CSS 框架（如 Bootstrap 或 Semantic UI），或者手动编写 CSS 样式来实现类似的效果。如果你想使用 ElementUI 的组件，需要使用 Vue.js 框架来开发你的应用程序。

相关问题

原生的vue.js、elementui.js 不使用组件怎么实现header复用

### 回答1：
原生的 Vue.js 和 ElementUI.js 可以使用以下方法来实现复用 header 组件：

1. 建立一个 header 组件文件，在文件中创建一个 Vue 组件，包括 template、script 和 style 三个部分。

2. 在其他组件中引用这个 header 组件，可以使用 Vue 的组件化机制来实现。

例如，建立一个名为 Header 的组件：

<template>
  <div class="header">
    <!-- header 组件的内容 -->
  </div>
</template>

<script>
export default {
  name: 'Header',
  // 组件的选项
}
</script>

<style>
/* header 组件的样式 */
</style>

在其他组件中引用 Header 组件：

<template>
  <div class="other-component">
    <Header />
    <!-- 其他组件的内容 -->
  </div>
</template>

<script>
import Header from './Header.vue'

export default {
  name: 'OtherComponent',
  components: {
    Header
  }
}
</script>

这样，你就可以在其他组件中复用 Header 组件了。

注意：如果你使用的是 ElementUI.js，你还需要在 main.js 中导入 ElementUI，并调用 Vue.use(ElementUI) 来使用 ElementUI 的组件。

### 回答2：
在原生的vue.js和elementui.js中，即使不使用组件的情况下，也可以实现header的复用。下面是一个可能的实现方法：

1. 首先，在vue.js的实例中，定义一个header组件的对象，用于存储header的相关数据和方法。例如：

var headerComponent = {
  data: function() {
    return {
      headerText: 'Page Header'
    };
  },
  methods: {
    handleClick: function() {
      console.log('Clicked on header');
    }
  },
  template: `
    <header>
      <h1>{{ headerText }}</h1>
      <button @click="handleClick">Click Me</button>
    </header>
  `
};

2. 在需要使用header的vue实例中，通过将header组件对象添加到该实例的`components`选项中，即可在模板中引用header组件。例如：

new Vue({
  el: '#app',
  components: {
    'app-header': headerComponent
  }
});

<div id="app">
  <app-header></app-header>
  <!-- 页面内容 -->
</div>

这样，header组件就可以在多个vue实例中进行复用了。可以根据具体需求，修改header组件的数据和方法，以满足不同页面的需求。

需要注意的是，以上方法并没有直接使用elementui.js，而是只使用了vue.js原生的功能。如果需要进一步修改样式，可以在相应的CSS文件中添加样式规则。

### 回答3：
如果不使用组件，即只使用原生的vue.js和elementui.js来实现header的复用，可以按照以下步骤进行操作：

1. 在项目中创建一个单独的vue组件，命名为Header.vue，该组件负责展示header的内容和样式。

2. 在Header.vue组件中，可以使用elementui.js提供的组件或样式来实现header的布局和样式设计。比如可以使用el-row和el-col来进行栅格布局，使用el-menu和el-menu-item来实现菜单导航等功能。

3. 在Header.vue组件中，通过vue的数据绑定和事件监听机制，可以实现header的动态展示和交互功能。比如可以通过定义data属性来动态显示登录用户信息，通过定义methods方法来响应用户点击事件。

4. 在需要使用header的页面中，可以通过引入Header.vue组件来复用header。可以使用vue.js的import语句导入Header.vue组件，然后在页面中使用<Header></Header>标签进行调用。

5. 在实际使用中，可以通过修改Header.vue组件的props属性来实现不同页面中header的差异化展示。比如可以通过props接收不同页面传递的参数，从而动态展示不同的内容和样式。

通过上述步骤，即可在原生的vue.js和elementui.js中实现header的复用功能。虽然没有使用组件，但是仍然可以通过vue的特性和elementui.js提供的样式和组件来实现header的灵活动态展示。

原生的vue.js、elementui.js怎么实现header复用

在 Vue.js 中，你可以使用组件来复用代码。你可以创建一个组件，然后在你需要使用的地方使用它。例如，如果你想要复用一个 header 组件，你可以这样做：

1. 创建一个新的 .vue 文件，例如 header.vue。

2. 在 header.vue 文件中，使用 Vue.js 的模板语法编写 header 组件的 HTML、CSS 和 JavaScript 代码。

3. 在你的主要 Vue.js 应用程序中，使用 import 语句导入 header 组件。

4. 在你的主要 Vue.js 应用程序的组件中，使用 Vue.js 的组件标签来使用 header 组件，例如 <header></header>。

例如，你的 header.vue 文件可能看起来像这样：

<template>
  <header>
    <h1>My Website</h1>
  </header>
</template>

<style>
  header {
    background-color: blue;
  }
</style>

<script>
  export default {
    // header 组件的逻辑
  }
</script>

在你的主要 Vue.js 应用程序中，你可以使用 import 语句导入 header 组件：

import Header from './header.vue'

然后，你可以在你的主要 Vue.js 应用程序的组件中使用 header 组件：

<template>
  <div>
    <Header></Header>
  </div>
</template>

<script>
  import Header from './header.vue'

  export default {
    components: {
      Header
    }
  }
</script>

Element UI 是一个基于 Vue.js 的 UI 组件库，它提供了大量的 UI 组件