vue入门–基础命令+axios+案例练习
vue入门–vue常用属性、生命周期、计算属性、过滤器、组件、虚拟DOM、数组的响应式方法、页面闪烁、ES6简单语法增强
vue入门–js高阶函数(箭头函数)、v-model数据绑定、组件化、父子组件通信及访问
vue入门–插槽(具名、匿名、作用域插槽)+ES6模块化导入导出+webpack的使用(基本使用+配置使用+如何一步步演化成cli脚手架)+webpack插件使用(搭建本地服务器、配置文件分离)
vue-cli脚手架2版本及3+版本安装、目录解析、only和compiler的区别、3+版本如何改配置、箭头函数及this的指向
vue-router基本使用、路由传参、懒加载、嵌套路由、导航守卫、keep-alive
Promise基本使用、三种状态、链式调用及简写、all方法
Vuex的作用、使用、核心概念(State、Mutations、Getters、Actions、Modules)、文件抽离
axios网络请求基本使用、配置使用(全局axios和局部axios实例)、模块封装、axios拦截器
Vue基础
简介
- 是JavaScript框架
- 简化Dom操作
- 响应式数据驱动
Vue文档地址
第一个Vue程序
使用vscode时可以安装live server插件，实现热部署，动态刷新页面，节省开发时间。
<div id="app">
{
{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
message: "Hello Vue"
}
})
</script>
要注意网页元素和script标签引入的顺序，引入vue框架后，再去创建vue对象。
基础
el挂载点
- el属性挂载的元素内部，都可以使用差值表达式，使用Vue对象中定义的数据。(元素内部的子元素中也可以使用)
<div id="app">
{
{ message }}
<div>
{
{ message }}
</div>
</div>
- el挂载点，不止可以使用id选择器，同样可以使用class等选择器，建议使用id选择器
<div id="app" class="abc">
{
{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: ".abc",
data:{
message: "Hello Vue"
}
})
</script>
- el可以挂载很多dom页面元素(必须是块元素，且不能是body元素)
尽量使用el去挂载div元素
data属性
数据对象
<div id="app">
{
{ message }}
<h2>{
{ user.name }}</h2>
<ul>
<li>{
{ arrays[0] }}</li>
<li>{
{ arrays[1] }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
message: "Hello Vue",
user: {
name:"张三",
age: 21
},
arrays:["数组1", "数组2", "数组3"]
}
})
</script>
vue指令
v-text: 设置标签的文本值
使用v-text时，元素内部的所有值都会被替换掉(双标签元素，也就是块元素)
<div id="app">
<h2 v-text="message" >aaa</h2><!-- 仅变量，且块元素内部都会被替换掉 -->
<h2>{
{ message }}北京</h2> <!-- 变量+常量 -->
<h2>{
{ message + "!!" }}</h2> <!-- 拼接字符 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
message: "Hello Vue"
}
})
</script>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7jkbGIaY-1652400282555)(imgs/1.png)]](https://img-blog.csdnimg.cn/22a540353a804dac854da51d6692fb1a.png)
v-html: 设置标签的innerHTML
内容中有html结构，会被解析为标签
v-text指令，无论是什么内容，只解析为文本。
<div id="app">
<p v-html="message"></p>
<p v-text="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
message: "<a href='http://www.baidu.com'>百度一下，你就知道</a>"
}
})
</script>
v-on
- @click : 点击事件
- @keyup.enter : 回车事件
为元素绑定事件
<div id="app">
<input type="button" value="事件绑定" v-on:click="doIt">
<input type="button" value="事件绑定2" @click="doIt">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
methods:{
doIt:function(){
alert("do it")
}
}
})
</script>
使用this关键字，可以获取到当前vue对象中的数据。
<div id="app">
<h2 @click="changeFood">{
{ food }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
food:"西红柿炒鸡蛋"
},
methods:{
changeFood:function(){
this.food += "abc";
}
}
})
</script>
v-on补充
传递自定义参数，事件修饰符
<div id="app">
<input type="button" @click="doIt('i','am')" value="调用方法">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
alert(p1+p2)
}
}
})
</script>
案例—计数器
<div id="app">
<div class="input-num">
<button @click="sub">
-
</button>
<span>{
{num}}</span>
<button @click="add">
+
</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){
if (this.num == 10) {
alert("不能大于10")
return
}
this.num ++;
},
sub:function(){
if (this.num == 1) {
alert("不能小于1")
return
}
this.num--
}
}
})
</script>
v-show
根据表达值的真假，切换元素的显示和隐藏,本质上是设置元素的display属性值
<div id="app">
<input type="button" value="切换图片显示" @click="changeImageShow">
<img src="./sheep.jpg" alt="" v-show="isShow">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
changeImageShow:function(){
this.isShow = !this.isShow
}
}
})
</script>
注意 v-show是根据条件的真假，来显示，所以我可以
<img src="./sheep.jpg" alt="" v-show="1>2">
1>2，条件不成立，那么图片不显示。
v-if
根据表达式的真假，切换元素的显示和隐藏(是操纵DOM元素)
注意和v-show的区别，v-if是将元素给移除或添加了，而v-show只是把元素的display属性值给改了
需要频繁修改的元素使用 v-show，反之则用 v-if
<div id="app">
<input type="button" value="切换显示" @click="toggleIsShow">
<p v-if="isShow">hello 北京</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
toggleIsShow:function(){
this.isShow = !this.isShow
}
}
})
</script>
v-bind
设置元素的属性
语法：
v-bind可以省略
v-bind:属性名=表达式
<div id="app">
<img v-bind:src="imgSrc" v-bind:title="imgTitle + '!!!'">
<br>
<img :src="imgSrc" :title="imgTitle + '!!!'" :class="isActive?'active':''" @click="toggleActive">
<br>
<img :src="imgSrc" :title="imgTitle + '!!!'" :class="{active:isActive}" @click="toggleActive">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
imgSrc:"./logo.png",
imgTitle:"hello view",
isActive:false
},
methods:{
toggleActive:function(){
this.isActive = !this.isActive
}
}
})
</script>
案例—图片切换
<div id="app">
<input type="button" value="上一张" @click="prev" v-show="index!=0">
<img :src="imgArr[index]">
<input type="button" value="下一张" @click="next" v-show="index<imgArr.length-1">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app =new Vue({
el:"#app",
data:{
imgArr:[
"./sheep.jpg",
"./javacode1.png",
"./javacode2.png"
],
index:0
},
methods:{
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
}
})
</script>
v-for
根据数据生成列表结构
<div id="app">
<ul>
<li v-for="(item,index) in arr">
{
{ index+1 }}城市：{
{ item }}
</li>
</ul>
<h2 v-for="item in users">
{
{ item.name }}
</h2>
<input type="button" value="增加数据" @click="add">
<input type="button" value="减少数据" @click="remove">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["北京","天津","上海","广州"],
users:[
{
name:"张三"},
{
name:"李四"},
{
name:"王五"}
]
},
methods:{
add:function(){
this.users.push({
name:"深圳"}); // 新增数据
},
remove:function(){
this.users.shift(); // 删除最左边的数据
}
}
})
</script>
v-model
获取和设置表单元素的值(双向数据绑定)
<div id="app">
<input type="text" v-model="message">
<h2 v-text="message"></h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello world"
}
})
</script>
网络应用
Vue结合网络数据进行开发应用。
axios
axios，是一个基于promise网络请求库，作用于node.js和浏览器中
引入 axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
基本语法：
axios.get(地址?key=value&key2=value2).then(function(res){
}, function(err){
})
axios.post(地址,{
key:value}).then(function(res){
}, function(err){
})
axios+vue
<div id="app">
<input type="button" value="获取随机字符" @click="getStr">
<p>{
{ str }}</p>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
str:"aaa"
},
methods:{
getStr:function(){
var that = this;
axios.get("http://127.0.0.1:8080/app/report/test").then(
function(res){
console.log(res.data)
that.str = res.data;
},
function(err){
console.log(err);
}
);
}
}
})
</script>
这里需要注意的是，axios回调函数中的this是已经改变了，所以要在axios回调函数外面，把vue对象存起来到变量中。
案例–天知道
js代码
var app = new Vue({
el:"#app",
data:{
city:"",
weatherList:[]
},
methods:{
searchWeather:function(){
var that = this;
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city).then(
function(res){
that.weatherList = res.data.data.forecast;
console.log(res.data.data.forecast)
}
).catch(function(err){
})
},
changCity:function(city){
this.city = city;
this.searchWeather();
}
}
})
案例–悦听
知识点:
- audio标签的
play事件会在音频播放时触发 - audio标签的
pause事件会在音频暂停时触发 - 通过对象的方式设置类型，类名生效与否取决于后面值的真假
:class="{playing:isPlaying}" <!-- playing类名是否生效，取决于isPlaying的真假 -->
js代码
var app = new Vue({
el: "#player",
data: {
query: "",
musicList: [],
musicUrl: "",
musicCover: "./images/cover.png",
hotComments:[],
isPlaying:false,
isShow:false,
mvUrl:""
},
methods: {
seachMusic: function () {
var that = this
axios.get('https://autumnfish.cn/search?keywords=' + this.query).then(
function (res) {
console.log(res);
that.musicList = res.data.result.songs;
}
);
},
playMusic: function (musicId) {
var that = this
axios.get('https://autumnfish.cn/song/url?id=' + musicId).then(
function (res) {
console.log(res.data.data[0].url)
that.musicUrl = res.data.data[0].url;
}
);
axios.get('https://autumnfish.cn/song/detail?ids=' + musicId).then(
function (res) {
console.log(res.data.songs[0].al.picUrl)
that.musicCover = res.data.songs[0].al.picUrl;
}
);
axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicId).then(
function (res) {
that.hotComments = res.data.hotComments;
}
);
},
play:function(){
this.isPlaying = true;
},
pause:function(){
this.isPlaying = false;
},
playMV:function(mvId){
var that = this;
axios.get('https://autumnfish.cn/mv/url?id=' + mvId).then(
function(res){
that.isShow = true;
that.mvUrl = res.data.data.url;
}
);
},
hide:function(){
this.isShow = false;
}
}
})