vue 基础 实例

最新推荐文章于 2022-08-29 17:06:26 发布
最新推荐文章于 2022-08-29 17:06:26 发布
阅读量256 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/healer_jjj/article/details/79013151
版权
<!DOCTYPE html >
< html lang= "zh-cn" >
   < head >
     < meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
< title ></ title >
     < style >
       ul {
         padding: 0;
         margin: 0;
         list-style: none;
      }
       .wrap {
         width: 384px;
         height: 707px;
         background: url( ./imgs/bg1.png) no-repeat center center;
         margin: 0 auto;
         position: relative;
      }

       .list {
         width: 280px;
         position: absolute;
         left: 46px;
         top: 64px;
      }
       .list h2 {
         height: 48px;
         font: 14px/ 48px arial;
         color: #fff;
         background: rgba( 0, 0, 0, .8);
         box-sizing: border-box;
         padding-left: 10px;
      }
       .list h2:nth-of-type( 1 ){
         margin: 0;
      }
       .list h2.active {
         background: rgba( 221, 84, 111, .8)
      }
       .list span {
         width: 0;
         height: 0;
         display: inline-block;
         border: 6px dashed rgba( 0, 0, 0, 0);
         border-left: 6px solid rgba( 255, 255, 255, 1);
         margin-right: 10px;
         position: relative;
         top: 1px;
      }
       .list span.active {
         width: 0;
         height: 0;
         display: inline-block;
         border: 6px dashed rgba( 0, 0, 0, 0);
         border-top: 6px solid rgba( 255, 255, 255, 1);
         position: relative;
         top: 4px;
      }
       .list ul {
         background: #000000;
         color: #fff;
         display: none;
      }
       .list li {
         height: 40px;
         font: 14px/ 40px "微软雅黑";
         box-sizing: border-box;
         padding-left: 34px;
      }
       .list .item {
         margin: 10px 0;
      }

       .list .active h2{
         background: rgba( 221, 84, 111, .8)
      }
       .list .active ul{
         display: block;
      }
     < / style >
     < script src= "../vue.js" > < / script >
     < script >
       var qqData = [
       {
       title: '好友',
       list: [
       {
       subTitle: '1'
       },
       {
       subTitle: '2'
       },
       {
       subTitle: '3'
       }
       ]
       },
       {
       title: '同事',
       list: [
      
            {
       subTitle: '1111'
            },
           
       ]
       }
      ]

     < / script >
   </ head >
/vue
   < body >
     < div class= "wrap" id= "app" >
     < div class= "list" >
     < div
        class= "item"
        v-for= "item,index in qqData"
       : class= "{active: index === currentIndex }"
     >
        < h2 @ click= "tab(index)" >< span ></ span >{{item.title}} </ h2 >
        < ul >
        < li v-for= "option in item.list" >{{option.subTitle}} </ li >
        </ ul >
     </ div >
     </ div >
     </ div >
     < script >
       new Vue({
         el: '#app',
         data: {
           qqData: qqData,
           currentIndex: ''
        },
         methods: {
           tab ( index) {
             this. currentIndex = this. currentIndex === index? '' : index;
          }
        }
      })
     < / script >
   </ body >
</ html >

< template >
< div class= "wrap" >
< div class= "list" >
< h2 >< span ></ span >我的好友 </ h2 >
< ul >
< li >eeeeeeee e </ li >
</ ul >
< h2 >< span ></ span >企业好友 </ h2 >
< ul >
< li > luke </ li >
< li > selina </ li >
< li > mathew </ li >
</ ul >
< h2 >< span ></ span >黑名单 </ h2 >
< ul >
< li > chenqingyue </ li >
< li > wjq </ li >
</ ul >
</ div >
</ div >
</ template >

< script >
export default {
}
</ script >
< style scoped >

.wrap {
   width: 384px;
   height: 707px;
   /*background: url(./imgs/bg1.png) no-repeat center center;*/
   margin: 0 auto;
   position: relative;
}

.list {
   width: 280px;
   position: absolute;
   left: 46px;
   top: 64px;
}
.list h2 {
   height: 48px;
   font: 14px/ 48px arial;
   color: #fff;
   background: rgba( 0, 0, 0, .8);
   box-sizing: border-box;
   padding-left: 10px;
   margin-top: 10px;
}
.list h2:nth-of-type( 1 ){
   margin: 0;
}
.list h2.active {
   background: rgba( 221, 84, 111, .8)
}
.list span {
   width: 0;
   height: 0;
   display: inline-block;
   border: 6px dashed rgba( 0, 0, 0, 0);
   border-left: 6px solid rgba( 255, 255, 255, 1);
   margin-right: 10px;
   position: relative;
   top: 1px;
}
.list span.active {
   width: 0;
   height: 0;
   display: inline-block;
   border: 6px dashed rgba( 0, 0, 0, 0);
   border-top: 6px solid rgba( 255, 255, 255, 1);
   position: relative;
   top: 4px;
}
.list ul {
   background: #000000;
   color: #fff;
   display: none;
}
.list li {
   height: 40px;
   font: 14px/ 40px "微软雅黑";
   box-sizing: border-box;
   padding-left: 34px;
}
.list li.active {
   background: rgba( 255, 255, 255, .4);
}

.list li.selected {
   background: rgba( 221, 84, 111, .6);
}
</ style >





