一些 运用到 vue 框架的前端例子 (借鉴于菜鸟教程 https://www.runoob.com/vue2/vue-examples.html )
一, 做一个导航栏 (代码如下)
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- 导航栏
- </title>
- <script src="vue.min.js">
- </script>
- <style>
- * { margin: 0; padding: 0; } body { /* 这种特色的字样 */ font: 15px/1.3 'Open
- Sans', sans-serif; color: #5e5b64; text-align: center; } nav { margin:
- 100px auto; /* 这里采用的排列方式是 flex 弹性盒子 (个人觉得非常好用的一个排版) */ display: flex; /*
- 横向排版 */ flex-direction: row; /* 超出范围 即换行 */ flex-wrap: wrap; box-shadow:
- 0 1px 1px #ccc; border-radius: 2px; background-color: #5597b4; width: 600px;
- } nav div { text-align: center; /* 每个 div 都 为 1 的比例 */ flex: 1; background-color:
- #389dc1; padding: 18px 30px; font-size: 16px; font-weight: bold; /* 区块中字母大写
- */ text-transform: uppercase; background-color: transparent; text-decoration:
- none !important; color: #fff !important; /* CSS 动画 背景颜色改变为 0.25s 实现, 适应不同的浏览器
- */ -webkit-transition: background-color 0.25s; -moz-transition: background-color
- 0.25s; transition: background-color 0.25s; cursor: pointer; } nav:hover
- { text-decoration: none; } p { font-size: 22px; font-weight: bold; color:
- #7d9098; } p b { color: #ffffff; display: inline-block; padding: 5px, 10px;
- background-color: #c4d7e0; border-radius: 2px; text-transform: uppercase;
- font-size: 18px; } /* 一种利用到 Vue 的更改背景色的方式.. */ nav.home .home, nav.projects
- .projects, nav.services .services, nav.contact .contact { background-color:
- #e35885; }
- </style>
- </head>
- <body>
- <div id="main">
- <!-- 激活的菜单样式为 active 类 -->
- <!-- 为了阻止链接在点击时跳转, 我们使用了 "prevent" 修饰符 (preventDefault 的简称). -->
- <nav v-bind:class="active" @click.parent>
- <!-- 当菜单上的链接被点击时, 我们调用了 showSelect 方法, 该方法在 Vue 实例中创建. -->
- <div class="home" @click="showSelect('home')">
- HOME
- </div>
- <div class="projects" @click="showSelect('projects')">
- PROJECTS
- </div>
- <div class="services" @click="showSelect('services')">
- SERIVCES
- </div>
- <div class="contact" @click="showSelect('contact')">
- CONTACT
- </div>
- </nav>
- <!-- 以下 "active" 变量会根据当前选中的值来自动变换 -->
- <div>
- <p>
- 您选择了
- < b>
- {{active}} 菜单
- </b>
- </p>
- </div>
- </div>
- </body>
- <script>
- // 创建一个新的 Vue 实例
- var demo = new Vue({
- // DOM 元素, 挂载视图模型
- el: '#main',
- // 定义属性, 并设置初始值
- data: {
- active: 'home'
- },
- // 点击菜单使用的函数
- methods: {
- showSelect: function(item) {
- // 模型改变, 视图会自动更新
- this.active = item;
- }
- },
- })
- </script>
- </HTML>
View Code
样例
很久, 没写前端代码了, 有点吃力, 不过今天借着学习 Vue 框架的机会, 稍微复习了下. 再接再厉
LovelyCat
来源: http://www.bubuko.com/infodetail-3408268.html