Vue01常见指令，axios
本文共 19879 字，大约阅读时间需要 66 分钟。
Vue01常见指令，axios
Vue简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue工作原理分析
Vue.js中有两个核心功能:响应式数据绑定，组件系统。主流的mvc框架都实现
了单向数据绑定，而双向绑定无非是在单向绑定基础上给可输入元素添加了change
事件，从而动态地修改model和view。
1.Vue实例的作用范围是什么呢？
Vue会管理el选项命中的元素及其内部的后代元素
2.是否可以使用其他的选择器？
可以使用其他的选择器,但是建议使用ID选择器
3.是否可以设置其他的dom元素呢？
可以使用其他的双标签,不能使用HTML和BODY
Vue的引用：
Vue常见指令
{ {}}——数据绑定。普通数据内容绑定
v-text——可以给元素设置一些文本值，字符串原样输出
v-html——可以给元素设置文本值，并解析dom元素
v-bind：attributeName——数据绑定，可以绑定到标签属性中。以v-bind：属性名进行绑定，可以缩写——直接**：属性名**即可
v-model——它能轻松实现表单输入和应用状态之间的双向绑定。如果要给文本框设置属性最好使用：v-model属性来设置 。
表单更改：对应的data更改；data更改表单对应的显示更改
v-on:eventName——绑定事件。methods中声明的函数名对应
可以缩写@eventname
v-if——条件判断
v-for——循环
v-for可以用来遍历数组，item 是遍历的项 index是下标
在vue1.0版本中index是放在item之前的
在vue2.0版本中index是放在item之后的
- { {item}}-----------{ {index}}
- v-show——可以用来控制元素是否显示： 使用display:none;来隐藏元素 # vue的第一个程序 ## **el：挂载点** el是用来设置Vue实例挂载（管理）的元素， Vue会管理el选项命中的元素及其内部的后代元素， 可以使用其他的选择器,但是建议使用ID选择器， 可以使用其他的双标签,不能使用HTML和BODY ## **data:数据对象** Vue中用到的数据定义在data中， data中可以写复杂类型的数据， 渲染复杂类型数据时,遵守js的语法即可 - 导入开发版本的Vue.js 创建Vue实例对象, ```html ``` - 设置el属性和data属性
<!-- ②创建一个双标签并为标签起一个id --> <div id="app"> <!-- 显示数据 --> { {message}} </div>//创建一个vue对象 var app=new Vue({ el:'#app', data:{ message:"今天是个晴天" } })- 使用简洁的模板语法把数据渲染到页面上
整体代码如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- ①引入vue库 --> <script src="./js/vue.js"></script> </head> <body> <!-- ②创建一个双标签并为标签起一个id --> <div id="app"> <!-- 显示数据 --> { {message}} </div> </body> <!-- ③创建自己的js代码 --> <script> //创建一个vue对象 var app=new Vue({ el:'#app', data:{ message:"今天是个晴天" } }) </script></html>Vue指令
v-text指令的作用是:设置标签的内容(textContent)
测试
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script></head><body><div id="app"> <span v-text="message+'，哈哈哈'"></span> <br> <span>明天是第二天{ {message+"真棒"}}</span></div></body><script> const app=new Vue({ el:"#app", //数据标志 data:{ // 基本数据类型和字符串 message:"今天是Vue第一天啊" } })</script></html>v-html 内容中有html结构会被解析为标签
设置标签的innerHTML
与v-text:的区别就是可以解析html标签的内容测试
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script></head><body><div id="app"> <span v-text="message+':蓝色'">啊啊</span> <br> <span>{ {message}}</span> <p v-text="context"></p><!-- 与v-text的区别就是可以解析html标签的内容--> <p v-html="context"></p></div></body><script> const app = new Vue({ el: "#app", data: { message: "这个是v-html的例子", context: "<p style='color:#ee130e;'>五一放假啊</p>" } })</script></html>
v-on: 事件绑定
两种形式：
v-on:click=“方法”
@dblclick=“方法"
注意：- v-on指令的作用是:为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据
测试
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script></head><body><div id="app"> <input type="button" value="点击事件" v-on:click="dian"> <input type="button" value="点击事件" @click="dian"><!-- dblclick双击事件--> <input type="button" value="点击事件" @dblclick="dian">{ {message}}</div></body><script> const app=new Vue({ el:"#app", data:{ message:"你好，小峥", }, methods:{ // 基本数据类型和字符串 dian(){ alert("小峥") } } })</script></html>计数器案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>计数器</title> <link rel="stylesheet" href="./css/index.css" /></head><body><!-- html结构 --><div id="app"> <!-- 计数器功能区域 --> <div class="input-num"> <button @click="decr"> - </button> <span>{ {num}}</span> <button @click="incr" > + </button> </div></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 编码 --><script> const app=new Vue({ el:'#app', data:{ num:0, max:10, min:0 }, methods:{ incr(){ if (this.num>=this.max){ alert("到头了，别点了") }else { this.num++; } }, decr(){ if (this.num<=this.min){ alert("太小了，到头了") }else { this.num--; } } } })</script></body></html>
v-show v-if[根据表达式的真假，控制标签的显示和隐藏] v-bind【绑定标签的属性】
v-show指令的作用是:根据真假切换元素的显示状态，
原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新v-if 根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
频繁的切换v-show,反之使用v-if,前者的切换消耗小v-bind设置元素的属性(比如:src,title,class)
v-bind指令的作用是:为元素绑定属性
完整写法是 v-bind:属性名
简写的话可以直接省略v-bind,只保留 :属性名
需要动态的增删class建议使用对象的方式
v-show v-if测试
v-show只是设置了system：dispalay=none
v-if是否显示该标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script></head><body><div id="app"> <input type="button" value="点击事件" v-on:click="dian"> <img src="images/10.jpg" v-show="flag"> <br> <input type="button" value="点击事件" v-on:click="incrAge"> <br><!-- v-show只是设置了system：dispalay=none v-if是否显示该标签--><!-- <img src="images/01.jpg" v-show="age>18" alt="">--> <img src="images/01.jpg" v-if="flag" alt=""></div></body><script> const app = new Vue({ el:"#app", data:{ message:"你好哈哈哈", flag:false, age:17, }, //方法定义 methods:{ dian(){ this.flag=!this.flag; }, incrAge(){ this.age++; } } })</script></html>v-bind
使用bind
第一种方法：
<img src="images/09.jpg" v-bind:class="isActive?'active':''">
第二种方法：
isActive为true，则表示active class生效<img src="images/09.jpg" v-bind:class="{active:isActive}" alt="">注意：v-bind:可以直接用：替换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script></head><style> .active{ border: 8px solid red; }</style><body><div id="app"> <input type="button" value="点击事件" v-on:click="dian"> <img src="images/10.jpg" v-show="flag"><!-- v-bind 绑定标签的属性--> <img v-bind:src="img" alt="" v-bind:title="ti"> <br> <input type="button" value="点击事件" v-on:click="tooggleActive"> <br><!-- v-show只是设置了system：dispalay=none v-if是否显示该标签--><!-- <img src="images/01.jpg" v-show="age>18" alt="">--> <img src="images/01.jpg" v-if="flag" alt=""><!-- 使用v-bind--><!-- <img src="images/09.jpg" v-bind:class="isActive?'active':''">--><!-- isActive为true，则表示active class生效 --> <img src="images/09.jpg" v-bind:class="{active:isActive}" alt=""></div></body><script> const app = new Vue({ el:"#app", data:{ message:"你好哈哈哈", flag:false, age:17, isActive:false, img:"imaiges/03.jpg", t:"真好看" }, //方法定义 methods:{ dian(){ this.flag=!this.flag; }, incrAge(){ this.age++; }, tooggleActive(){ this.isActive=!this.isActive; } } })</script></html>切换图片案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <title>图片切换</title> <link rel="stylesheet" href="./css/imgaeIndex.css"/></head><body><div id="mask"> <div class="center"> <h2 class="title"> <img src="./images/logo.png" alt=""> 深圳创维校区环境 </h2> <!-- 图片 --> <img v-bind:src="image[index]" alt=""/> <!-- 左箭头 --> <a href="javascript:void(0)" class="left" @click="prev" v-if="index>0"> <img src="./images/prev.png" alt=""/> </a> <!-- 右箭头 --> <a href="javascript:void(0)" class="right" @click="next1"v-show="index<image.length-1"> <img src="./images/next.png" alt=""/> </a> </div></div><script src="./js/vue.js"></script><script> const app = new Vue({ el: "#mask", data: { //定义数组的下标 index: 0, //定义所有的图片 image: [ "images/00.jpg", "images/01.jpg", "images/02.jpg", "images/03.jpg", "images/04.jpg", "images/05.jpg", ] }, methods: { //上一页 prev(){ this.index--; }, next1(){ this.index++; } } })</script></body></html>v-for
**v-for指令的作用是:**根据数据生成列表结构
数组经常和v-for结合使用
语法是( item,index ) in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的测试代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script></head><body><div id="app"> <button @click="dianji">点击添加新同学</button><ul> <li v-for="(item,index) in student"> { {index+1}}, { {item.name}} </li></ul></div></body><script> const app=new Vue({ el:"#app", //数据标记 data:{ student:[ { name:"张三",age:14}, { name:"张三1",age:32}, { name:"张三2",age:42}, { name:"张三3",age:12} ] }, //方法的定义 methods:{ dianji(){ //点击添加新同学 this.student.push({ name:"历史",age:33}); } } })</script></html>v-on
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符 可以对事件进行限制
.enter 可以限制触发的按键为回车
事件修饰符有多种
@keyup键盘事件v-model
获取和设置表单元素的值(双向数据绑定)
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据←→表单元素的值
v-on和 v-model测试代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script></head><body><div id="app"> <button @click="changeName">点击</button> <input type="text" v-model="name" @keyup.enter="change"> <textarea v-model="name"></textarea> { {name}}</div></body><script> const app = new Vue({ el: "#app", data: { name: "子明" }, methods:{ changeName(){ this.name="峥峥" }, change(){ alert(this.name); }, } })</script></html>小黑记事本案例
<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>小黑记事本</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta name="robots" content="noindex, nofollow"/> <meta name="googlebot" content="noindex, nofollow"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="./css/Bookindex.css"/></head><body><!-- 主体区域 --><section id="todoapp"> <!-- 输入框 --> <header class="header"> <h1>小黑记事本</h1> <input autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo" v-model="content" @keyup.enter="inputContext" /> </header> <!-- 列表区域 --> <section class="main"> <ul class="todo-list"> <li class="todo" v-for="(item,index) in arr"> <div class="view"> <span class="index">{ {index+1}}.</span> <label>{ {item}}</label> <button class="destroy" v-on:click="del(index)"></button> </div> </li> </ul> </section> <!-- 统计和清空 --> <footer class="footer"> <span class="todo-count"> <strong>{ {arr.length}}</strong> items left </span> <button class="clear-completed" @click="clear"> Clear </button> </footer></section><!-- 底部 --><footer class="info"> <p> <a href="http://www.baidu.com" ><img src="./img/logo.png" alt="" /></a> </p></footer><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="./js/vue.js"></script><script> const app = new Vue({ el: "#todoapp", data: { //声明一个数组 arr: [ "吃饭饭", "打豆豆", "睡觉觉" ], content: "好好学习，天天向上" }, // 添加 methods: { inputContext() { this.arr.push(this.content) }, // 删除 del(index) { this.arr.splice(index, 1); } , // 清空 clear() { this.arr={ } } // 统计 } })</script></body></html>axios访问网络接口
Ajax(Asynchronous JavaScript and XML)：异步网络请求。Ajax能够让页面无刷新的请求数据。
实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊
axios:作用:访问网络接口的。
语法格式：axios.get("url?key=value").then(function(success){ },function(error){ });axios.post("url?key=value",{ key:value,key:value}).then(function(success){ },function(error){ });思考: 如果post提交而且参数是{key:value}的JSON格式。 接口API如何接受该参数。—>对象接受. json转化java对象。@RequestBody.
axios.put()
axios.delete();
Axios，可以理解为ajax i/o system，这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点：云知道天气预报
引入的静态文件：
<link rel="stylesheet" href="../css/reset.css"/><link rel="stylesheet" href="../css/tianindex.css"/><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="../js/vue.js"></script><!-- 官网提供的 axios 在线地址 --><script src="../js/axios.min.js"></script>页面代码
<div class="wrap" id="app"> <div class="search_form"> <div class="logo"><img src="../img/logo.png" alt="logo"/></div> <div class="form_group"> <input type="text" v-model="city" class="input_txt" placeholder="请输入查询的天气" @keyup.enter="searchCity" /> <button class="input_sub" @click="searchCity"> 搜 索 </button> </div> <div class="hotkey"> <a href="javascript:;" v-for="item in hotCity" @click="checkCity(item)">{ {item}}</a> </div> </div> <ul class="weather_list"> <li v-for="item in weathers"> <div class="info_type"><span class="iconfont">{ {item.type}}</span></div> <div class="info_temp"> <b>{ {item.low}}</b> ~ <b>{ {item.high}}</b> </div> <div class="info_date"><span>{ {item.date}}</span></div> </li> </ul></div>js代码
<script> const app = new Vue({ el: "#app", data: { hotCity: [ "上海", "郑州", "武汉", "厦门" ], city: "", weathers: "", }, methods: { //根据城市名查询天气 searchCity() { axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=${ this.city}`).then(function (dataInfo) { app.weathers = dataInfo.data.data.forecast; console.log(app.weathers) }) }, // 点击城市，会将城市放到输入框，在进行查找天气 checkCity(city) { // 将天气放入文本框 app.city = city; // 再调用查询天气的方法 this.searchCity(); } } })</script>网易音乐
引入的静态文件：
<!-- 样式 --> <link rel="stylesheet" href="../css/musicIndex.css"> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="../js/vue.js"></script> <!-- 官网提供的 axios 在线地址 --> <script src="../js/axios.min.js"></script>页面代码
<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="serach" @keyup.enter="searchMusic"/> </div> <div class="center_con"> <!-- 搜索歌曲列表 --> <div class='song_wrapper'> <ul class="song_list"> <li v-for="item in musicList"><a href="javascript:;" @click="palyMusic(item.id)"></a> <b>{ {item.name}}</b> <span v-show="item.mvid!=0" @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"> <img src="../images/player_bar.png" class="play_bar"/> <!-- 黑胶碟片 --> <img src="../images/disc.png" class="disc autoRotate"/> <img src="../images/cover.png" class="cover autoRotate"/> </div> <!-- 评论容器 --> <div class="comment_wrapper"> <h5 class='title'>热门留言</h5> <div class='comment_list'> <dl v-for="w in hotComment"> <dt><img :src="w.user.avatarUrl" alt=""></dt> <dd class="name">{ {w.user.nickname}}</dd> <dd class="detail"> { {w.content}} </dd> </dl> </div> <img src="../images/line.png" class="right_line"> </div> </div> <div class="audio_con"> <audio ref='audio' :src="musicUrl" controls autoplay loop class="myaudio"></audio> </div> <div class="video_con" v-show="idShow"> <video controls="controls" :src="mvUrl"></video> <div class="mask"></div> </div> </div></div>js代码
<script> const app = new Vue({ el: "#player", data: { serach: "", //音乐列表 musicList: [], musicUrl: "", //所有评论 hotComment: [], // mv路径 mvUrl: "", //是否显示 idShow:false, }, methods: { //搜索音乐 searchMusic() { axios.get(`https://autumnfish.cn/search?keywords=${ app.serach}`).then(function (dataInfo) { //将歌曲赋值给音乐列表 app.musicList = dataInfo.data.result.songs; }) }, //播放音乐 每个歌曲的id palyMusic(id) { axios.get(`https://autumnfish.cn/song/url?id=${ id}`).then(function (dataInfo) { app.musicUrl = dataInfo.data.data[0].url; app.id = dataInfo.data.data[0].id; }) // 获取到评论的信息 axios.get(`https://autumnfish.cn/comment/hot?type=0&id=${ id}`).then(function (dataInfo) { //将所有评论赋值给评论的数组 app.hotComment = dataInfo.data.hotComments; }) }, //播放mv playMv(mvid) { app.isShow=true; axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(function (dataInfo) { app.mvUrl = dataInfo.data.data.url; console.loge(dataInfo.data.data.url) }) } } })</script> - 使用简洁的模板语法把数据渲染到页面上
转载地址：http://qvmg.baihongyu.com/
你可能感兴趣的文章
layui表格checkbox选择全选样式及功能
查看>>
mxsrvs支持thinkphp3.2伪静态
查看>>
mui HTML5 plus 下载文件
查看>>
环信SDK 踩坑记webIM篇（一）
查看>>
短信验证码倒计时代码
查看>>
【LeetCode】归并排序（python版）
查看>>
通信基础知识
查看>>
DSP开发板准备
查看>>
测试基本
查看>>
5.redo undo
查看>>
编码格式简介（ANSI、GBK、GB2312、UTF-8、GB18030和 UNICODE）
查看>>
《JVM的内存》
查看>>
c++中istringstream及ostringstream超详细说明
查看>>
c++中ifstream及ofstream超详细说明
查看>>
c++中endl操作符以及它的兄弟们
查看>>
c++中explicit和mutable关键字探究
查看>>
c语言结构体字节对齐详解
查看>>
linux c/c++面试知识点整理(八)
查看>>
epoll的基本使用
查看>>
linux网络编程系列(十二)--滑动窗口、拥塞控制、断线重连机制
查看>>