Healer_JJJ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue入门小例子
07-08
学习vue.js官网时,写的几个小例子.
vue基础的一些实例推荐收藏
00后的一位普通处女座前端程序员
09-21 560
用于存储数据，这里的数据可以全局使用 当数据发生变化时，会自动更新相关DOM元素用于存储各种方法 方法里面的this是当前vue对象 指令：就是vue提供的一套属性，都是v-开头v-text ：innertext 演示案例： v-html : innerhtmlv-if :删除DOM元素实现隐藏v-else , v-else-if测试案例 v-show: 使用css的方法来实现显示与隐藏（display：nono/block)v-for： 循环格式： 当点击num++后v-bind ：属性
vue基础案例
qq_43420617的博客
03-25 2720
文章目录后台管理案例一、安装和配置路由二、基于路由渲染登录组件三、模拟登录功能四、后台主页基础布局五、退出登录并控制访问权限六、子路由嵌套显示七、点击进入用户详情页八、升级用户详情页的路由路由path的注意点扩展：控制页面的权限黑马头条一、 初始化① 创建并梳理项目结构② 安装和配置Vant组件③ 使用Tabber组件⑤ 使用Navbar组件⑥ 覆盖Navbar的默认样式二、文章列表①. 文章列表数据请求方式请求根路径请求URL 地址查询参数响应的数据结构返回参数说明② 封装ut
jjj
qq269973759的博客
11-21 1065
java中for循环的6种写法 废话不必多说，直接上代码： package stytle; import java.util.ArrayList; import java.util.Iterator; import java.util.List; /** * @author buru * @date 2009年11月29日15:04:04 * @qq 258274473 *
Vue基础实例
望天吼
08-29 1072
Vue基础实例
vue组件实例解析
11-28
v-on和v-for的基础应用 源码下载 一、搭建vue开发环境 1）更换镜像到cnpm npm install -g cnpm –registry=https://registry.npm.taobao.org 2）安装vue-cli cnpm install -g vue-cli 3）初始化vue项目 命令模式...
Vue基础知识点附带实例
最新发布
01-30
vue
Vue基础1
01-07
el： 表示new的vue实例所要控制的区域。 data ： 表示new的vue实例所要控制的区域。 methds: 定义vue实例中所有的可用方法。 基础标签 v-clock：解决网速慢引起的标签显示问题， 仅仅替换自己的站位符中的内容 v-...
vue使用实例
08-23
vue实例、vue持续更新中、vueDemo 1、vue的基础概念和构建开发环境、 2、数据渲染、事件监听和表单处理， 后续更新待续
VUE面试题目VUE基础
03-13
这篇文档是关于Vue面试题目的，主要涵盖了Vue实例的生命周期、计算属性和方法、指令、组件、父子组件通信、路由、mixins、过渡效果、事件修饰符、过滤器、插槽、响应式原理和数据双向绑定原理等方面的内容。
vue基础实例
m0_59867106的博客
06-11 168
Vue基础小练习 效果图：附源代码
vue入门实例
weixin_33816946的博客
06-06 6561
Vue的一个简单实例 Vue的简介 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 1、 首先我们需要去...
Vue框架，从基础入门到项目实战。看这一篇知识点全覆盖了
New前端工厂的博客
08-12 4424
安装Vue 介绍 Vue 只关注视图层， 采用自底向上增量开发的设计。 在了解Vue之前你需要了解 HTML CSS JavaScript 安装Vue 通过CDN方式使用 示例 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script> Staticfi...
vue入门示例（一）
热门推荐
heroking
08-21 3万+
为了让广大后端人员更快的理解上手vue，我们先不适用ide和vue-cli等工具，先采用手动引入js的方式，从一个最简单的例子开始，循序渐进 1. 到官网下下vue.js vue官网 我们这里使用开发版，它包含了许多警告提示信息 新建一个文件夹把vue.js放进去，然后创建一个html文件命名为index.html 2. 第一个hello world 编辑index的内容 <!DOCT...
Vue 基础案例
weixin_43135489的博客
03-06 404
Vue基础小案例
vue快速入门的三个小实例
qq_40479190的博客
11-27 1万+
1.前言 用vue做项目也有一段时间了。但是关于vue入门基础的文章，我还没有写过，那么今天就写vue入门的三个小实例，这三个小实例是我刚接触vue的时候的练手作品，难度从很简单到简单，都是入门级的。希望能帮到大家更好的学习和了解vue，也是让自己能够复习一下vue。如果发现文章写得有什么不好，写错了，或者有什么建议！欢迎大家指点迷津！ 1.本篇文章使用的vue版本是2.4.2，可能会和新
Vue详细基本实例
qq_43222167的博客
05-28 522
在HBuilder中新建项目 新建好后鼠标选中新建的项目运行 如果出现这个错误则是node.js没有安装好,参考博客:https://editor.csdn.net/md/?articleId=106372951 安装后之后启动 修改项目后如下目录及文件 index.js import Vue from 'vue' import Router from 'vue-router' import Index from '../page/index/index.vue' Vue.use(Router)
vue基础之小案例
keep789的博客
08-20 1745
Todolist &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href=&quo
VUE入门到实战--Vue实例和模板语法
weixin_37968345的博客
10-09 3802
1、Vue实例 1、每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：比如我们在下面这个例子中如果使用浏览器打开，我们在控制台输入vm.$data、vm.$el都能打印出响应的内容。在一个Vue实例中，像el，data，methods....还有很多，都叫做Vue的实例属性。这些实例属性都能通过 { 实例名.$实例属性名 }这种方式得到。 2、实际上每个组件都是一个V...
vue2入门基础教程
09-09
要学习Vue2的入门基础知识，您可以按照以下步骤进行： 1. 下载和安装Vue.js：您可以从官方网站上下载并引入Vue.js脚本文件，或者使用CDN链接进行引用。 2. 创建HTML文件：创建一个HTML文件，其中包含被Vue控制的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值