1.实现歌曲的点击切换。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            padding: ;

            margin: ;

        }

        ul{

            list-style:none ;

        }

        li{

            border-bottom: solid 1px gray;

        }

    </style>

</head>

<body>

<div id="music">
　　//这里的路径就是下面data里面的，默认是第一首。          绑定一个播放完成的事件。

    <audio :src="currentSong" autoplay="" controls="" @ended="nextSong"></audio>

    <ul>
　　　　//循环拿到歌名和索引，将索引传给点击事件。

        <li v-for='(item,index) in songs' @click="clickHandler(index)">

            <h3>歌名:{{item.name}}</h3>

            <h3>歌手:{{item.author}}</h3>

        </li>

    </ul>

</div>

<script src="../day2/vue.js"></script>

<script>
　　//下面的数据是通过数据库拿，这里模拟一下。

    var songs=[

        {id:,src:'1.mp3',name:"lala",author:"Ryan"},

        {id:,src:'2.mp3',name:"its my life",author:"alex"},

        {id:,src:'3.mp3',name:"gogogo",author:"egon"},

    ]

    var music = new Vue({

        el:"#music",

        data:{

            songs:songs,        //歌曲库

            currentSong:'1.mp3',  //歌曲路径

            currentIndex:,        //当前索引

        },

        methods:{

            clickHandler(index){
　　　　　　　　　　//索引拿到后，去歌曲库拿到对应的歌曲路径。

                this.currentSong=this.songs[index].src;

            },

            nextSong(){

                alert()
　　　　　　　　　　//当歌曲播放完成这个事件才执行。
　　　　　　　　　　//首先是索引+1，然后去到索引+1后的歌曲的路径。

                this.currentIndex++;

                this.currentSong = this.songs[this.currentIndex].src,

            }

        },

        computed:{

        },

        created(){

            //通常用来做页面的初始化

        }

    })

</script>

</body>

</html>

2.下面使用计算属性来实现一下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        ul{

            list-style:none ;

        }

        li{

            border-bottom: solid 1px gray;

        }

    </style>

</head>

<body>

<div id="music">
　　　//这里的：src是绑定的计算属性，默认执行get方法。

    <audio :src="currSong" autoplay="" controls="" @ended="nextSong"></audio>

    <ul>

        <li v-for='(item,index) in songs' @click="clickHandler(index)">

            <h3>歌名:{{item.name}}</h3>

            <h3>歌手:{{item.author}}</h3>

        </li>

    </ul>

    <button @click="addOneSong">添加一首歌</button>

</div>

<script src="../day2/vue.js"></script>

<script>

    var songs=[

        {id:1,src:'1.mp3',name:"lala",author:"Ryan"},

        {id:2,src:'2.mp3',name:"its my life",author:"alex"},

        {id:3,src:'3.mp3',name:"gogogo",author:"egon"},

    ]

    var music = new Vue({

        el:"#music",

        data:{

            songs:songs,

            currentIndex:0,

        },

        methods:{

            clickHandler(index){
　　　　　　　　　　//这里只需要修改索引即可，下面的计算属性会监听到改变从而做出改变。

                this.currentIndex=index

            },

            nextSong(){

                alert(1);
　　　　　　　　　　//播放完也是只需要给索引加1即可。

                this.currentIndex++;

            },

            addOneSong(){
　　　　　　　　　　//这里给歌曲库可以push一些歌曲，当然了下面的依然可以监听到，然后实时的在页面增加。（这里点击后，下面的111会打印。）

                this.songs.push( {id:4,src:'4.mp3',name:"666",author:"egon2"})

            }

        },

        computed:{

            currSong(){

                console.log(111)

                //实时监听songs数据的变化，添加数据songs变化了，所以这个函数会执行

                //也就是增加一首歌，这个函数执行一次，111打印一次。

                return this.songs[this.currentIndex].src
　　　　　　　　　　//只需要拿到索引的src即可。默认为0，这样上面的audio也就执行拿到了这个src。

            }

        },

        created(){

            //通常用来做页面的初始化

        }

    })

</script>

</body>

</html>

3.组件的创建：

vue的核心基础就是组件的使用，玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。

那接下来就跟我看一下如何在一个Vue实例中使用组件吧！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <Vheader></Vheader>

    <Vheader></Vheader>

    <Vheader></Vheader>

    <Vheader></Vheader>

    <Vheader></Vheader>

</div>

<script src="vue.js"></script>

