一 丶简介:
- ES6
- vue基本使用
- v-text 和 v-html
- v-if 和 v-show
- v-for
- 轮播图
- vue使用ajax
- 音乐播放器
- watch侦听器
- 计算属性
- 计算属性版-music
二丶示例
- ES6基本用法
1.1 变量的定义 let 和 const
1.1.1 let定义变量
- 没有变量提升
- 不能重复定义
- 块级作用域
1.1.2 const定义变量
- 没有变量提升
- 带来了块级作用域
- 不能重复定义
- 定义之后不能修改
- 定义的时候必须赋值
1.2 模板字符串
1.2.1 ``反引号进行字符串的拼接(tab键上面的)
1.2.2 用${}来存储变量
1.3 数据的解构和赋值
1.3.1 数组的解构和赋值
1.3.2 对象的解构和赋值
1.3.3 简单的用途：数据的交换
1.4 函数的扩展
1.4.1 默认值参数
1.4.2 箭头函数
- 箭头函数的this指向定义时的作用域
- 普通函数的this指向调用者的作用域
1.5 类
1.5.1 class关键字定义一个类
- 必须要有constructor方式（构造方法），如果没有，constructor(){}
- 必须使用new来实例化，否则报错
1.5.2 类的继承
- 必须在子类的constructor方法里面写super方法
1.6 模块化编程
1.7 对象的单体模式
- 解决了箭头函数的this指向问题
2. Vue
2.1 vue基本使用
<body>
<div id="app">
<!-- 模板语法-->
<h2>{{ msg }}</h2>
<h3>{{ 'sadsda'}}</h3>
<h3>{{1+1*3}}</h3>
<h4>{{ {'name':'alex'} }}</h4>
<!-- 插对象需要注意格式空起格子,不然代码不清除3个{}是什么意思-->
<h5>{{ person.name }}</h5>
<h2>{{1>2? '真的':'假的'}}</h2>
<p>{{ msg2.split('').reverse().join('') }}</p>
</div>
<!--1.引包-->
<script src="./vue.js"></script>
<script>
// 2 实例化对象
// el 和data固定写法需要记住
new Vue({
el: '#app', // 绑定那块地
data: {
// 数据属性 种子
msg: '黄瓜',
person:{
name:'wusir'
} , msg2:'hello Vue'
}
});
</script>
2.2 v-text和v-html
<body>
<div id="content">
{{ msg }}
<div v-text="msg"></div>
<div v-html="msg"></div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#content',
data() {
//data中是一个函数 函数中return一个对象,可以是个空对象,但不能不return
return {
msg: '<h2>alex</h2>'
}
}
})
</script>
</body>
2.3 v-if和v-show
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
height: 200px;
200px;
background-color: red;
}
.box2 {
height: 200px;
200px;
background-color: green;
}
</style>
</head>
<body>
<div id="content">
{{ add(2,3) }}
<button v-on:click='handlerClick'>隐藏</button>
<div class="box" v-show='isShow'></div>
<div class="box2" v-if='isShow'></div>
<div v-if="Math.random()>0.5">
是true,显示我
</div>
<div v-else>
是flase,显示我
</div>
</div>
<script src="./vue.js"></script>
<!--数据驱动-->
<script>
// new Vue({
// el: "#app"
// });
new Vue({
el: '#content',
data() {
//data中是一个函数 函数中return一个对象,可以是个空对象,但不能不return
return {
msg: '<h2>alex</h2>',
isShow: true
}
},
methods: {
add(x, y) {
return x + y
},
handlerClick() {
//数据驱动
console.log(this);
//取反,哈哈哈
this.isShow = !this.isShow
}
}
});
// v-if 和v-show
// v-if 是删除和重建
// v-show 基于CSS进行显示,隐藏切换
// 一般来说,v-if又更高的切换开销,v-show有更高的初始渲染开销,
// 如果频繁的切换,则使用v-show比较好, 如果在运行时条件很少去改变,则使用v-if较好
</script>
</body>
2.4 v-bind 和 v-on
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
height: 200px;
200px;
background-color: red;
}
.active {
background-color: green;
}
</style>
</head>
<body>
<!--总结:v-bind 绑定标签中的所有属性 img标签的src alt,a标签的href title id class-->
<!-- v-on 可以监听 js中的所有事件-->
<div id="app">
<!-- <button v-on:click = 'handlerChange'>切换颜色</button>-->
<!--<!– v-bind 绑定标签中的所有属性 img标签的src alt,a标签的href title id class–>-->
<!-- <img v-bind:src="imgSrc" v-bind:alt="msg">-->
<!-- <div class="box" v-bind:class="{active:isActive}"></div>-->
<!-- //v-bind和v-on的简便写法-->
<button @mouseenter='handlerChange' @mouseleave="handlerLeave">切换颜色</button>
<!-- v-bind 绑定标签中的所有属性 img标签的src alt,a标签的href title id class-->
<img :src="imgSrc" :alt="msg">
<div class="box" :class="{active:isActive}"></div>
</div>
<script src="./vue.js"></script>
<!--数据驱动视图 设计模式 MVVM Model View ViewModel-->
<script>
// v-bind和v-on的简便写法 : @
new Vue({
el: '#app',
data() {
return {
imgSrc: './3.jpg',
msg: '校花',
isActive: true
}
},
methods: {
handlerChange() {
// this.isActive = !this.isActive
this.isActive = false;
},
handlerLeave(){
this.isActive = true;
}
}
})
2.5 v -for
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
height: 200px;
200px;
background-color: red;
}
.active {
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<!-- 注意:这里ok需要加引号-->
<ul v-if="data.status == 'ok'">
<!--注意:这里需要绑定key 如果有id就绑定id,没有id就绑定index-->
<!-- v-for的优先级是最高的 diff算法 这里即用了v-for 又用了v-bind,-->
<li v-for='(item,index) in data.users' :key="item.id">
<h3>{{ item.id }}-- {{ item.name }} -- {{ item.age }}</h3>
</li>
</ul>
<!-- 主要，如果想要Key,(value,key)括起来，前面是value,后面是Key-->
<div v-for="(value,key) in person">
{{ key }}- {{ value }}
</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
data: {
status: 'ok',
users: [
{id: 1, name: 'alex', age: 18},
{id: 2, name: 'wusir', age: 128},
{id: 3, name: 'yuan', age: 38},
]
},
person: {
name: 'wind'
}
}
},
methods: {}
})
</script>
</body>
2.6 轮播图
</head>
<body>
<div id="app">
<img :src="images[currentIndex].imgSrc" alt="" @click="imgHandler">
<br>
<button @click='prevHandler'>上一张</button>
<button @click='nextHandler'>下一张</button>
</div>
<script src="./vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
images: [
{id: 1, imgSrc: './imges/a.jpg'},
{id: 2, imgSrc: './imges/b.jpg'},
{id: 3, imgSrc: './imges/c.jpg'},
{id: 4, imgSrc: './imges/d.jpg'},
],
currentIndex: 0
}
},
methods: {
nextHandler() {
this.currentIndex++;
// 更改图片地址
if (this.currentIndex > 3) {
this.currentIndex = 0;
}
},
prevHandler() {
this.currentIndex--;
if (this.currentIndex < 0) {
this.currentIndex = 3;
}
},
imgHandler(e) {
// e.target 当前目标对象
console.log(e.target);
console.log(this)
}
},
//这是一个方法，跟data和methods是同级, Vue的钩子函数
// 组件创建完成，可以立即发送ajax请求
created() {
// 方法一
// this指向问题，能用箭头函数,其指向当前的Vue,不要用匿名函数function()，其指向的Windows
setInterval(() => {
// console.log(this);
this.currentIndex++;
// 更改图片地址
if (this.currentIndex > 3) {
this.currentIndex = 0;
}
}, 1000);
// 方法二，使用匿名函数function(),声明this，保存起来
// let _this =this;
// setInterval(function(){
// console.log(_this);
// },1000);
}
})
</script>
</body>
2.7 vue使用ajax
</head>
<body>
<div id="app">
<div>
<span @click="handlerClick(index)" v-for='(category,index) in categoryList' :key="category.id"
:class='{active:0==index}'>
{{ category.name }}}
</span>
</div>
</div>
<script src="./vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
categoryList: [],
currentIndex: 0,
}
},
methods: {
handlerClick(index) {
this.currentIndex = index
}
},
created() {
$.ajax({
url: 'https://www.luffycity.com/api/v1/course_sub/category/list/',
type: 'get',
success: (data) => {
console.log(data);
},
error: function (err) {
console.log(err);
if (data.error_no === 0) {
var data = data.data;
let obj = {
id: 0,
name: '全部',
category: 0,
};
this.categoryList = data;
this.categoryList.unshift(obj)
}
}
})
}
})
</script>
</body>
2.8 音乐播放器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li.active{
background-color: darkcyan;
}
</style>
</head>
<body>
<div id="music">
<!-- @ended方法在mp3当前歌曲播放结束后自动调取该方法-->
<audio :src="musicData[currentIndex].songSrc" controls autoplay @ended = 'nextHandler'></audio>
<ul>
<li @click = 'songHandler(index)' v-for = '(item,index) in musicData ' :key="item.id" :class="{active:index===currentIndex}">
<h2>歌手：{{ item.author }}</h2>
<p>歌名:{{ item.name }}</p>
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
var musicData1 = [{
id: 1,
name: '于荣光 - 少林英雄',
author: '于荣光',
songSrc: './static/于荣光 - 少林英雄.mp3'
},
{
id: 2,
name: 'Joel Adams - Please Dont Go',
author: 'Joel Adams',
songSrc: './static/Joel Adams - Please Dont Go.mp3'
},
{
id: 3,
name: 'MKJ - Time',
author: 'MKJ',
songSrc: './static/MKJ - Time.mp3'
},
{
id: 4,
name: 'Russ - Psycho (Pt. 2)',
author: 'Russ',
songSrc: './static/Russ - Psycho (Pt. 2).mp3'
}
];
new Vue({
el:'#music',
data(){
return {
musicData:[],
currentIndex:0
}
},
methods:{
songHandler(i){
this.currentIndex = i;
},
nextHandler() {
this.currentIndex ++;
}
},
created(){
this.musicData =musicData1
}
})
</script>
</body>
</html>
2.9 watch侦听器
</head>
<body>
<div id="app">
<button @click="ClickHandler">修改</button>
<p>{{ msg }}</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
msg: 'alex',
age:18
}
},
methods: {
ClickHandler() {
this.msg = 'wusir'
}
},
watch: {
//watch 监听单个属性,如果想监听多个属性,声明多个属性
'msg': function (value) {
console.log(value);
if (value==='wusir'){
alert(666);
this.msg = '常建'
}
},
//可以监听data里面多个属性
'age':function (v) {
console.log(v)
}
}
})
</script>
</body>
2.10 计算属性 computed
<body>
<div id="app">
<button @click="ClickHandler">修改</button>
<p>{{ myMsg }}</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
msg: 'alex',
age:18,
}
},
methods: {
ClickHandler(){
console.log(this);
this.msg = 'wusir';
this.age = 22
}
},
computed:{
// 计算属性可以监听单个和多个比watch方便的多
// myMsg名字可以自定义,随便起
myMsg:function () {
// 计算属性默认只有getter方法
// 这里使用了tab上面的反引号
console.log(this);
return `我的名字${this.msg},年龄是${this.age}`
}
},
created(){
// 在js里面一个方法在套一个方法,称为小闭包,this会发生改变,这时建议用箭头函数
setInterval( ()=> {
console.log(this)
})
}
})
</script>
</body>
2.11 计算属性版-music
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li.active {
background-color: darkcyan;
}
</style>
</head>
<body>
<div id="music">
<!-- @ended方法在mp3当前歌曲播放结束后自动调取该方法-->
<audio :src="currentSong" controls autoplay @ended='nextHandler'></audio>
<ul>
<li @click='songHandler(index)' v-for='(item,index) in musicData ' :key="item.id"
:class="{active:index===currentIndex}">
<h2>歌手：{{ item.author }}</h2>
<p>歌名:{{ item.name }}</p>
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
var musicData1 = [{
id: 1,
name: '于荣光 - 少林英雄',
author: '于荣光',
songSrc: './static/于荣光 - 少林英雄.mp3'
},
{
id: 2,
name: 'Joel Adams - Please Dont Go',
author: 'Joel Adams',
songSrc: './static/Joel Adams - Please Dont Go.mp3'
},
{
id: 3,
name: 'MKJ - Time',
author: 'MKJ',
songSrc: './static/MKJ - Time.mp3'
},
{
id: 4,
name: 'Russ - Psycho (Pt. 2)',
author: 'Russ',
songSrc: './static/Russ - Psycho (Pt. 2).mp3'
}
];
new Vue({
el: '#music',
data() {
return {
musicData: [],
currentIndex: 0
}
},
computed: {
currentSong() {
return this.musicData[this.currentIndex].songSrc
}
},
methods: {
songHandler(i) {
this.currentIndex = i;
},
nextHandler() {
this.currentIndex++;
},
},
created() {
this.musicData = musicData1
},
})
</script>
</body>