<template>
<div
v-show="showGoTopIcon"
id="goToTop"
class='go-to-top'
@click="scrollToTop"
>
<img src="../assets/backtotop.png">
</div>
</template>
bingzhichen 發表在 痞客邦 留言(0) 人氣(302)
// 動畫效果可以在此更改為需要的
const elTransition =
'0.4s height ease-in-out, 0.4s padding-top ease-in-out, 0.4s padding-bottom ease-in-out';
bingzhichen 發表在 痞客邦 留言(0) 人氣(186)
<template>
<div
v-show="showGoTopIcon"
id="goToTop"
class='go-to-top'
@click="scrollToTop"
>
<img :src="goTopSrc">
</div>
</template>
bingzhichen 發表在 痞客邦 留言(0) 人氣(624)
<template>
<div>
<div class="mask full-page">
<div class="mask-background"> </div>
<div class="mask-slot">
<slot />
</div>
</div>
</div>
</template>
bingzhichen 發表在 痞客邦 留言(1) 人氣(22)
使用VueRouter（SPA頁面）
1.import VueRouter from 'vue-router'
2.Vue.use(VueRouter);
bingzhichen 發表在 痞客邦 留言(0) 人氣(243)
因為 Vue CLI 3 不使用 templates ，改用 render，所以無法和 Vue CLI 2一樣直接在index裡面引入使用bootstrap
那要如何使在Vue CLI 3使用bootstrap ？
bingzhichen 發表在 痞客邦 留言(1) 人氣(2,767)
vue axios 跨域處理
1.在跟目錄下建立vue.config.js
bingzhichen 發表在 痞客邦 留言(0) 人氣(3,499)
1.在main.js裡面設定axios
以下兩步驟引入axios
引入axios
import Axios from 'axios'
// 引入的Axios掛載到Vue實例上
Vue.prototype.$axios = Axios;
bingzhichen 發表在 痞客邦 留言(0) 人氣(63)
基礎指令：
{{ 變量 }} 只能存在當行語句
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) 人氣(10)
Web前端 (5)