Vue概述
- 它是一种 javascript框架
- 可以简化DOM操作
- 进行响应式数据驱动
el: 挂载点
- vue实例的作用范围：vue会管理 el 选项所命中的元素及其内部的后代元素。
- 可以使用其他选择器，但推荐是 id 选择器
- 可以使用其他双标签，但不能使用 HTML 和 BODY ，一般推荐使用 div 标签
- 作用：设置 vue 实例挂载（管理）的元素
data: 数据对象
- vue 中用到的数据定义在 data 中
- data 中可以写复杂类型的数据，如对象、数组等
- 渲染复杂数据类型的数据时，遵守 js 的语法即可，数组用下标索引，对象用属性
本地应用
-
v-test：设置标签的文本值；默认写法会替换全部内容，无论内容是什么，只会解析为文本，如果进行部分替换则使用两个大括号 { { }}（差值表达式）例如：
<h2>提示：{ {message + "!"}}</h2> -
v-html：设置标签的 innerHtml；内容中有 html 结构会被自动解析为标签
-
v-on：为元素绑定事件
v-on:click="方法名"；事件名不需要写on；绑定事件的方法是在script标签内写上方法对象methods:{方法名:function(){ // 详细逻辑 }}简写形式：
@click="方法名"v-on还可以传递自定义参数，事件修饰符，传递参数：function（p1,p2）
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件后面跟上 .修饰符可以对事件进行限制
.enter 可以限制触发的按键为回车
-
使用 this.数据名 获取 DOM 元素
-
v-show：根据表达式的真假，切换元素的显示和隐藏，指令后面的内容最终都会被解析为布尔值，为了方便操纵，一般将这个指令定义成数据。支持表达式的书写方式。频繁切换元素用这个
本质：修改元素的 display属性，实现显示隐藏
-
v-if：根据表达式的真假，切换元素的显示和隐藏，不频繁的切换用这个。
本质：操纵 dom 元素的移除与添加
-
v-bind：设置元素的属性，
v-bind:属性名=表达式属性名可以省略，需要动态的增加/删除 class 属性建议使用对象的方式 -
v-for：根据数据生成列表结构；格式如：
v-for="item in 数据(通常为数组名)"//这只会生成li标签但是里面没有内容，因此要添加内容使用{ {item}}，此外数组要使用数组索引号的获取方式(item, index)，对象要使用对象的属性获取方式{ {item.属性名}}；数组经常和 v-for 结合使用
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的
-
v-model：便捷的获取和设置表单元素的值（双向数据绑定）；绑定的数据会和表单元素的值相关联
网络应用
axios：网络请求库，它与Vue结合网络数据开发应用
axios
axios.get(地址即文档提供的接口地址).then( function(response) {}, function(err) {})
axios.get(地址?key=value&key2=value2).then( function(response) {}, function(err) {})
axios.post(地址，参数对象).then(function(response) {}, function(err) {})
axios.post(地址，{key: value,key2:value2}).then(function(response) {}, function(err) {})
注意：
- axios必须先导入才可以使用
- 使用 get 或 post 方法即可发送对应的请求
- then方法中的回调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取响应内容或错误信息
- 在和 vue 搭配使用的时候，axios回调函数中的this已经无法改变，无法访问到 data中的数据，因此要把 this 保存起来，回调函数中直接使用保存的 this 即可
应用案例：
- 服务器中的数据比较复杂的时候，要注意数据的层级结构
- 通过对象的方式设置类名，类名生效与否取决与后面值的真假
- 音频中带有 play 和 pause 事件
- 页面结构复杂时，通过审查元素的方式可以快速定位相关元素
音乐播放器
实现界面
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音乐播放器</title>
<link type="text/css" href="css/music.css" rel="stylesheet" />
</head>
<body>
<div class="wrap">
<div class="play_wrap" id="player">
<div class="search_bar">
<div class="title">悦听</div>
<div class="search">
<input v-model="music" @keyup.enter="search(music)" type="text" class="content" />
<img class="loupe" src="img/mirror.png" @click="search(music)"/>
</div>
</div>
<div class="center_con">
<div class="music_list">
<ul class="music">
<li class="music_li" v-for="item in musicList">
<a href="javascript:;" @click="playMusic(item.id)">
<img class="music_btn" src="img/play.png" />
</a>
<span class="music_name"> {
{ item.name }} </span>
<span class="mv_btn" @click="mvPlay(item.mvid)">
<img class="mvtable" v-if="item.mvid!=0" src="img/mv.png" />
</span>
</li>
</ul>
</div>
<div>
<img class="left_line" src="img/line.png" />
</div>
<div class="pic"
最低0.47元/天 解锁文章
655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
