整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
程管理模塊包含五個(gè)頁面，分別是登錄頁面、課程列表頁面、課程注冊(cè)頁面、課程信息修改頁面和課程詳情頁面。這些頁面使用了HTML、CSS和JavaScript技術(shù)，每個(gè)頁面的布局和樣式都是自定義的。
登錄頁面包含一個(gè)表單，用戶可以輸入用戶名和密碼進(jìn)行登錄。課程列表頁面展示了所有課程的列表，包括課程名稱、教師、人數(shù)等信息。課程注冊(cè)頁面可以讓用戶添加新的課程信息，包括課程名稱、簡(jiǎn)介、教師、人數(shù)等。課程信息修改頁面可以讓用戶修改已有的課程信息，而課程詳情頁面則展示了課程的詳細(xì)信息，包括課程名稱、簡(jiǎn)介、教師、人數(shù)、評(píng)論等信息。
每個(gè)頁面都包含最少5條演示數(shù)據(jù)，以展示頁面的基本功能和樣式。這些數(shù)據(jù)可以是真實(shí)的課程信息，也可以是模擬的數(shù)據(jù)。
覽器正在逐步的支持原生JavaScript模塊。Safari和Chrome的最新版本已經(jīng)支持它們了，F(xiàn)irefox和Edge也將很快推出。
如果您是一個(gè)vue.js用戶，那關(guān)于JavaScript模塊一個(gè)很酷的事就是他們?cè)试S您編寫您的組件到自己的文件中而無需任何多余的構(gòu)建步驟。
在這篇文章中，我將向您展示如何編寫一個(gè)JavaScript模塊到一個(gè)文件中，并在vue.js APP中使用它。您可以在瀏覽器中就做到這一切而不需要Babel或者Webpack！
當(dāng)我說到“單文件組件”時(shí)，我所說的是一個(gè)JavaScript文件，它exports一個(gè)完整的組件定義。我說的不是您已經(jīng)習(xí)慣使用的單一的.vue文件。對(duì)不起，如果您很失望的話，但我仍然認(rèn)為這很酷，所以來看一下。
讓我們使用Vue-cli的simple模板來試試。沒錯(cuò)，不需要WebPack；）
$ vue init simple sfc-simple
本教程完整的源代碼在GitHub。（https://github.com/anthonygore/vue-single-file-js-components）
切換到相應(yīng)的目錄并創(chuàng)建我們需要的文件：
$ cd sfc-simple $ touch app.js $ touch SingleFileComponent.js
從index.html中刪除內(nèi)聯(lián)腳本，改為使用腳本標(biāo)記鏈接到我們的模塊。請(qǐng)注意type="module"屬性：
<!DOCTYPE html> <html> <head> <title>Vue.js Single-File JavaScript Component Demo</title> <script src="https://unpkg.com/vue"></script></head><body> <div id="app"></div> <script type="module" src="SingleFileComponent.js"></script> <script type="module" src="app.js"></script></body></html>
這是一個(gè)與您創(chuàng)建的任何其他組件一樣的組件，因?yàn)樗且粋€(gè)模塊所以只是export 配置對(duì)象：
SingleFileComponent.js
export default {
template: `
<div>
<h1>Single-file JavaScript Component</h1>
<p>{{ message }}</p>
</div>
`,
data() {
return {
message: 'Oh hai from the component'
}
}
}現(xiàn)在我們就可以在Vue的應(yīng)用中import并使用它了：
app.js
import SingleFileComponent from 'SingleFileComponent.js';
new Vue({
el: '#app',
components: {
SingleFileComponent
}});index.html
<div id="app"> <single-file-component></single-file-component></div>
對(duì)于像這樣的一個(gè)簡(jiǎn)單項(xiàng)目，您只需要在命令行上使用HTTP服務(wù)器模塊的靜態(tài)服務(wù)器即可：
# This will serve the project directory at localhost:8080 $ http-server
要查看這個(gè)應(yīng)用程序，您當(dāng)然需要使用支持JavaScript模塊的瀏覽器。我用的是Chrome 61。
如果用戶的瀏覽器不支持JavaScript模塊呢？對(duì)大多數(shù)用戶來說是這只是暫時(shí)的。
我們可以用nomodule屬性腳本標(biāo)簽寫的一個(gè)簡(jiǎn)單的錯(cuò)誤信息的文件：
<body>
<div id="app">
<single-file-component></single-file-component>
</div>
<script type="module" src="SingleFileComponent.js"></script>
<script type="module" src="app.js"></script>
<script nomodule>
document.getElementById("app").innerHTML="Your browser doesn't support JavaScript modules :(";
</script></body>一個(gè)更好的辦法，是使用WebPack打包這個(gè)項(xiàng)目。下面這個(gè)簡(jiǎn)單的配置將完成這項(xiàng)工作：
var path=require('path')
var webpack=require('webpack')
module.exports={
entry: './app.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}}生成之后，可以將該包作為回退腳本加載：
<body> ... <script type="module" src="SingleFileComponent.js"></script> <script type="module" src="app.js"></script> <script nomodule src="/dist/build.js"></script></body>
這WebPack版本將在不同瀏覽器中的原生模塊支持。在這里，它是在Firefox中，注意build.js加載的并不是模塊：
因?yàn)楝F(xiàn)在我們的應(yīng)用程序的兩個(gè)版本，一個(gè)使用本地JavaScript模塊系統(tǒng)，另外一個(gè)使用Webpack，性能有什么差別嗎？
| Size | Time to first meaningful paint | |
|---|---|---|
| JavaScript modules | 80.7 KB | 2460 ms |
| Webpack | 83.7 KB | 2190 ms |
使用模塊，系統(tǒng)可以提供較小的項(xiàng)目。然而，該項(xiàng)目的整體負(fù)載WebPack更快。
我懷疑預(yù)加載會(huì)提高模塊項(xiàng)目的速度，但是我們這么評(píng)判這項(xiàng)工作有點(diǎn)早。
WebPack仍是模塊架構(gòu)的更好選擇，但當(dāng)它了解本地模塊的話應(yīng)該也會(huì)很高興。
匯智網(wǎng)小智翻譯文章來自vuejsdevelopers.com。
匯智網(wǎng)提供vue.js 2、Angular 2 & 5、React 等最新在線課程，希望能給大家的學(xué)習(xí)帶來幫助！
般的企業(yè)官網(wǎng)都會(huì)有產(chǎn)品展示欄或者公司簡(jiǎn)介展示欄等這些模塊，然而在這些模塊中為了增強(qiáng)用戶體驗(yàn)，也往往會(huì)添加一些觸發(fā)特效，比如鼠標(biāo)點(diǎn)擊出現(xiàn)遮罩層、鼠標(biāo)經(jīng)過觸發(fā)彈層等等，這些效果一般都是源生寫比較好，有些為了方便也可以借助于一些現(xiàn)成插件。今天小編就來講解一個(gè)鼠標(biāo)經(jīng)過緩慢過渡的CSS3實(shí)現(xiàn)的動(dòng)畫效果！有興趣的小伙伴可以參考，有不足之處可以互動(dòng)！
先上實(shí)現(xiàn)的效果圖：
(圖一)鼠標(biāo)未移上去前
(圖二)鼠標(biāo)移上去后
當(dāng)鼠標(biāo)移入內(nèi)容區(qū)域后，圖二種的紅色框區(qū)域由上往下、有無顯示到右顯示的過渡到邊框底部！
下面來看看如何實(shí)現(xiàn)
直接上代碼：
html代碼：
（圖三）
因?yàn)轫?xiàng)目中做的是三個(gè)展示位，所以這里也展示了3個(gè)展示位的代碼，練習(xí)的時(shí)候你們可以用一個(gè)列就好！
CSS樣式：
（圖四）
起主要效果作用的css為圖四中的箭頭指向處，大家可以跟著測(cè)試該例子，希望對(duì)你們有幫助，如有錯(cuò)誤可以指出來！非常感謝！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
