前端框架 Vue代码

qq_繁华

已于 2023-03-27 21:05:42 修改

阅读量330

点赞数

分类专栏：笔记文章标签： vue.js 前端 javascript

于 2023-03-27 20:57:23 首次发布

本文链接：https://blog.csdn.net/qq_42740465/article/details/129803472

版权

笔记专栏收录该内容

42 篇文章 4 订阅

订阅专栏

第一天

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>来自&lt;&lt;<a href='javascript:;'>新华社</a>&gt;&gt;的消息<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>