<script>

    //组件的创建

     Vue.component('Vheader',{

            data:function(){   //想要使用组件，data必须是个函数

                return {

                    //必须要return，哪怕是个空对象

                }

            },

            template:`<div class="header">

                        <div class="w">

                            <div class="w-l">

                                <img  src="default.jpg"/>

                            </div>

                            <div class="w-r">

                                <button>登录</button><button>注册</button>

                            </div>

                        </div>

                    </div>`

        })

     var app=new Vue({

        el:"#app",

        data:{},

        methods:{},

        computed:{},

    })

</script>

</body>

</html>

组件是可复用的Vue实例，并且带有一个名字：在这个例子中是 <Vheader>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

组件是可以复用的，所以可以写多个。

<div id="app">

    <Vheader></Vheader>

    <Vheader></Vheader>

    <Vheader></Vheader>

    <Vheader></Vheader>

    <Vheader></Vheader>

</div>

给Vheader组件中添加一个按钮，绑定数据属性count，然后你会发现点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

在创建组件过程中第一个参数是组件的名字，第二个参数是跟new Vue实例一样的options。跟实例对象不同的是有两点：

关于组件名的起名：https://cn.vuejs.org/v2/guide/components-registration.html

1、组件中没有el，因为el仅仅的是绑定Vue的根元素。

2、data属性不再是返回对象，而是返回一个函数。而且必须返回一个函数。

Vue使用的一些实例的更多相关文章

  1. Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...

  2. vue路由的简单实例

    vue2.0 和 vue1.0 路由的语法还是有点稍微的差别,下面介绍一下vue-router 2的简单实例: <!DOCTYPE html> <html lang="en ...

  3. Vue.2.0.5-Vue 实例

    构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式, Vue 的设 ...

  4. Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  5. vue单文件组件实例2：简单单文件组件

    ​ Introduce.vue: <template> <div class="intro"> 单位介绍 </div> </templat ...

  6. Vue学习1：实例及生命周期

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 04: vue生命周期和实例属性和方法

    1.4 组件的生命周期 1.说明 1. Vue将组件看成是一个有生命的个体,跟人一样,定义了各个阶段, 2. 组件的生命周期:组件的创建过程 3. 组件生命周期钩子函数:当组件处在某个阶段,要执行某个 ...

  8. Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;

    add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...

  9. Vue.js教程--基础(实例 模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)

    官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...

随机推荐

  1. Windows 命令行

     1.d: 进入d盘  2.dir(directory)   显示当前文件夹下的所有内容  3.md (make directory) +文件夹名 在当前文件夹下创建文件夹  4.rd (remove ...

  2. 强大而灵活的字体图标替代库iconfont

       前言概述 在开发网页制作过程中通常需要一些网页小图标,前端需要PS切图,将单个小图标icon组合成CSS雪碧图过程中,需要一些时间和精力; 如果网页制作中需要的小图标icon有一套css框架库集 ...

  3. 【Linux基础】大B和小b

    1.小b(bit) 在计算机科学中,bit(比特)是表示信息的最小单位,叫做二进制位,一般用0和1表示. 2.大B(Byte) Byte叫做字节,由8个位(8bit)组成一个字节(1Byte),用于表 ...

  4. TCP长连接保持连接状态

    对于TCP长连接保活是十分必要的,原因如下: 1.系统多在OA网和外网间有防火墙隔离,很多防火墙对一段时间内没有报文活动的socket会自动关闭. 2.对于非正常断开的连接系统并不能侦测到,比如防火墙 ...

  5. vue-router 管理视图详解

    什么是路由 在web开发中,路由是指根据url分配到对应的处理程序,当访问不同的url就会切换到对应的处理程序 在vue中一个url对应的就是一个组件,当访问不同的url,对应的组件就会呈现到页面中 ...

  6. SQL 服务器 - RDBMS

    SQL 数据类型 SQL functions 现代的 SQL 服务器构建在 RDBMS 之上. DBMS - 数据库管理系统(Database Management System) 数据库管理系统是一 ...

  7. [tool] Visual Studio Code python配置

    语言设置 安装中文插件即可成为中文 选择一个Python解释器 Python是一种解释型语言,为了运行Python代码并获取Python IntelliSense,您必须告诉VS Code使用哪个解释 ...

  8. MYSQL学习笔记——sql语句优化工具

    优化sql:思路: 使用explan->先查询type类型看看是all还是ref,然后判断 possible_keys (显示可能应用在这张表中的索引, 一个或多个.查询涉及到的字段是若存在索引 ...

  9. 【vue】vue中实现导出excel

    1.安装依赖 cnpm install -S file-saver xlsx cnpm install -D script-loader 2.例如在src文件夹中新建一个名为vendor(vendor ...

  10. 吴恩达课后作业学习2-week1-3梯度校验

    参考:https://blog.csdn.net/u013733326/article/details/79847918 希望大家直接到上面的网址去查看代码,下面是本人的笔记 5.梯度校验 在我们执行 ...