第一天
1_first_DOM.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>Document</title>
</head>
<body>
<button id="btn1">clicn me(0)</button>
<script>
//只要涉及交互: DOM 4步:
//1. 查找触发事件的元素
var btn1=document.getElementById("btn1");
//2. 绑定事件处理函数
btn1.onclick=function(){
//3. 查找要修改的元素
var btn=this;
//4. 修改元素
var n=parseInt(
btn.innerHTML.slice(9,-1)
);
n++;
btn.innerHTML=`click me(${n})`;
}
</script>
</body>
</html>
1_first2.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>Document</title>
<!--0. 引入vue.js文件-->
<script src="js/vue.js"></script>
</head>
<body>
<!--1. 编写界面:
1.1 整个界面所有内容必须包裹在一个唯一的父元素内
1.2 找到界面中可能变化的地方,改为{{变量}}
-->
<div id="app">
<button id="btn1" @click="add">clicn me({{n}})</button>
</div>
<!--2. 编写自定义js程序-->
<script>
//2.1 定义一个对象,集中保存所有页面上需要的变量和初始值
var data={
//因为页面上需要一个变量n
//所以data对象中需要定义一个n
n:0
}
//2.2 创建Vue对象,将保存数据的data{}和界面<div id="app">绑定起来
var vm=new Vue({//请了一个快递员,名为vm
el:"#app", //负责名为#app这个小区中所有快递的派送
//data:data,
data,//将保存所有变量的data对象作为这个快递员的库房
//Vue规定,所有处理函数都必须放在methods中
methods:{
//因为页面上需要一个add函数
//所以methods中就要加一个add函数
//add:function(){ ... }
add(){
//本来想该button中的n
//但是vue会自动派送
//所以只改data中的n即可
//vue要求,事件处理函数想修改data中的变量,必须加this.
this.n++;
}
}
})
/*//只要涉及交互: DOM 4步:
//1. 查找触发事件的元素
//不用程序找了!用肉眼找!
//2. 绑定事件处理函数
//不用js绑定了!改为在HTML中手工绑定!<button @click="add">
//3. 查找要修改的元素
//彻底没有了!因为Vue不直接修改元素!
//4. 修改元素
//遥控修改:只修改data中的变量值即可,只要data中变量值变化,new Vue会自动将data中的新变量值同步到界面上{{}}指定位置!
*/
</script>
</body>
</html>
1_first3.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Welcome</h1>
<button id="btn1" @click="add">clicn me({{n}})</button><span>*</span>
</div>
<script>
var data={n:0}
var vm=new Vue({
el:"#app",
data,
methods:{
add(){ this.n++; }
}
})
</script>
</body>
</html>
3_{{}}.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>用户名: {{uname}}</h1>
<h2>价格:¥{{price.toFixed(2)}}</h2>
<h3>性别:{{sex==1?"男":"女"}}</h3>
<h4>登录时间:{{new Date(logintime).toLocaleString()}}</h4>
<h4>星期{{week[day]}}</h4>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
uname:"dingding",
price:12.5,
sex:1,
logintime:1566199863843,
week:["日","一","二","三","四"],
day:1
}
})
</script>
</body>
</html>
4_v-bind.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>空气净化器</h1>
<h2>{{pm25}}</h2>
<h2>{{pm25<100?'img/1.png':
pm25<200?'img/2.png':
pm25<300?'img/3.png':
'img/4.png'}}</h2>
<img :src="pm25<100?'img/1.png':
pm25<200?'img/2.png':
pm25<300?'img/3.png':
'img/4.png'">
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
pm25:180
}
});
setInterval(function(){
//vm.data.pm25=
vm.pm25=Math.random()*400
},2000)
</script>
</body>
</html>
5_v-show.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{pno}}/{{pcount}}</span>
<button v-show="pno<pcount" @click="next">下一页</button>
</div>
<script>
//页面需要显示: 当前第几页pno
// 和共几页 pcount
//每单击一次按钮,pno+1
//只有pno<pcount时,按钮才显示!
var vm=new Vue({
el:"#app",
data:{
pno:1,
pcount:3
},
methods:{
next(){
this.pno++;
}
}
})
</script>
</body>
</html>
6_v-if.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div id="logout" v-if="isLogin==false">
<a href="javascript:;" @click="login">登录</a>
|
<a href="javascript:;">注册</a>
</div>
<div id="login" v-else>
welcome dingding
|
<a href="javascript:;" @click="logout">注销</a>
</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
isLogin:true
},
methods:{
login(){
this.isLogin=true;
},
logout(){
this.isLogin=false;
}
}
})
</script>
</body>
</html>
7_v-else-if.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>空气净化器</h1>
<h2>{{pm25}}</h2>
<img v-if="pm25<100" src="img/1.png">
<img v-else-if="pm25<200" src="img/2.png">
<img v-else-if="pm25<300"src="img/3.png">
<img v-else src="img/4.png">
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
pm25:180
}
});
setInterval(function(){
//vm.data.pm25=
vm.pm25=Math.random()*400
},2000)
</script>
</body>
</html>
第二天
1_v-for.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) of tasks" :key="index">{{index+1}} - {{item}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
tasks:["吃饭","睡觉","打亮亮"]
}
})
</script>
</body>
</html>
2_v-for.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>Document</title>
<script src="js/vue.js"></script>
<style>
ul{list-style:none}
ul>li{
float:left;
border:1px solid blue;
padding:5px 10px;
margin:0 5px;
cursor:pointer;
}
ul>li:hover{
background-color:lightblue;
}
ul>li.active{
background-color:red;
color:#fff;
border:none;
}
ul>li.disabled{
background-color:aliceblue;
color:#aaa;
border:1px solid #aaa;
}
</style>
</head>
<body>
<div id="app">
<!--因为每个li都可以单击,所以应该用事件委托优化减少事件监听的个数-->
<ul @click="change">
<!--第一个li不需要重复生成,所以不不加v-for
如果现在是第1页,则第一个li使用禁用的样式,否则去掉禁用的样式-->
<li :class="pno==1?'disabled':''">上一页</li>
<!--中间页码li需要根据总页数,反复生成多个
如果当前页码li的编号i和data中当前第几页的pno相等,就引用高亮显示的样式-->
<li v-for="i of pcount" :key="i" :class="pno==i?'active':''">{{i}}</li>
<!--最后一个li不需要重复生成,所以不不加v-for
如果现在是最后一页,则最后一个li使用禁用的样式,否则去掉禁用的样式-->
<li :class="pno==pcount?'disabled':''">下一页</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
//如果分页,只可能两个值:
pcount:3, //总页数
pno:1 //当前第几页
},
methods:{
//事件处理函数中,原理和DOM的事件委托的原理完全相同!只不过,想修改元素时,不需要查找任何元素,仅修改data中的变量就可由vue自动更新页面中元素的状态。因为,在做界面时,已经提前用三目将条件和备选值埋在了可能变化的元素中
change(e){
if(e.target.nodeName=="LI"){
switch(e.target.innerHTML){
//如果点上一页,且现在不在第一页时,就将页码-1
case "上一页":
if(this.pno>1){
this.pno--;//只改变量
}
break;
//如果点下一页,且现在不在最后一页时,就将页码+1
case "下一页":
if(this.pno<this.pcount){
this.pno++;//只改变量
}
break;
//如果点的是页码按钮,则直接将当前页码按钮中的数字,修改到data中的pno即可!
default:
//只改变量
this.pno=parseInt(
e.target.innerHTML
)
}
}
}
}
})
</script>
</body>
</html>
2_v-for1.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>Document</title>
<script src="js/vue.js"></script>
<style>
ul{list-style:none}
ul>li{
float:left;
border:1px solid blue;
padding:5px 10px;
margin:0 5px;
cursor:pointer;
}
ul>li:hover{
background-color:lightblue;
}
ul>li.active{
background-color:red;
color:#fff;
border:none;
}
ul>li.disabled{
background-color:aliceblue;
color:#aaa;
border:1px solid #aaa;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li class="disabled">上一页</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>下一页</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
2_v-for2.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>Document</title>
<script src="js/vue.js"></script>
<style>
ul{list-style:none}
ul>li{
float:left;
border:1px solid blue;
padding:5px 10px;
margin:0 5px;
cursor:pointer;
}
ul>li:hover{
background-color:lightblue;
}
ul>li.active{
background-color:red;
color:#fff;
border:none;
}
ul>li.disabled{
background-color:aliceblue;
color:#aaa;
border:1px solid #aaa;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li class="disabled">上一页</li>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>下一页</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
//ajax->服务端
pcount:3,
pno:1
}
})
</script>
</body>
</html>
2_v-for3.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>Document</title>
<script src="js/vue.js"></script>
<style>
ul{list-style:none}
ul>li{
float:left;
border:1px solid blue;
padding:5px 10px;
margin:0 5px;
cursor:pointer;
}
ul>li:hover{
background-color:lightblue;
}
ul>li.active{
background-color:red;
color:#fff;
border:none;
}
ul>li.disabled{
background-color:aliceblue;
color:#aaa;
border:1px solid #aaa;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li :class="pno==1?'disabled':''">上一页</li>
<li v-for="i of pcount" :key="i" :class="i==pno?'active':''">{{i}}</li>
<li :class="pno==pcount?'disabled':''">下一页</li>
</ul>
<!--马上在控制太中,通过手动修改变量值,检测页面设置的绑定和条件是否正确!-->
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
//ajax->服务端
pcount:3,
pno:1
}
})
</script>
</body>
</html>
2_v-for4.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>Document</title>
<script src="js/vue.js"></script>
<style>
ul{list-style:none}
ul>li{
float:left;
border:1px solid blue;
padding:5px 10px;
margin:0 5px;
cursor:pointer;
}
ul>li:hover{
background-color:lightblue;
}
ul>li.active{
background-color:red;
color:#fff;
border:none;
}
ul>li.disabled{
background-color:aliceblue;
color:#aaa;
border:1px solid #aaa;
}
</style>
</head>
<body>
<div id="app">
<!--因为每个li都可以单击,所以应该用事件委托优化减少事件监听的个数-->
<ul @click="change">
<!--第一个li不需要重复生成,所以不不加v-for
如果现在是第1页,则第一个li使用禁用的样式,否则去掉禁用的样式-->
<li :class="pno==1?'disabled':''">上一页</li>
<!--中间页码li需要根据总页数,反复生成多个
如果当前页码li的编号i和data中当前第几页的pno相等,就引用高亮显示的样式-->
<li v-for="i of pcount" :key="i" :class="pno==i?'active':''">{{i}}</li>
<!--最后一个li不需要重复生成,所以不不加v-for
如果现在是最后一页,则最后一个li使用禁用的样式,否则去掉禁用的样式-->
<li :class="pno==pcount?'disabled':''">下一页</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
//如果分页,只可能两个值:
pcount:3, //总页数
pno:1 //当前第几页
},
methods:{
//事件处理函数中,原理和DOM的事件委托的原理完全相同!只不过,想修改元素时,不需要查找任何元素,仅修改data中的变量就可由vue自动更新页面中元素的状态。因为,在做界面时,已经提前用三目将条件和备选值埋在了可能变化的元素中
change(e){
if(e.target.nodeName=="LI"){
switch(e.target.innerHTML){
//如果点上一页,且现在不在第一页时,就将页码-1
case "上一页":
if(this.pno>1){
this.pno--;//只改变量
}
break;
//如果点下一页,且现在不在最后一页时,就将页码+1
case "下一页":
if(this.pno<this.pcount){
this.pno++;//只改变量
}
break;
//如果点的是页码按钮,则直接将当前页码按钮中的数字,修改到data中的pno即可!
default:
//只改变量
this.pno=parseInt(
e.target.innerHTML
)
}
}
}
}
})
</script>
</body>
</html>
3_v-on.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="change(-1)">-</button><span>{{n}}</span><button @click="change(1)">+</button>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
n:1
},
methods:{
change(i){
this.n+=i;
//如果 n<1 就 n=1
this.n<1&&(this.n=1);
}
}
})
</script>
</body>
</html>
3_v-on2.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="change">-</button><span>{{n}}</span><button @click="change">+</button>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
n:1
},
methods:{
change(e){
if(e.target.innerHTML=="+"){
this.n++;
}else if(this.n>1){
this.n--;
}
}
}
})
</script>
</body>
</html>
3_v-on3.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>Document</title>
<script src="js/vue.js"></script>
<style>
.block{
width:100px;
height:200px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="app">
<div v-for="(item,index) of emps" :key="index">
<h1>{{item}}</h1>
<div class="block" @click="say(item,$event)"></div>
</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
emps:["亮亮","然然","东东"]
},
methods:{
say(ename,e){
var {offsetX,offsetY}=e;
alert(`${ename} ${offsetX},${offsetY} 疼!`)
}
}
})
</script>
</body>
</html>
4_v-html.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1 v-html="msg"></h1>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"<p>来自<<<a href='javascript:;'>新华社</a>>>的消息<p>"
}
})
</script>
</body>
</html>
5_v-cloak.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>Document</title>
<script src="js/vue.js"></script>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="app">
<h1 v-cloak>{{uname}}</h1>
<h2 style="width:200px; height:100px; background-color:red; color:#fff; border:1px solid yellow" v-text="score"></h2>
</div>
<script>
setTimeout(function(){
var vm=new Vue({
el:"#app",
data:{
uname:"dingding",
score:3000
}
})
},3000)
</script>
</body>
</html>
6_v-once.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-once>页面加载时间: {{new Date(timer).toLocaleString()}}</h1>
<h2>当前系统时间: {{new Date(timer).toLocaleString()}}</h2>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
timer:new Date().getTime()
}
})
setInterval(function(){
vm.timer=new Date().getTime()
},1000);
</script>
</body>
</html>
7_v-pre.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-pre>vue中采用{{变量}}语法来绑定元素的内容</h1>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
8_v-model.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--VUE中: 事件修饰符:
限制触发这个事件的键盘号-->
<!-- <input v-model:value="kwords" @keydown.13="search"><button @click="search">百度一下</button> -->
<input v-model="kwords" @keydown.13="search"><button @click="search">百度一下</button>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
kwords:""
},
methods:{
search(){
console.log(`查找 ${this.kwords} 相关的内容...`)
}
},
watch:{
kwords(){//当kwords变量改变时,做的事儿,和按钮和回车都是一样的,都是search()
//alert("kwords变啦!")
this.search();
}
}
})
</script>
</body>
</html>
9_v-model2.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>性别:{{sex}}</h1>
<label><input type="radio" value="1" v-model:checked="sex">男</label>
<label><input type="radio" value="0" v-model:checked="sex">女</label>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
sex:0
}
})
</script>
</body>
</html>
9_v-model3.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model:checked="isAgree">同意<br>
<button :disabled="!isAgree">提交</button>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
isAgree:false
}
})
</script>
</body>
</html>
9_v-model4.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<select v-model:value="src">
<option value="img/bj.jpg">北京</option>
<option value="img/sh.jpg">上海</option>
<option value="img/hz.jpg">杭州</option>
</select>
<br>
<img :src="src">
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
src:"img/bj.jpg"
}
})
</script>
</body>
</html>
10_style.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>Document</title>
<script src="js/vue.js"></script>
<style>
#pop{
width:100px;
height:100px;
background-color:pink;
cursor:pointer;
}
</style>
</head>
<body>
<div id="app">
<div id="pop" style="
position:fixed" :style="popStyle"></div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
popStyle:{
left:"0px",
top:"0px"
}
}
});
window.onkeydown=function(e){
if(e.keyCode==37){//左
var left=parseFloat(
vm.popStyle.left
);
left-=20;
vm.popStyle.left=left+"px";
}else if(e.keyCode==38){//上
var top=parseFloat(
vm.popStyle.top
);
top-=20;
vm.popStyle.top=top+"px";
}else if(e.keyCode==39){//右
var left=parseFloat(
vm.popStyle.left
);
left+=20;
vm.popStyle.left=left+"px";
}else if(e.keyCode==40){//下
var top=parseFloat(
vm.popStyle.top
);
top+=20;
vm.popStyle.top=top+"px";
}
}
</script>
</body>
</html>
11_class.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>Document</title>
<script src="js/vue.js"></script>
<style>
/* 页面初始,验证消息不显示 */
.vali_info{
display:none;
}
.vali_success,.vali_fail{
background-repeat:no-repeat;
background-position:left center;
display:inline-block;
}
/* 验证消息:验证通过时的样式 */
.vali_success{
background-image:url("../images/ok.png");
padding-left:20px;
width:0px;height:20px;
overflow:hidden;
}
/* 验证消息:验证失败时的样式 */
.vali_fail{
background-image:url("../images/err.png");
border:1px solid red;
background-color:#ddd;
color:Red;
padding-left:30px;
}
</style>
</head>
<body>
<div id="app">
<input v-model="phone" @focus="getFocus" placeholder="请输入手机号"><span :class="spanClass">1为数组+3~9中任选一个+9位数字</span>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
phone:"",
spanClass:{
vali_info:true,
vali_success:false,
vali_fail:false
}
},
methods:{
getFocus(){//当文本框获得焦点时
//只要修改data中的spanClass中的vali_info为false
this.spanClass.vali_info=
this.spanClass.vali_success=
this.spanClass.vali_fail=false;
}
},
watch:{
phone(){//当文本框内容改变时,v-model会自动修改data中phone变量的值。只要phone变量的值被改变,phone()函数立刻自动触发
if(/^1[3-9]\d{9}$/.test(this.phone)){
this.spanClass.vali_info=
this.spanClass.vali_fail=false;
this.spanClass.vali_success=true;
}else{
this.spanClass.vali_info=
this.spanClass.vali_success=false;
this.spanClass.vali_fail=true;
}
}
}
})
</script>
</body>
</html>
第3天
1_direction.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>Document</title>
<script src="js/vue.js"></script>
<script>
Vue.directive("focus",{
inserted(domElem){
domElem.focus(); //DOM中
}
})
</script>
</head>
<body>
<div id="app">
<input v-focus>
</div>
<script>
var vm=new Vue({
el:"#app", //扫描
data:{
}
})
</script>
</body>
</html>
2_computed.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>总计: ¥{{total.toFixed(2)}}</h1>
<ul @click="del">
<li v-for="(item,index) of cart" :key="index"><input type="checkbox" v-model="item.is_checked"> | {{item.pid}} | {{item.pname}} | ¥{{item.price.toFixed(2)}} | {{item.count}} | 小计:¥{{(item.price*item.count).toFixed(2)}} |<button :data-i="index">x</button></li>
</ul>
<h1>总计: ¥{{total.toFixed(2)}}</h1>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
cart:[
{pid:1, pname:"华为", price:5000, count:2, is_checked:true},
{pid:2, pname:"小米", price:3000, count:1, is_checked:true},
{pid:3, pname:"苹果", price:8000, count:3, is_checked:false}
]
},
methods:{
del(e){
if(e.target.nodeName=="BUTTON"){
var i=parseInt(
e.target.dataset.i
)
this.cart.splice(i,1);
}
}
},
watch:{},
computed:{
total(){//计算属性的本质其实是一个特殊的函数
console.log("计算了一次总价!")
/*var total=0;
for(var item of this.cart){
if(item.is_checked){
total+=item.price*item.count
}
}
return total;*/
/*return this.cart.filter(
function(item){
return item.is_checked==true;
}
).reduce(
function(prev,item){
return prev+item.price*item.count
}
)
,
0
);*/
return this.cart.filter(item=>item.is_checked).reduce(
(prev,item)=>prev+item.price*item.count
,
0
);
}
}
})
</script>
</body>
</html>
3_filter.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>Document</title>
<script src="js/vue.js"></script>
<script>
Vue.filter(
"sexFilter",
function(oldVal){
return oldVal==1?"男":"女";
}
);
Vue.filter(
"dateFilter",
function(oldVal){
return new Date(oldVal).toLocaleString();
}
);
Vue.filter(
"statusFilter",
function(oldVal){
return oldVal==0?"未付款": oldVal==10?"已付款":
oldVal==20?"已发货":
"已签收"
}
)
</script>
</head>
<body>
<div id="app">
<h1>性别:{{sex | sexFilter}}</h1>
<h1>下单时间: {{orderTime | dateFilter}}</h1>
<h1>订单状态: {{orderStatus | statusFilter}}</h1>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
sex:1,
orderTime:1566359895109,
orderStatus:0
}
})
</script>
</body>
</html>
3_filter2.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>Document</title>
<script src="js/vue.js"></script>
<script>
Vue.filter(
"sexFilter",
function(oldVal, lang="cn"){
if(lang=="cn"){
//如果前边是sex变量
//则传入的是数字0或1
//就替换为男和女
return oldVal==1?"男":
oldVal==0?"女":
//如果前边是sexIcon过滤器
//则传入的是字符♂或♀
//就不能替换为男和女
//而应该将图标和性别名联合显示
oldVal=="♂"?"♂男":
"♀女";
}else{
//如果前边是sex变量
//则传入的是数字0或1
//就替换为Male和Female
return oldVal==1?"Male":
oldVal==0?"Female":
//如果前边是sexIcon过滤器
//则传入的是字符♂或♀
//就不能替换为Male和Female
//而应该将图标和性别名联合显示
oldVal=="♂"?"♂Male":
"♀Female";
}
}
);
Vue.filter(
"sexIcon",
function(oldVal){
//如果前边接sex变量,则传入的可能是1或0
//如果前边接sexFilter过滤器,则传入的可能是男或Male
if(oldVal==1||oldVal=="男"||oldVal=="Male"){
//如果传入的是数字,就替换成图标
//如果传入的不是数字,是性别名,不应该替换,而应该将图标追加到性别名之后,联合显示
return oldVal==1?"♂":oldVal+"♂"
}else{
return oldVal==0?"♀":oldVal+"♀"
}
}
)
</script>
</head>
<body>
<div id="app">
<h1>性别1:{{sex1 | sexIcon | sexFilter}}</h1>
<h1>性别2:{{sex2 | sexFilter("en") | sexIcon}}</h1>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
sex1:1,
sex2:0
}
})
</script>
</body>
</html>
4_axios.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>Document</title>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/qs.min.js"></script>
</head>
<body>
<div id="app">
用户名: <input placeholder="请输入用户名" v-model="uname"><br>
密码: <input type="password" placeholder="请输入密码" v-model="upwd"><br>
<button @click="login">登录</button>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
uname:"dingding",
upwd:"123456"
},
methods:{
/*login(){
axios.get(
"http://localhost:3000",
{
params:{
uname:this.uname,
upwd:this.upwd
}
}
).then(result=>{
//服务端:
//res.write({code:1或0})
if(result.data.code==1){
alert("登录成功!");
}else{
alert("用户名或密码不正确!")
}
this.uname="";
this.upwd="";
})
}*/
login(){
axios.post(
"http://localhost:3000",
Qs.stringify({
uname:this.uname,
upwd:this.upwd
})
).then(result=>{
//服务端:
//res.write({code:1或0})
if(result.data.code==1){
alert("登录成功!");
}else{
alert("用户名或密码不正确!")
}
this.uname="";
this.upwd="";
})
}
}
})
</script>
</body>
</html>
5_component.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>Document</title>
<script src="js/vue.js"></script>
<script>
Vue.component("my-counter",{
template:`<span>
<button @click="change(-1)">-</button>
<span>{{n}}</span>
<button @click="change(+1)">+</button>
</span>`,
data(){
return {
n:0
}
},
methods:{
change(i){
this.n+=i;
}
}
})
</script>
</head>
<body>
<div id="app">
<ul>
<li>1 | 华为 | 5000 | <my-counter></my-counter> | 10000</li>
<li>2 | 小米 | 3000 | <my-counter></my-counter> | 9000</li>
<li>3 | 苹果 | 8000 | <my-counter></my-counter> | 8000</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
6_components.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>Document</title>
<script src="js/vue.js"></script>
<script src="6_todoItem.js"></script>
<script src="6_todoList.js"></script>
<script src="6_todoAdd.js"></script>
<script src="6_todo.js"></script>
</head>
<body>
<div id="app">
<todo></todo>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
6_todo.js
Vue.component("todo",{
template:`<div>
<h1>待办事项列表</h1>
<todo-add></todo-add>
<todo-list></todo-list>
</div>`,
components:{
todoAdd, todoList
}
})
6_todoAdd.js
var todoAdd={
template:`<div>
<input><button>+</button>
</div>`
}
6_todoItem.js
var todoItem={
template:`<li>
1 - 吃饭 <button>x</button>
</li>`
}
6_todoList.js
var todoList={
template:`<ul>
<todo-item></todo-item>
<todo-item></todo-item>
<todo-item></todo-item>
</ul>`,
components:{
todoItem
}
}
第4天
1_components.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>Document</title>
<script src="js/vue.js"></script>
<script src="1_todoItem.js"></script>
<script src="1_todoList.js"></script>
<script src="1_todoAdd.js"></script>
<script src="1_todo.js"></script>
</head>
<body>
<div id="app">
<todo></todo>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
1_todo.js
Vue.component("todo",{
template:`<div>
<h1>待办事项列表</h1>
<todo-add :tasks="tasks"></todo-add>
<todo-list :tasks="tasks"></todo-list>
</div>`,
data(){
return {
tasks:["吃饭","睡觉","打亮亮"]
}
},
components:{
todoAdd, todoList
}
})
1_todoAdd.js
var todoAdd={
template:`<div>
<input v-model="task"><button @click="add">+</button>
</div>`,
props:["tasks"],
data(){
return {
task:""
}
},
methods:{
add(){
this.tasks.push(this.task);
this.task="";
}
}
}
1_todoItem.js
var todoItem={
template:`<li>
{{i+1}} - {{task}} <button @click="del">x</button>
</li>`,
props:["task", "i", "tasks"],
methods:{
del(){
this.tasks.splice(this.i,1);
}
}
}
1_todoList.js
var todoList={
template:`<ul>
<todo-item v-for="(task,i) of tasks" :key="i" :task="task" :i="i" :tasks="tasks"></todo-item>
</ul>`,
props:["tasks"],
components:{
todoItem
}
}
2_details.js
var details={
template:`<main>
<my-header></my-header>
<h2>这里是商品详情页</h2>
<h3>查询 {{lid}} 号商品的详细信息</h3>
</main>`,
props:["lid"]
}
2_index.js
var index={
template:`<main>
<my-header></my-header>
<h2>这里是首页</h2>
<h3>欢迎光临我的第一个SPA应用</h3>
<ul>
<li><router-link to="/details/1">查看1号商品</router-link></li>
<li><router-link to="/details/2">查看2号商品</router-link></li>
<li><router-link to="/details/3">查看3号商品</router-link></li>
</ul>
</main>`
}
2_login.js
var login={
template:`<main>
用户名: <input v-model="uname"><br>
密码: <input type="password" v-model="upwd"><br>
<input type="button" value="登录" @click="login">
</main>`,
data(){
return {
uname:"dingding",
upwd:"123456"
}
},
methods:{
login(){
if(this.uname=="dingding"&&this.upwd=="123456"){
alert("登录成功!自动返回首页");
this.$router.push("/")
}else{
alert("用户名或密码错误!");
}
this.uname="";
this.upwd="";
}
}
}
2_myHeader.js
Vue.component("my-header",{
template:`<header>
<h1 style="text-align:center;">这里是页头</h1>
<ul>
<li><router-link to="/">首页</router-link></li>
<li><router-link to="/login">登录</router-link></li>
</ul>
<hr>
</header>`
})
2_router.js
//index.html
//<script src="2_index.js">
//var index={}
//<script src="2_details.js">
//var details={}
//<script src="2_router.js">
var routes=[
{path:"/",component:index},
{path:"/index",component:index},
{path:"/details/:lid",component:details,props:true},
{path:"/login",component:login},
{path:"/*", component:{
template:`<main>
<h2 style="color:red; text-align:center">404: Not Found</h2>
</main>`
}}
];
var router=new VueRouter({
routes //routes:routes
});
2_SPA.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>Document</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="2_myHeader.js"></script>
<script src="2_index.js"></script>
<script src="2_details.js"></script>
<script src="2_login.js"></script>
<script src="2_router.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{},
router
})
</script>
</body>
</html>
第5天
1_i++.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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{i++}}</h1>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
i:0
},
watch:{
i(){
console.log("i变成:"+this.i)
}
}
})
</script>
</body>
</html>