前端 框架 Vue代码
第一天
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>Documenttitle>
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>Documenttitle><script src="js/vue.js">script>
head>
<body>{变量}}--><div id="app"><button id="btn1" @click="add">clicn me({{n}})button>div><script>//2.1 定义一个对象，集中保存所有页面上需要的变量和初始值var data={//因为页面上需要一个变量n//所以data对象中需要定义一个nn:0}//2.2 创建Vue对象，将保存数据的data{}和界面绑定起来var vm=new Vue({//请了一个快递员，名为vmel:"#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中手工绑定！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>Documenttitle><script src="js/vue.js">script>
head>
<body><div id="app"><h1>Welcomeh1><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>Documenttitle><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>Documenttitle><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>Documenttitle><script src="js/vue.js">script>
head>
<body><div id="app"><span>{{pno}}/{{pcount}}span><button v-show="pno" @click="next">下一页button>div><script>//页面需要显示: 当前第几页pno// 和共几页 pcount//每单击一次按钮，pno+1//只有pnovar 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>Documenttitle><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>Documenttitle><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>Documenttitle><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>Documenttitle><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 @click="change"><li :class="pno==1?'disabled':''">上一页li><li v-for="i of pcount" :key="i" :class="pno==i?'active':''">{{i}}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){//如果点上一页，且现在不在第一页时，就将页码-1case "上一页":if(this.pno>1){this.pno--;//只改变量}break;//如果点下一页，且现在不在最后一页时，就将页码+1case "下一页":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>Documenttitle><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">1li><li>2li><li>3li><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>Documenttitle><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">1li><li>2li><li>3li><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>Documenttitle><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>Documenttitle><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 @click="change"><li :class="pno==1?'disabled':''">上一页li><li v-for="i of pcount" :key="i" :class="pno==i?'active':''">{{i}}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){//如果点上一页，且现在不在第一页时，就将页码-1case "上一页":if(this.pno>1){this.pno--;//只改变量}break;//如果点下一页，且现在不在最后一页时，就将页码+1case "下一页":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>Documenttitle><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=1this.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>Documenttitle><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>Documenttitle><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>Documenttitle><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:"来自<<新华社>>的消息
"
}
})
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>Documenttitle><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>Documenttitle><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>Documenttitle><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>Documenttitle><script src="js/vue.js">script>
head>
<body>
<div id="app">
<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>Documenttitle><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>Documenttitle><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>Documenttitle><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>Documenttitle><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>Documenttitle><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为falsethis.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>Documenttitle><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>Documenttitle><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">xbutton>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>Documenttitle><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>Documenttitle><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和Femalereturn oldVal==1?"Male":oldVal==0?"Female"://如果前边是sexIcon过滤器//则传入的是字符♂或♀//就不能替换为Male和Female//而应该将图标和性别名联合显示oldVal=="♂"?"♂Male":"♀Female";}});Vue.filter("sexIcon",function(oldVal){//如果前边接sex变量，则传入的可能是1或0//如果前边接sexFilter过滤器，则传入的可能是男或Maleif(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>Documenttitle><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>Documenttitle><script src="js/vue.js">script><script>Vue.component("my-counter",{template:`{{n}}`,data(){return {n:0}},methods:{change(i){this.n+=i;}}})script>
head>
<body>
<div id="app"><ul><li>1 | 华为 | 5000 | <my-counter>my-counter> | 10000li><li>2 | 小米 | 3000 | <my-counter>my-counter> | 9000li><li>3 | 苹果 | 8000 | <my-counter>my-counter> | 8000li>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>Documenttitle><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:`待办事项列表
6_todoAdd.js
var todoAdd={template:``
}
6_todoItem.js
var todoItem={template:`1 - 吃饭 `
}
6_todoList.js
var todoList={template:`
`,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>Documenttitle><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:`待办事项列表
1_todoAdd.js
var todoAdd={template:``,props:["tasks"],data(){return {task:""}},methods:{add(){this.tasks.push(this.task);this.task="";}}
}
1_todoItem.js
var todoItem={template:`{{i+1}} - {{task}} `,props:["task", "i", "tasks"],methods:{del(){this.tasks.splice(this.i,1);}}
}
1_todoList.js
var todoList={template:`
`,props:["tasks"],components:{todoItem}
}
2_details.js
var details={template:`这里是商品详情页
查询 {{lid}} 号商品的详细信息
2_index.js
var index={template:`这里是首页
欢迎光临我的第一个SPA应用
查看1号商品 查看2号商品 查看3号商品
2_login.js
var login={template:`用户名:
密码:
`,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:`这里是页头
首页 登录
2_router.js
//index.html
//
