目前分類:Vue (9)

瀏覽方式: 標題列表 簡短摘要
<template>
   <div
      v-show="showGoTopIcon"
      id="goToTop"
      class='go-to-top'
      @click="scrollToTop"
   >
      <img src="../assets/backtotop.png">
   </div>
</template>
文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣()

// 動畫效果可以在此更改為需要的
const elTransition = 
'0.4s height ease-in-out, 0.4s padding-top ease-in-out, 0.4s padding-bottom ease-in-out';

文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣()

<template>
   <div
      v-show="showGoTopIcon"
      id="goToTop"
      class='go-to-top'
      @click="scrollToTop"
   >
      <img :src="goTopSrc">
   </div>

</template>
文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣()

<template>
    <div>

        <div class="mask full-page">
            <div class="mask-background"> </div>
            <div class="mask-slot">
                <slot />
            </div>
        </div>
    </div>

</template>
文章標籤

bingzhichen 發表在 痞客邦 留言(1) 人氣()

使用VueRouter(SPA頁面)
1.import VueRouter from 'vue-router'
2.Vue.use(VueRouter);

文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣()

因為 Vue CLI 3 不使用 templates ,改用 render,所以無法和 Vue CLI 2一樣直接在index裡面引入使用bootstrap

那要如何使在Vue CLI 3使用bootstrap ?

步驟:

1.安裝 bootstrap 和 bootstrap-vue,兩個都需要安裝

npm i bootstrap  /  yarn add bootstrap

npm i bootstrap-vue  /  yarn add bootstrap-vue

文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣()

vue axios 跨域處理
1.在跟目錄下建立vue.config.js

文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣()

1.在main.js裡面設定axios
以下兩步驟引入axios
引入axios
import Axios from 'axios'
// 引入的Axios掛載到Vue實例上
Vue.prototype.$axios = Axios;

文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣()


基礎指令:
{{ 變量 }} 只能存在當行語句
v-once:只能渲染一次
v-html:解析html結構
v-bind:指定,解析屬性中的對象
v-bind:簡寫為:
v-if / v-else:條件渲染,v-if只有條件為真才渲染元素
v-show:條件渲染,不管初始條件是什麼,元素都會被渲染,只是用簡單的css進行切換(顯示、隱藏)
頻繁切換用v-show,運行時條件很少改變則使用v-if
v-if="XXX"          v-if="show"

文章標籤

bingzhichen 發表在 痞客邦 留言(0) 人氣()