vue基本知识复习

vue基础知识复习，上手就能使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue3再学习</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>内容渲染:v-text,v-html</h2>
      {{message}}
      <p v-text="username"></p>
      <hr />
      {{desc}}
      <p v-html="desc"></p>
      <hr />
      <h2>属性绑定,加冒号</h2>
      <input
        type="text"
        name=""
        id=""
        v-model="message"
        :placeholder="placeholder"
      />
      <img :src="imgSrc" alt="" srcset="" :style="{width:w}" />
      <a :href="link" target="_blank" rel="noopener noreferrer"></a>
      <hr />
      <h2>表达式</h2>
      <p>{{id +1}}</p>
      <p>{{ok ?'True':"False"}}</p>
      <p>{{message.split(' ').reverse().join(' ')}}</p>
      <p :id="'list-' + id">{{id}}</p>
      <p>{{user.name}}</p>
      <hr />
      <h2>事件绑定：v-on 或@</h2>
      count的值为：{{count}}
      <button v-on:click="add(1)">+1</button>
      <button @click="count+=1">+1</button>
        <input type="button" @click="reduce(-1)" value="减1"></input>
      <hr />
      <h2>条件渲染v-if </h2>
      一、单选框
      在传统的HTML中实现单选框的方法如下：
      <div >
          <input type="radio" name="gender" value="man" id="man" checked/><label for="man">男</label>
          <input type="radio" name="gender" value="woman" id="women"/><label for="women">女</label>
      </div>
      用vue.js实现单选框,不再需要name属性，只需要使用v-model指令给每个选项绑定同一个变量就可以确保同一时间只有一个被选中，
      同时value属性还是需要的，表示选中时的值。
      <input type="radio" name="radios" value="1" v-model="radio"><label>two</label><br>
      <input type="radio" name="radios" value="0" v-model="radio" ><label>three</label>
      <p>已选：{{radio}}</p>
      <p v-show="radio==true">请求成功</p>
      <p v-if="radio==true">请求成功</p>
      <p v-else>请求不成功</p>
      <br>
      二、复选框
      在传统的HTML中实现复选框代码如下：
      <div >
          <input type="checkbox" name="whom" value="jack" id="Jack" checked/><label for="Jack">jack</label>
          <input type="checkbox" name="whom" value="bob" id="Bob"/><label for="Bob">bob</label>
          <input type="checkbox" name="whom" value="alice" id="Alice"/><label for="Alice">alice</label>
      </div>
      在vue.js中构造复选框也与单选框类似，只是每个选项框都用v-model绑定一个变量，这些变量一般放在一个对象中，或者为v-model绑定一个相同的属性名称，且属性为数组；针对这两种情况的举例如下：
       使用v-model为每个选项框绑定一个变量：
      <div id="app">
          <label>child<input type="checkbox" v-model="personCheckBox.child"/></label>
          <label>man<input type="checkbox" v-model="personCheckBox.man"/></label>
          <label>woman <input type="checkbox" v-model="personCheckBox.woman"/></label>
          <p>已选：{{personCheckBox}}</p>
      </div>
      从以上代码可以看到：已经不需要value属性，为每个属性绑定的值是boolean类型的，当选中时该值变为true，没选中为false。
      <br>
      三、下拉框
  传统的用HTML构造下拉框的代码如下：
  <select name="selected">
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
  </select>

  其中name用于发送给服务器时的数据识别，value为选中时发送给服务器的值。如果option中省略value，那么发送给服务器的值为option标签之间的值。
  用vue2.0实现下拉框的方法如下：
    <div >
        <select v-model="selected">
            <option v-for="item in items" v-bind:value="item.value">{{item.text}}</option>
        </select>
        <span>已选:{{selected}}</span>
    </div>
  使用v-for指令，避免重复书写option标签，同时用v-bind指令绑定value属性。当选中某一项时，该选项的value值赋给selected变量。
  不管是html书写，还是vue实现，如果需要实现多选下拉框，只需要在select标签中写入multiple属性(同时vue中，selected变量初始化为一个空数组)。
      <hr />

      <h2>列表渲染 v-for</h2>
      <div>
        <input type="text" name="" id="" v-model="name"><button @click="addNewuser">增加用户</button>
        <ul>
        <li v-for="(item,i) in list" :key="item.id" ><input type="checkbox" >{{i}}--{{item}}<button @click="removeUser(item.id)">删除用户</button></li> 
      </ul></div>
      <hr>
    </div>
    <script>
      const { createApp } = Vue;
      let vm = {};
      vm = {
        data() {
          return {
            message: "hello vue!",
            username: "zhangsan",
            name:'',
            desc: '<a href="http://baidu.com">百度</a>',
            placeholder: "请输入内容",
            imgSrc: "../static/images/222.png",
            w: "200px",
            link: "http://www.baidu.com",
            user: {
              name: "wagnwu",
              age: 118,
            },
            id: 20,
            ok: false,
            radio:'0',
            personCheckBox:{child:false,man:false,woman:false},
            items:[{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'}],
            selected:'b',
            list:[{id:1,name:'zhangsan'},{id:2,name:'lisi'},{id:3,name:'wangwu'}],
            count: 0,
          };
        },
        methods: {
          add(i) {
            this.count += i;
          },
          reduce(i) {
            this.count += i;
          },
          addNewuser() {
            this.list.unshift({id:this.list.length+1,name:this.name})
            this.name=''
          },
          removeUser(id) {
            let index = this.list.findIndex(item=> {
              item.id == id
            })
            if (index) {
            this.list.splice(index-1,1)
            }

          }
        },
      };
      const app = createApp(vm);
      app.mount("#app");

      // 默认滚动到底部
      function page_scroll() {
          var i = 1
          var element = document.documentElement
          element.scrollTop = 0;  // 不管他在哪里，都让他先回到最上面      
          // 设置定时器，时间即为滚动速度
          function main() {
              if (element.scrollTop + element.clientHeight == element.scrollHeight) {
                  clearInterval(interval)
                  console.log('已经到底部了')
              } else {
                  element.scrollTop += 20;
                  console.log(i);
                  i += 1;
              }
          }
          // 定义ID
          interval = setInterval(main, 300)
      }      
      page_scroll()
    </script>
  </body>
  <style>
    button,input[type="button"] {
      cursor: pointer;
    }
  </style>
</html>