Vue使用的一些实例
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使用的一些实例的更多相关文章
- Vue中通过Vue.extend动态创建实例
Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...
- vue路由的简单实例
vue2.0 和 vue1.0 路由的语法还是有点稍微的差别,下面介绍一下vue-router 2的简单实例: <!DOCTYPE html> <html lang="en ...
- Vue.2.0.5-Vue 实例
构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式, Vue 的设 ...
- Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- vue单文件组件实例2：简单单文件组件
Introduce.vue: <template> <div class="intro"> 单位介绍 </div> </templat ...
- Vue学习1：实例及生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 04: vue生命周期和实例属性和方法
1.4 组件的生命周期 1.说明 1. Vue将组件看成是一个有生命的个体,跟人一样,定义了各个阶段, 2. 组件的生命周期:组件的创建过程 3. 组件生命周期钩子函数:当组件处在某个阶段,要执行某个 ...
- Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;
add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...
- 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: ...
随机推荐
- kafka_2.11-2.0.0_介绍
1. JMS是什么 1.1. JMS的基础 JMS是什么:JMS是Java提供的一套技术规范 JMS干什么用:用来异构系统 集成通信,缓解系统瓶颈,提高系统的伸缩性增强系统用户体验,使得系统模块化和组 ...
- LeetCode算法题-Add Digits（Java实现-3种解法）
这是悦乐书的第199次更新,第207篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第63题(顺位题号是258).给定非负整数num,重复添加其所有数字,直到结果只有一位数 ...
- 【算法】LeetCode算法题-Length Of Last Word
这是悦乐书的第155次更新,第157篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第14题(顺位题号是58).给定一个字符串,包含戴尔字母.小写字母和空格,返回最后一个单 ...
- Spring缓存注解@Cacheable、@CacheEvict、@CachePut使用
从3.1开始,Spring引入了对Cache的支持.其使用方法和原理都类似于Spring对事务管理的支持.Spring Cache是作用在方法上的,其核心思想是这样的:当我们在调用一个缓存方法时会把该 ...
- 网络协议 反扒机制 fidder 抓包工具
协议 http 协议: client 端 server 端交互的 一种形式 请求头信息: User-Agent: 情求载体的身份标识 connection: 'close' 连接状态 请求成功后 断开 ...
- js中arguments详解
在js中一切都是对象,连函数也是对象,函数名其实是引用函数定义对象的变量. 什么是arguments? 这个函数体内的arguments非常特殊,实际上是所在函数的一个内置类数组对象,可以用数组的[i ...
- mysql从5.5直接升级到5.7后，执行mysql_upgrade速度很慢且执行结束后数据目录大小增加一倍及 mysqlpump备份出现1577错误
mysql官网不支持夸大版本升级,比如跳过5.6直接升级到5.7,但由于一些客观原因,项目需要从5.5直接升级到5.7,以下是具体操作 1.备份之前mysql,(数据量少,可直接拷贝安装目录及data ...
- 理解Shadow DOM(一)
1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...
- idea 2018.1 for mac JRebel破解
第一步: 在 Idea 中下载 Jrebel 路径:preferences-plugins-Browse repositories-直接搜索下载 Jrebel 第二步:配置反向代理工具 1.安装 ...
- Java关键字(四)——final
对于Java中的 final 关键字,我们首先可以从字面意思上去理解,百度翻译显示如下: 也就是说 final 英文意思表示是最后的,不可更改的.那么对应在 Java 中也是表达这样的意思,可以用 f ...