-
Vue是啥？
它是构建用户界面的JavaScript框架（让它自动生成js,css，html等） -
引入Vue
-
let和const
let先声明后使用，不存在变量提升
let不能重复定义,但是可以修改
var既可以先声明后使用，也可以先使用后声明，这样不会报错，会打印undified,而let必须是先 声明后使用，如果没有声明就会报错
consta =‘hello’ //const就是定义一个常量//常量是不能修改的 -
模板字符串
'${变量名}'(是esc下变的引号) -
箭头函数
funcion(){} == ()=>{} 存在问题： 1.this的指向问题 2.arguments不能用 -
通过定义对象取值
<div id="app"> <p>{{msg}}</p> <p>{{ 80+2 }}</p> <p>{{ 20>30 }}</p> <h1 v-text="msg"></h1> <h1 v-html="hd"></h1> <h1 v-html="str"></h1> </div> <script> new Vue({ el:"#app", //表示当前这个元素开始使用vue data:{ msg:"你好啊", hd:"<input type='button' value='啦啦'>", str:"你妹的" } }) </script> -
可以插入标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <div v-html="htmlstr" v-show="test"></div> </div> <script> new Vue({ el:"#app", //表示当前这个元素开始使用vue data:{ htmlstr:'<textarea></textarea>', test:false //默认是隐藏的 }, methods:{ qita:function () { this.test = !this.test //当一点击其他的时候让显示 } } }); </script> </body> </html> -
对象单体模式
var person = { name:'丫丫', age:12, fav(){ console.log(this.name,this.age); } } person.fav(); -
构造函数的方式创建对象
function Animal(name,age) { this.name = name; this.age = name; } Animal.prototype.showName = function () { console.log(this.name); }; var dog = new Animal('小黑',11) -
面向对象
class Animal{ constructor(name,age){ this.name = name; this.age = age; } showName(){ console.log(this.name) } } var d = new Animal('小黑',11); d.showName(); -
指令系统：V-*
（1）v-if<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> ... data:{ type:'A', }
(2)v-for<div> <img :src="currentSrc" alt=""> <ul> <li v-for = "(item,i) in imageArr">{{i+1}}</li> </ul> </div> data:{ imageArr:[ {id:1,src:'images/img1.jpg'}, {id:2,src:'images/img2.jpg'}, {id:3,src:'images/img3.jpg'} ], },
(3)v-bind 等于 : （绑定属性）<h3 v-show = 'isshow' v-bind:title="title">哈哈哈</h3> data:{ isshow:true, },
（4）v-on 等于 @（绑定事件）<button v-on:click = "clickhander" >切换</button> <div v-if = 'show'>嘻嘻</div> data:{ show:true, }, methods:{ clickhander:function(){ this.show = !this.show; }, }
(5)v-model<input type="text" v-model='msg'> <h3>{{msg}}</h3>
-
计算属性
<!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>Document</title>
</head>
<body>
<div id="app">
<form action="">
<input type="text" v-model='msg'>
<h3>{{msg}}</h3>
</form>
<div>
{{reverseStr}}
</div>
<button @click = "changetext">修改</button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>
var app = new Vue(
{
el:"#app",
//所有的数据都放在数据属性中
data:{
msg:'123',
text:'hello word'
},
methods:{
changetext(){
this.text = 'hello long';
}
},
// 计算属性(返回的相关数据都会被监听起来)
computed:{
reverseStr(){
return this.text.split('').reverse().join('');
}
}
}
)
</script>
</body>
</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>Document</title>
<style>
img{
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<div id="app">
<!-- mouseenter：鼠标箭头进入事件 mouseleave： 鼠标箭头离开事件-->
<div class="img" @mouseenter = "closeTimer" @mouseleave = 'openTimer'>
<img :src="currentSrc" alt="">
<ul>
<li v-for = "(item,i) in imageArr" @click= "currentHandler(item)">{{i+1}}</li>
</ul>
</div>
<button @click = "nextImage">下一张</button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>
var app = new Vue(
{
el:"#app",
//所有的数据都放在数据属性中
data:{
imageArr:[
{id:1,src:'images/img1.jpg'},
{id:2,src:'images/img2.jpg'},
{id:3,src:'images/img3.jpg'}
],
currentSrc:'images/img1.jpg',
currentindex:0,
timer:null
},
//事件
methods:{
currentHandler(item){
this.currentSrc = item.src;
},
nextImage(){
if(this.currentindex == this.imageArr.length-1)
{
this.currentindex = -1;
}
this.currentindex++;
this.currentSrc = this.imageArr[this.currentindex].src;
},
// 关闭定时器
closeTimer(){
clearInterval(this.timer);
},
// 打开定时器
openTimer(){
this.timer = setInterval(this.nextImage,2000);
}
},
//定时任务
created(){
this.timer = setInterval(this.nextImage,2000);
}
}
)
</script>
- 音乐播放器示类
<!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>Document</title>
</head>
<body>
<div id="music">
<audio :src="currensong" autoplay = "" controls = "" @ended = "nextsong"></audio>
<ul>
<li v-for = "(item,index) in audios" @click = "clickhandle(index)">
<h3>
歌名:{{item.name}}
</h3>
<p>
歌手:{{item.author}}
</p>
</li>
</ul>
<button @click = "addsong">添加歌曲</button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>
var songs = [
{id:1,name:"陪着你走",author:"龙飞",src:"music/Gibb-Z ICE - 陪着你走.mp3"},
{id:2,name:"陪着你走",author:"龙飞",src:"music/浮光 - 斑马，斑马.mp3"}
]
var music = new Vue({
el:"#music",
data:{
audios:songs,
currenindex:0,
},
methods:{
clickhandle(index){
this.currenindex = index;
},
nextsong(){
this.currenindex++;
},
addsong(){
this.audios.push({id:2,name:"陪着你走",author:"龙飞",src:"music/浮光 - 斑马，斑马.mp3"});
}
},
computed:{
currensong(){
// 计算的是计算数据属性
return this.audios[this.currenindex].src;
}
},
created:{
}
})
</script>
</body>
</html>