Vue全掌握——指令、axios
vue官网Vue介绍：是一套用于构建用户界面的渐进式框架与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用只关注视图层“渐进式框架”：我的理解是，需要什么往里面加，不需要多余的部分！有多少东西，干多少活！显得简洁，主张最少“自底向上逐层应用”：由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。兼容性Vue不支持IE8 及以下版本，因...
Vue介绍：
是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
只关注视图层，因此它非常容易学习，非常容易与其它库或已有项目整合
“渐进式框架”：我的理解是，需要什么往里面加，不需要多余的部分！有多少东西，干多少活！显得简洁，主张最少
“自底向上逐层应用”：由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。
兼容性
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
Vue优点
本地应用
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统.
命令式与声明式
命令式：一步一步告诉程序如何去做，能否达成结果取决于开发者的设计。
声明式：只告诉程序想要什么结果，如何达成由程序保证，开发者不用关心。声明式渲染的理解?
1.DOM状态只是数据状态的一个映射
2.所有的逻辑尽可能在状态的层面去进行
3.当状态改变了，view会被框架自动更新到合理的状态
模板
给一张图来帮助更好的理解模板的作用（Vue的模板编译成虚拟的DOM树（VNode），然后生成真实的DOM树）
模板的三种书写方式：
1. 普通模板
2. template 字符串模板(es6)属性
3.render配置函数创建（这个有时间单独再说）
{{ vulue }} 差值表达式
文本值
el挂载点
问题：
1. Vue实例的作用范围
Vue会管理el选项中的元素及其内部的后代元素
2. el是否可以使用其他选择器
可以，建议使用ID选择器
3. 在html和body标签上支持Vue的 el 吗
不支持，不能使用HTML和body
el挂载点的另外一种方式：app.$mount(“#app”);------------前一个app为上面案例实例对象的引用
data数据对象
可以写数值类型、布尔类型、字符串类型、数组、复杂类型（字面量对象......）
data: {
mess: '人物介绍',
person: {
name: 'Tom',
sex: 'M',
description: '来自美国加州...',
subjects: ['高数', '英语', '毛概', 'android']
}
}computed计算属性
方法函数名作为属性来使用
<body>
<div id="app">
{{firstName}}
{{lastName}}
{{fullName}}
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: "张",
lastName: "三"
},
computed: {
fullName: function() {
return this.firstName + this.lastName;
}
}
});
</script>
computed属性和methods属性区别：
1.computed属性的方法可以作为属性变量，methods属性的方法只能被调用
2.computed属性的方法计算值有缓存作用，再次使用不会被计算（直接使用）
Vue指令
文本指令：v-text、v-html
v-text文本指令
作用和差值表达式类似
<div v-text="person.name">姓名：</div>v-text指令会将标签内文本覆盖
v-text指令可以采用+拼接的方式达到差值表达式的效果
v-html指令
<span v-html="mess"></span>data: {
mess: '<a href="www.baidu.com/">百度</a>'
} 
v-on事件绑定指令
两种写法：
<span v-on:click="doIt">点我1</span>
<span @click="doIt">点我2</span>methods: {
doIt: function() {
console.log('点击了！')
}
}
页面显示是跟随数据变化的，比如
<span v-on:click="doIt">点我1</span>
<span @click="doIt">点我2</span>
<div>{{ say }}</div>data: {
say: 'hello，小黑！'
},
methods: {
doIt: function() {
this.say += '好！'
}
}
那如果传传参数呢？这样：
<span @click="doIt('点了一下')">点我2</span>methods: {
doIt: function(p) {
console.log(p)
}
}
v-show显示/隐藏指令
该指令实际修改的是display
<div v-show="hidden">显示</div>
<div v-show="none">隐藏</div>data: {
hidden: true,
none: false
}
v-if条件判断指令
该指令实际是对DOM元素的添加和移除
<div v-if="hidden">显示</div>
<div v-if="none">隐藏</div>data: {
hidden: true,
none: false
}
<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 60">良</p>
<p v-else>差</p>指令布尔值简单判断方式v-if="{hidden: true}"、v-show="{hidden: true}"
（--------------v-show更适合频繁操作显示和隐藏---------------------------------）
v-bind设置属性指令
<img v-bind:src="imgSrc" v-bind:title="title" v-bind:width="width"/>
<br/>
<img :src="imgSrc" :title="title" :width="width"/>data: {
imgSrc: 'images/offline.gif',
title: '这是一张图片....',
width: 300
}
如果一个属性有多个值，使用json格式！比如：
:class="{myclass1: show1, myclass2: show2}" （其中show1、show2的值为true/false）
v-for迭代指令
作用对象：作用于被迭代的元素标签
<div v-for="item in subjects">
{{ item }}
</div>data: {
subjects: ['数学', '英语', '地理']
}
添加数组下标（注意：下标参数在后）
<div v-for="item,index in subjects">
{{ index }} {{ item }}
</div>
如果被迭代的是对象的属性，则是键值对的方式：
<li v-for="(v, k, i) in obj">
值：{{v}},键：{{k}},索引：{{i}}
</li>
v-model获取和设置表单数据（数据双向绑定）
<input type="text" v-model="mess">
<div>{{ mess }}</div>data: {
mess: '你好啊！'
}div文本和表单输入的值是一样的 ！
JavaScript代码可以嵌入Vue，非常灵活！
data数据对象中：
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}methods中就不必说了！
基础综合演练（小黑记事本）
任务需求：对已有HTML结构和css元素的记事本，需要完成新增、删除、统计、清空、隐藏五个功能。
分析：显示列表实际是以数组存储的，那么实现增删改查都是对数组进行操作。
代码：
网络应用
上面的知识点只是针对本地的应用，没有涉及到网络数据的交互，这里讲网络请求库axios
axios内部使用的是原生JavaScript的ajax，完成异步请求。
axios
axios掌握重点：（导入axios的js库文件、会使用axios的get和post请求方法，以及回调函数）
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>（学过Vue-CLI的可以使用npm i axios命令安装！）
案例：
axios+Vue完成第三方接口返回的数据处理：
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
接口3:天知道天气预报
请求地址:http://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city(城市名,字符串)
响应内容:城市近几天的详细天气信息
悦听音乐
接口4:歌曲搜索
请求地址:https://autumnfish.cn/search
请求方法:get
请求参数:keywords(查询关键字,字符串)
响应内容:歌曲搜索结果
接口5:获取某个歌曲的url
请求地址:https://autumnfish.cn/song/url
请求方法:get
请求参数:id(歌曲id,字符串)
响应内容:歌曲的url地址
接口6:获取某个歌曲的详情信息
请求地址:https://autumnfish.cn/song/detail
请求方法:get
请求参数:ids(歌曲id,字符串)
响应内容:歌曲的详情（包括封面信息）
接口7:获取某个歌曲的评论
请求地址:https://autumnfish.cn/comment/hot?type=0
请求方法:get
请求参数:id(歌曲id,字符串;type固定为0)
响应内容:歌曲的热门评论
接口8:获取某个歌曲的MV
请求地址:https://autumnfish.cn/mv/url
请求方法:get
请求参数:id(歌曲id,字符串)
响应内容:歌曲的MV（下面案例代码修正：v-for作用对象应该在被迭代的元素上，比如li；因为发的是截图，代码不好修改，请注意！）
案例1：随机笑话
案例2：用户注册
案例3：天知道天气预报
案例4：基于歌曲搜索的在线音乐播放网站
<div class="wrap">
<!-- 播放器主体区域 -->
<div class="play_wrap" id="player">
<div class="search_bar">
<img src="images/player_title.png" alt="" />
<!-- 搜索歌曲 -->
<input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
</div>
<div class="center_con">
<!-- 搜索歌曲列表 -->
<div class='song_wrapper'>
<ul class="song_list">
<li v-for="item in lists">
<a href="javascript:;" @click="playMusic(item.id)"></a>
<b>{{ item.name }}</b>
<span v-show="item.mvid" @click="playMv(item.mvid)"><i></i></span>
</li>
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
<!-- 歌曲信息容器 -->
<div class="player_con" :class="{playing: isplay}">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<img :src="picUrl" v-model="picUrl" class="cover autoRotate" />
</div>
<!-- 评论容器 -->
<div class="comment_wrapper">
<h5 class='title'>热门留言</h5>
<div class='comment_list'>
<dl v-for="item in commentsList">
<dt><img :src="item.user.avatarUrl" alt=""></dt>
<dd class="name">{{ item.user.nickname }}</dd>
<dd class="detail">
{{ item.content }}
</dd>
</dl>
</div>
<img src="images/line.png" class="right_line">
</div>
</div>
<div class="audio_con">
<audio ref='audio' @play="play" @pause="pause" :src="url" v-model="url" controls autoplay loop class="myaudio"></audio>
</div>
<div class="video_con" v-show="isShow" style="display: none;">
<video :src="mvUrl" controls="controls"></video>
<div class="mask" @click="hide"></div>
</div>
</div>
</div>
<script src="js/customVue.js"></script>const app = new Vue({
el: '#player',
data: {
query: '',
lists: [],
url: '',
picUrl: '',
commentsList: [],
isplay: false,
mvUrl: '',
isShow: false
},
methods: {
searchMusic: function() {
let that = this;
axios.get('https://autumnfish.cn/search?keywords='+ that.query)
.then(function(response) {
console.log(response);
that.lists = response.data.result.songs;
}, function(err) {
console.log(err);
});
},
playMusic: function(id) {
let that = this;
axios.get('https://autumnfish.cn/song/url?id='+ id)
.then(function(response) {
console.log(response);
that.url = response.data.data[0].url;
}, function(err) {
console.log(err);
});
axios.get('https://autumnfish.cn/song/detail?ids='+ id)
.then(function(response) {
console.log(response);
that.picUrl = response.data.songs[0].al.picUrl;
}, function(err) {
console.log(err);
});
axios.get('https://autumnfish.cn/comment/hot?type=0&id='+ id)
.then(function(response) {
console.log(response);
that.commentsList = response.data.hotComments;
}, function(err) {
console.log(err);
});
},
play: function() {
this.isplay = true;
},
pause: function() {
this.isplay = false;
},
playMv: function(mvid) {
let that = this;
axios.get('https://autumnfish.cn/mv/url?id='+ mvid)
.then(function(response) {
console.log(response);
that.isShow = true;
that.mvUrl = response.data.data.url;
}, function(err) {
console.log(err);
});
},
hide: function() {
this.isShow = false;
}
}
}); 
前往低代码交流专区
更多推荐
50
0- 0
已为社区贡献1条内容
所有评论(0)