el:挂载点
Vue实例的作用范围是什么呢？
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器？
可以使用其他的选择器,但是建议使用ID选择器
是否可以设置其他的dom元素呢？
可以使用其他的双标签,不能使用HTML和BODY
<!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>el:挂载点</title></head><body id="body">{{ message }}<h2 id="app" class="app"> {{ message }} <span> {{ message }} </span></h2><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> var app = new Vue({ // el:"#app", // el:".app", // el:"div", el:"#body", data:{ message:"黑马程序员" } })</script></body></html>data:数据对象
Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时,遵守js的语法即可
<div id="app"> {{ message }} </div>var app = new Vue({ el:"#app", data:{ message:"黑马程序员", array:[], obj:{}, } })Vue指令指的是,以v-开头的一组特殊语法
v-text
v-text指令的作用是:设置标签的内容(textContent)
默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
内部支持写表达式
<div id="app"> <h2 v-text="message+’!’"></h2> <h2>深圳{{ message + "!"}}</h2> </div>var app = new Vue({ el:"#app", data:{ message:"黑马程序员" } })v-html
v-html指令的作用是:设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么,只会解析为文本
解析文本使用v-text,需要解析html结构使用v-html
<div id="app"> <p v-html=“content"></p> </div> var app = new Vue({ el:"#app", data:{ // content:"黑马程序员" content:"<a href='#'>黑马程序员</a>" } })v-on基础
v-on指令的作用是:为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符 可以对事件进行限制
v-on补充
.enter 可以限制触发的按键为回车
事件修饰符有多种
<div id="app"> <input type="button" value="事件绑定" v-on:click=“doIt"> <input type="button" value="事件绑定" v-on:monseenter=“doIt"> <input type="button" value="事件绑定" v-on:dblclick=“doIt"> <input type="button" value="事件绑定" @dblclick=“doIt"> </div> var app = new Vue({ el:"#app", methods:{ doIt:function(){ // 逻辑 } } })<div class="input-num"> <button @click=“sub">-</button> <span>{{ num }}</span> <button @click=“add">+</button> </div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 编码 --><script> /* 1. data中定义num属性,类型是数字,渲染到2个按钮中间 2. 减号绑定点击事件,对应的方法名叫sub,大于0之前递减 3. 加号绑定点击事件,对应的方法名叫add,小于0之前累加 */ // 创建Vue实例 var app = new Vue({ el: "#app", data: { // 修改的数字 num:1 }, methods: { // 减 sub:function(){ // console.log("sub"); // 递减 if(this.num>0){ this.num--; }else{ alert("别点啦,太小啦!"); } }, // 加 add:function(){ // console.log("add"); // 累加 if(this.num<10){ this.num++; }else{ alert("别点啦,太大啦!"); } } } });</script><body><div id="app"> <input type="button" value="点击" @click="doIt(666,'老铁')"> <input type="text" @keyup.enter="sayHi"></div><!-- 1.开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> var app = new Vue({ el:"#app", methods: { doIt:function(p1,p2){ console.log("做it"); console.log(p1); console.log(p2); }, sayHi:function(){ alert("吃了没"); } }, })</script></body>v-show
v-show指令的作用是:根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新
<body><div id="app"> <input type="button" value="切换显示状态" @click="changeIsShow"> <input type="button" value="累加年龄" @click="addAge"> <img v-show="isShow" src="./img/monkey.gif" alt=""> <img v-show="age>=18" src="./img/monkey.gif" alt=""></div><!-- 1.开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> var app = new Vue({ el:"#app", data:{ isShow:false, age:9 }, methods: { changeIsShow:function(){ this.isShow = !this.isShow; }, addAge:function(){ this.age++; } }, })</script></body>v-if
根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)
频繁的切换v-show,反之使用v-if,前者的切换消耗小
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
<body><div id="app"> <input type="button" value="切换显示" @click="toggleIsShow"> <p v-if="isShow">黑马程序员</p> <p v-show="isShow">黑马程序员 - v-show修饰</p> <h2 v-if="temperature>=35">热死啦</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> var app = new Vue({ el:"#app", data:{ isShow:false, temperature:36 }, methods: { toggleIsShow:function(){ this.isShow = !this.isShow; } }, })</script></body>v-bind
设置元素的属性(比如:src,title,class)
v-bind指令的作用是:为元素绑定属性
完整写法是 v-bind:属性名
简写的话可以直接省略v-bind,只保留 :属性名
需要动态的增删class建议使用对象的方式
<body><div id="app"> <img v-bind:src="imgSrc" alt=""> <br> <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive"> <br> <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> var app = new Vue({ el:"#app", data:{ imgSrc:"http://www.itheima.com/images/logo.png", imgTitle:"黑马程序员", isActive:false }, methods: { toggleActive:function(){ this.isActive = !this.isActive; } }, })</script></body>图片切换实例
<body><div id="mask"> <div class="center"> <h2 class="title"><img src="./images/logo.png" alt=""> 深圳创维校区环境</h2> <img :src="imgList[index]" alt="" /> <a href="javascript:void(0)" @click="prev" class="left" v-show="index>0" > <img src="./images/prev.png" alt="" /> </a> <a href="javascript:void(0)" @click="next" class="right" v-show="index<imgList.length-1" > <img src="./images/next.png" alt="" /> </a> </div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> const app = new Vue({ el: "#mask", data: { imgList: [ "./images/00.jpg", "./images/01.jpg", "./images/02.jpg", "./images/03.jpg", "./images/04.jpg", "./images/05.jpg", "./images/06.jpg", "./images/07.jpg", "./images/08.jpg", "./images/09.jpg", "./images/10.jpg", ], index: 0 }, methods: { // 上一张 prev() { this.index--; }, // 下一张 next() { this.index++; } } });</script></body>v-for
根据数据生成列表结构
v-for指令的作用是:根据数据生成列表结构
数组经常和v-for结合使用，语法是( item,index ) in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的
<body><div id="app"> <input type="button" value="添加数据" @click="add"> <input type="button" value="移除数据" @click="remove"> <ul> <li v-for="(it,index) in arr"> {{ index+1 }}黑马程序员校区:{{ it }} </li> </ul> <h2 v-for="item in vegetables" v-bind:title="item.name"> {{ item.name }} </h2></div><!-- 1.开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> var app = new Vue({ el:"#app", data:{ arr:["北京","上海","广州","深圳"], vegetables:[ {name:"西兰花炒蛋"}, {name:"蛋炒西蓝花"} ] }, methods: { add:function(){ this.vegetables.push({ name:"花菜炒蛋" }); }, remove:function(){ this.vegetables.shift(); } }, })</script></body>v-model
获取和设置表单元素的值(双向数据绑定)
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据←→表单元素的值
<body><div id="app"> <input type="button" value="修改message" @click="setM"> <input type="text" v-model="message" @keyup.enter="getM"> <h2>{{ message }}</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> var app = new Vue({ el:"#app", data:{ message:"黑马程序员" }, methods: { getM:function(){ alert(this.message); }, setM:function(){ this.message ="酷丁鱼"; } }, })</script></body>记事本实例，添加、删除、清除、隐藏
<body><!-- 主体区域 --><section id="todoapp"> <!-- 输入框 --> <header class="header"> <h1>小黑记事本</h1> <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo" /> </header> <!-- 列表区域 --> <section class="main"> <ul class="todo-list"> <li class="todo" v-for="(item,index) in list"> <div class="view"> <span class="index">{{ index+1 }}.</span> <label>{{ item }}</label> <button class="destroy" @click="remove(index)"></button> </div> </li> </ul> </section> <!-- 统计和清空 --> <footer class="footer" v-show="list.length!=0"> <span class="todo-count" v-if="list.length!=0"> <strong>{{ list.length }}</strong> items left </span> <button v-show="list.length!=0" class="clear-completed" @click="clear"> Clear </button> </footer></section><!-- 底部 --><footer class="info"> <p> <a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a> </p></footer><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> var app = new Vue({ el: "#todoapp", data: { list: ["写代码", "吃饭饭", "睡觉觉"], inputValue: "好好学习,天天向上" }, methods: { add: function () { this.list.push(this.inputValue); }, remove: function (index) { console.log("删除"); console.log(index); this.list.splice(index, 1); }, clear: function () { this.list = []; } }, })</script></body>axios
axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容,或错误信息
axios回调函数中的this已经改变,无法访问到data中数据
把this保存起来,回调函数中直接使用保存的this即可
和本地应用的最大区别就是改变了数据来源
自定义参数可以让代码的复用性更高
methods中定义的方法内部，可以通过this关键字点出其他的方法
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> axios.get(地址?key=value&key2=values).then( function(response) {}, function(err) {} ) axios.post(地址,{key:value,key2:value2}).then( function(response) {}, function(err) {} )<body><input type="button" value="get请求" class="get"><input type="button" value="post请求" class="post"><!-- 官网提供的 axios 在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script> /* 接口1:随机笑话 请求地址:https://autumnfish.cn/api/joke/list 请求方法:get 请求参数:num(笑话条数,数字) 响应内容:随机笑话 */ document.querySelector(".get").onclick = function () { axios.get("https://autumnfish.cn/api/joke/list?num=6") // axios.get("https://autumnfish.cn/api/joke/list1234?num=6") .then(function (response) { console.log(response); },function(err){ console.log(err); }) } /* 接口2:用户注册 请求地址:https://autumnfish.cn/api/user/reg 请求方法:post 请求参数:username(用户名,字符串) 响应内容:注册成功或失败 */ document.querySelector(".post").onclick = function () { axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"}) .then(function(response){ console.log(response); console.log(this.skill); },function (err) { console.log(err); }) }</script></body><body><div id="app"> <input type="button" value="获取笑话" @click="getJoke"> <p> {{ joke }}</p></div><!-- 官网提供的 axios 在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> /* 接口:随机获取一条笑话 请求地址:https://autumnfish.cn/api/joke 请求方法:get 请求参数:无 响应内容:随机笑话 */ var app = new Vue({ el:"#app", data:{ joke:"很好笑的笑话" }, methods: { getJoke:function(){ // console.log(this.joke); var that = this; axios.get("https://autumnfish.cn/api/joke").then(function(response){ // console.log(response) console.log(response.data); // console.log(this.joke); that.joke = response.data; },function (err) { }) } }, })</script></body><body><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" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="queryWeather" /> <button class="input_sub" @click="queryWeather"> 搜 索 </button> </div> <div class="hotkey"> <!-- <a href="javascript:;" @click="clickSearch('北京')">北京</a> <a href="javascript:;" @click="clickSearch('上海')">上海</a> <a href="javascript:;" @click="clickSearch('广州')">广州</a> <a href="javascript:;" @click="clickSearch('深圳')">深圳</a> --> <a href="javascript:;" v-for="city in hotCitys" @click="clickSearch(city)">{{ city }}</a> </div> </div> <ul class="weather_list"> <li v-for="(item,index) in forecastList" :key="item.date" :style="{transitionDelay:index*100+'ms'}"> <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><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 官网提供的 axios 在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script> new Vue({ el: "#app", data: { city: "武汉", forecastList: [], hotCitys: ["北京", "上海", "广州", "深圳"] }, methods: { queryWeather() { this.forecastList = []; axios .get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`) .then(res => { console.log(res); this.forecastList = res.data.data.forecast; }) .catch(err => { console.log(err); }) .finally(() => { }); }, clickSearch(city) { this.city = city; this.queryWeather(); } } });</script></body><body><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' ref='song_wrapper'> <ul class="song_list"> <li v-for="item in musicList"> <!-- 点击放歌 --> <a href="javascript:;" @click='playMusic(item.id)'></a> <b>{{item.name}}</b> <span> <i @click="playMv(item.mvid)" v-if="item.mvid!=0"></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="coverUrl==''?'./images/cover.png':coverUrl" class="cover autoRotate" /> </div> <!-- 评论容器 --> <div class="comment_wrapper" ref='comment_wrapper'> <h5 class='title'>热门留言</h5> <div class='comment_list'> <dl v-for="item in hotComments"> <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="musicUrl" controls autoplay loop class="myaudio"></audio> </div> <div class="video_con" v-show="showVideo"> <video ref='video' :src="mvUrl" controls="controls"></video> <div class="mask" @click="closeMv"></div> </div> </div></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 官网提供的 axios 在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="text/javascript"> // 设置axios的基地址 axios.defaults.baseURL = 'https://autumnfish.cn'; // axios.defaults.baseURL = 'http://localhost:3000'; // 实例化vue var app = new Vue({ el: "#player", data: { // 搜索关键字 query: '', // 歌曲列表 musicList: [], // 歌曲url musicUrl: '', // 是否正在播放 isPlay: false, // 歌曲热门评论 hotComments: [], // 歌曲封面地址 coverUrl: '', // 显示视频播放 showVideo: false, // mv地址 mvUrl: '' }, // 方法 methods: { // 搜索歌曲 searchMusic() { if (this.query == 0) { return } axios.get('/search?keywords=' + this.query).then(response => { // 保存内容 this.musicList = response.data.result.songs; }) // 清空搜索 this.query = '' }, // 播放歌曲 playMusic(musicId) { // 获取歌曲url axios.get('/song/url?id=' + musicId).then(response => { // 保存歌曲url地址 this.musicUrl = response.data.data[0].url }) // 获取歌曲热门评论 axios.get('/comment/hot?type=0&id=' + musicId).then(response => { // console.log(response) // 保存热门评论 this.hotComments = response.data.hotComments }) // 获取歌曲封面 axios.get('/song/detail?ids=' + musicId).then(response => { // console.log(response) // 设置封面 this.coverUrl = response.data.songs[0].al.picUrl }) }, // audio的play事件 play() { this.isPlay = true // 清空mv的信息 this.mvUrl = '' }, // audio的pause事件 pause() { this.isPlay = false }, // 播放mv playMv(vid) { if (vid) { this.showVideo = true; // 获取mv信息 axios.get('/mv/url?id=' + vid).then(response => { // console.log(response) // 暂停歌曲播放 this.$refs.audio.pause() // 获取mv地址 this.mvUrl = response.data.data.url }) } }, // 关闭mv界面 closeMv() { this.showVideo = false this.$refs.video.pause() }, // 搜索历史记录中的歌曲 historySearch(history) { this.query = history this.searchMusic() this.showHistory = false; } }, })</script></body>声明：本站内容部分源于网络转载，出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。文章内容仅供参考，请咨询相关专业人士。
如果无意之中侵犯了您的版权，或有意见、反馈或投诉等情况, 请联系本站，[qq:]
Copyright ©2024 编程密语 All rights reserved 版权所有 鲁ICP备09004228号-12
鲁公网安备37020202000738号