整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
程管理模块包含五个页面，分别是登录页面、课程列表页面、课程注册页面、课程信息修改页面和课程详情页面。这些页面使用了HTML、CSS和JavaScript技术，每个页面的布局和样式都是自定义的。
登录页面包含一个表单，用户可以输入用户名和密码进行登录。课程列表页面展示了所有课程的列表，包括课程名称、教师、人数等信息。课程注册页面可以让用户添加新的课程信息，包括课程名称、简介、教师、人数等。课程信息修改页面可以让用户修改已有的课程信息，而课程详情页面则展示了课程的详细信息，包括课程名称、简介、教师、人数、评论等信息。
每个页面都包含最少5条演示数据，以展示页面的基本功能和样式。这些数据可以是真实的课程信息，也可以是模拟的数据。
览器正在逐步的支持原生JavaScript模块。Safari和Chrome的最新版本已经支持它们了，Firefox和Edge也将很快推出。
如果您是一个vue.js用户，那关于JavaScript模块一个很酷的事就是他们允许您编写您的组件到自己的文件中而无需任何多余的构建步骤。
在这篇文章中，我将向您展示如何编写一个JavaScript模块到一个文件中，并在vue.js APP中使用它。您可以在浏览器中就做到这一切而不需要Babel或者Webpack！
当我说到“单文件组件”时，我所说的是一个JavaScript文件，它exports一个完整的组件定义。我说的不是您已经习惯使用的单一的.vue文件。对不起，如果您很失望的话，但我仍然认为这很酷，所以来看一下。
让我们使用Vue-cli的simple模板来试试。没错，不需要WebPack；）
$ vue init simple sfc-simple
本教程完整的源代码在GitHub。（https://github.com/anthonygore/vue-single-file-js-components）
切换到相应的目录并创建我们需要的文件：
$ cd sfc-simple $ touch app.js $ touch SingleFileComponent.js
从index.html中删除内联脚本，改为使用脚本标记链接到我们的模块。请注意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>
这是一个与您创建的任何其他组件一样的组件，因为它是一个模块所以只是export 配置对象：
SingleFileComponent.js
export default {
template: `
<div>
<h1>Single-file JavaScript Component</h1>
<p>{{ message }}</p>
</div>
`,
data() {
return {
message: 'Oh hai from the component'
}
}
}现在我们就可以在Vue的应用中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>
对于像这样的一个简单项目，您只需要在命令行上使用HTTP服务器模块的静态服务器即可：
# This will serve the project directory at localhost:8080 $ http-server
要查看这个应用程序，您当然需要使用支持JavaScript模块的浏览器。我用的是Chrome 61。
如果用户的浏览器不支持JavaScript模块呢？对大多数用户来说是这只是暂时的。
我们可以用nomodule属性脚本标签写的一个简单的错误信息的文件：
<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>一个更好的办法，是使用WebPack打包这个项目。下面这个简单的配置将完成这项工作：
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加载的并不是模块：
因为现在我们的应用程序的两个版本，一个使用本地JavaScript模块系统，另外一个使用Webpack，性能有什么差别吗？
| Size | Time to first meaningful paint | |
|---|---|---|
| JavaScript modules | 80.7 KB | 2460 ms |
| Webpack | 83.7 KB | 2190 ms |
使用模块，系统可以提供较小的项目。然而，该项目的整体负载WebPack更快。
我怀疑预加载会提高模块项目的速度，但是我们这么评判这项工作有点早。
WebPack仍是模块架构的更好选择，但当它了解本地模块的话应该也会很高兴。
汇智网小智翻译文章来自vuejsdevelopers.com。
汇智网提供vue.js 2、Angular 2 & 5、React 等最新在线课程，希望能给大家的学习带来帮助！
般的企业官网都会有产品展示栏或者公司简介展示栏等这些模块，然而在这些模块中为了增强用户体验，也往往会添加一些触发特效，比如鼠标点击出现遮罩层、鼠标经过触发弹层等等，这些效果一般都是源生写比较好，有些为了方便也可以借助于一些现成插件。今天小编就来讲解一个鼠标经过缓慢过渡的CSS3实现的动画效果！有兴趣的小伙伴可以参考，有不足之处可以互动！
先上实现的效果图：
(图一)鼠标未移上去前
(图二)鼠标移上去后
当鼠标移入内容区域后，图二种的红色框区域由上往下、有无显示到右显示的过渡到边框底部！
下面来看看如何实现
直接上代码：
html代码：
（图三）
因为项目中做的是三个展示位，所以这里也展示了3个展示位的代码，练习的时候你们可以用一个列就好！
CSS样式：
（图四）
起主要效果作用的css为图四中的箭头指向处，大家可以跟着测试该例子，希望对你们有帮助，如有错误可以指出来！非常感谢！
*请认真填写需求信息，我们会在24小时内与您取得联系。
