請問有人用vue2或vue3做過一頁式網頁嗎?

vue.js

帥帥大阿湯 2023-02-17 10:10:46 ‧ 1521 瀏覽

分享至

各位大大好!小弟，最近學vue.js，新手菜鳥，不好意思，請問請問有人用vue2或vue3做過一頁式blog網頁嗎?是否願意提供小弟參考資料或youtube教學影片呢?我比較想用vue的cdn做

froce iT邦大師 1 級 ‧ 2023-02-17 10:13:50 檢舉

你的一頁式是FB那種還是SPA(Single Page Aplication)?
FB哪種隨便做就行了。
SPA不要用CDN做。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

JamesDoge

iT邦高手 1 級 ‧ 2023-02-17 10:23:42

首先，在HTML文件中引入Vue.js的CDN：

<script src="https://unpkg.com/vue@next"></script>

在Vue實例中定義頁面內容：

<div id="app">
  <nav>
    <ul>
      <li><a href="#section-1">Section 1</a></li>
      <li><a href="#section-2">Section 2</a></li>
      <li><a href="#section-3">Section 3</a></li>
    </ul>
  </nav>
  <div id="section-1">
    <h2>Section 1</h2>
    <p>This is the content for section 1.</p>
  </div>
  <div id="section-2">
    <h2>Section 2</h2>
    <p>This is the content for section 2.</p>
  </div>
  <div id="section-3">
    <h2>Section 3</h2>
    <p>This is the content for section 3.</p>
  </div>
</div>

3.在JavaScript文件中建立Vue實例：

const app = Vue.createApp({
  data() {
    return {
      currentSection: '',
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const sections = document.querySelectorAll('div[id^="section-"]');
      for (const section of sections) {
        const rect = section.getBoundingClientRect();
        if (rect.top >= 0 && rect.top < window.innerHeight) {
          this.currentSection = section.id;
          break;
        }
      }
    },
  },
});

4.將Vue實例掛載到HTML文件中：

app.mount('#app');

5.加上CSS樣式：

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
}

nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin: 0 10px;
}

nav a {
  color: #fff;
}

div {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
}

#section-1 {
  background-color: #f00;
}

#section-2 {
  background-color: #0f0;
}

#section-3 {
  background-color: #00f;
}

完成了