[前端开发] 快速入门VUE（笔记+几个小demo）
目录
基本知识
首先导入开发版VUE <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
el 挂载点
- el 用于设置VUE实例挂载（管理）的元素
- VUE会管理 el选项命中的元素及其内部的后代元素
- 可以使用各种选择器，但使用ID选择器更好。
- 除了
<html>和<body>都可以使用。
data 数据对象
- VUE中用到的数据定义在__data__中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时，遵守js的语法即可
methods 添加方法
- VUE中用到的函数方法在 methods 中
- methods 用 this.属性名 访问到 data中的数据
- 在构造函数外部可以使用 vm.方法名 定义或者调用方法
本地应用
内容绑定
v-text
- v-text 指令的作用是设置标签的内容（textContent）
- 默认写法会替换标签里的所有内容，使用 差值表达式“{{}}” 可以替换指定内容
- 内部支持写表达式
<h2 v-text="message+'!'"></h2>
v-html
- v-html 设置元素的innerHTML
- 内容中有html结构会被解析为标签
- 内容中只有文本，效果和 v-text 相同
事件绑定
v-on
- v-on 为元素绑定事件
- 事件名不需要写 on
<input type="button" value="v-on指令" v-on:click="doit"> - v-on 可以简写为 @
<input type="button" value="v-on简写" @click="doit"> - 绑定的方法定义在methods属性中
- 方法内部通过 this 关键字访问定义在data中的数据
补充： - 事件绑定的方法写成函数调用的参数，可传入参数
- 事件的后面跟上 . 修饰符，对事件进行控制
@keyup.enter
实例-计数器
<div id="app">
<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>
var app = new Vue({
el: "#app",
methods: {
sub: function(){
if(this.num==0) alert("没有了！");
else this.num--;
},
add: function(){
if(this.num==10) alert("太多了！");
else this.num++;
}
},
data:{
num: 0,
})
</script>
- VUE实例
- el 挂载点
- data 数据
- methods 方法
- v-on 绑定事件，简写为@
- this 获取 data 中数据
- v-text 设置文本值，简写为{
显示切换
v-show
- v-show 根据表达式真假切换元素的显示状态
- 原理是 修改display属性
- 指令后的内容，不管是什么，解析为布尔值
v-if
- v-show 根据表达式真假切换元素的显示状态
- 原理是 操作dom
- 频繁切换使用 v-show ，反之使用 v-if
属性绑定
v-bind
- v-bind 为元素绑定属性
- 完整写法： v-bind:属性名
<img v-bind:src="imgSrc" alt=""> - 简写： :属性名
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'"> - 动态增删class，可以使用对象的方式 {类名: bool型变量}
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isShow}">
实例-切换图片
<div id="app">
<a href="javascript:void(0)" @click="prev" v-show="index>0">上一张</a>
<a href="javascript:void(0)" @click="next" v-show="index<imgArr.length-1">下一张</a>
<br/>
<img :src="imgArr[index]" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
methods: {
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
},
data:{
imgArr:["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"],
index:0,
}
})
- 列表数据使用数组保存
- v-bind 设置元素属性，例如src
- v-show 和 v-if 都可以切换元素的显示状态
列表循环
v-for
- DarkCyan 根据数据生成列表结构
- 数组经常和 v-for 结合使用
- 语法： (item, index) in data
- item 和 index 可以结合其他指令使用
表单元素绑定
v-model
- v-model 便捷设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 双向绑定 绑定的数据 <=> 表单元素的值
实例-记事本
<section id="todoapp">
<header>
<h1> to do list </h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务">
</header>
<section>
<ul>
<li v-for="(item, index) in list">
<div>
<!-- <span>{{index+1}}.</span> -->
<label for="">{{item}} </label>
<button @click="remove(index)">delete</button>
</div>
</li>
</ul>
<footer v-if="list.length!=0">
<span>
{{list.length}} items left
</span>
<button @click="clear"> clear </button>
</footer>
</section>
</section>
<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) {
this.list.splice(index, 1);
},
clear:function(){
this.list = [];
}
}
})
</script>
网络应用
axios
- 导入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> - GET
axios.get(url?key1=value1&key2=value2).then(function(response{}, function(error){})); - POST
axios.post(url, {key1: value1, key2:value2}).then(function(response{}, function(error){}));
axios+vue
- 注意 axios 回调函数中的this指向window，无法访问到data的数据
- 解决方案：1）保存this；2）箭头函数；
实例-天气预报
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/2.jpg" alt="logo" height="200" width="400"></div>
<div>
<input type="text" v-model="city" class="input_txt" placeholder="请输入查询的天气" @keyup.enter="searchWeather">
<button class="input_sub"> 搜 索 </button>
</div>
<div class="hotkey">
<a href="javascript:;" @click="changeCity('北京')">北京</a>
<a href="javascript:;" @click="changeCity('上海')">上海</a>
<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
<a href="javascript:;" @click="changeCity('广州')">广州</a>
</div>
</div>
<ul class="weather_list">
<li v-for="item in weatherList">
<div><span>{{item.type}}</span></div>
<div>
<b>{{item.low}}</b>
~
<b>{{item.high}}</b>
</div>
<div><span>{{item.date}} </span></div>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
city: "",
weatherList:[]
},
methods: {
searchWeather: function () {
axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
.then(response => {
this.weatherList = response.data.data.forecast;
console.log(this.weatherList);
})
},
changeCity: function(city){
this.city = city;
this.searchWeather();
}
}
})
</script>
综合实例-音乐播放器
<div class="wrap">
<div id="player">
<div class="search_bar">
<img src="" alt="">
<input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic">
</div>
<div class="song_wraper">
<div class="song_list">
<ul>
<li v-for="item in musicList">
<a href="javascript:;" @click="playMusic(item.id)">{{item.name}}</a>
<button v-if="item.mvid!=0" @click="playMv(item.mvid)"> mv </button>
</li>
</ul>
</div>
</div>
<div class="player_con" :class="{playing:isplay}">
<img :src="musicImg" alt="">
</div>
<div class="audio_con">
<audio ref="audio" :src="musicUrl" :play="play" :pause="pause" controls autoplay loop class="myaudio"></audio>
</div>
<div class="video_con" v-show="isShow">
<video :src="mvUrl" controls="controls" ></video>
<!-- <div class="mask" @click="hide"></div> -->
<button @click="hide">关闭</button>
</div>
<div class="comment_wrapper">
<h5>热门评论</h5>
<div class="comment_list">
<dl v-for="item in musicComments">
<dt><img :src="item.user.avatarUrl" alt=""></dt>
<dd class="name">{{item.nickname}}</dd>
<dd class="detail">{{item.content}}</dd>
</dl>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: "#player",
data: {
query: "",
musicList: [],
musicUrl: "",
musicImg: "",
musicComments: [],
isplay: false,
mvUrl:"",
isShow:false
},
methods: {
searchMusic: function () {
axios.get("https://autumnfish.cn/search?keywords=" + this.query)
.then(response => {
// console.log(response);
this.musicList = response.data.result.songs;
}, error => {
console.log(error);
})
},
playMusic: function (musicId) {
axios.get("https://autumnfish.cn/song/url?id=" + musicId)
.then(response => {
// console.log(response);
this.musicUrl = response.data.data[0].url;
}, error => {
console.log(error);
})
axios.get("https://autumnfish.cn/song/detail?ids=" + musicId)
.then(response => {
console.log(response);
this.musicImg = response.data.songs[0].al.picUrl;
}, error => {
console.log(error);
})
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
.then(response => {
console.log(response);
this.musicComments = response.data.hotComments;
}, error => {
console.log(error);
})
},
play:function(){
isplay = true;
},
pause:function(){
this.isplay = false;
},
playMv:function(mvId){
axios.get("https://autumnfish.cn/mv/url?id=" + mvId)
.then(response => {
this.mvUrl = response.data.data.url;
this.isShow = true;
}, error => {
console.log(error);
})
},
hide:function(){
this.isShow = false;
}
}
})
</script>
有机会把这个案例的css补上。
