Vue 基础（一）

Vue 基础

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      input[type="text"] {
        outline: none;
      }
      .active {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
      .error {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
      .box {
        width: 100px;
        height: 100px;
      }
      ul {
        list-style: none;
      }
      a {
        text-decoration: none;
      }
      .clear::before,
      .clear::after {
        content: "";
        display: table;
        clear: both;
      }
      .books {
        margin: 0 auto;
        position: relative;
      }
      .books ul {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
      .books li {
        float: left;
        width: 100%;
        text-align: center;
      }
      .books li:hover {
        background-color: pink;
      }
      .bookimage {
        position: absolute;
      }

      .bookActive{
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="name" />
      <input type="text" v-model="name" />
      <div>
        <h1>表单的操作</h1>
        <p>
          <label for="name">姓名</label><input type="text" v-model="name" />
        </p>
        <p>
          <label for="">性别</label> 男<input
            type="radio"
            value="1"
            v-model="gender"
          />
          女<input type="radio" value="2" v-model="gender" />
        </p>
        <p>
          <label for="">爱好</label>
          足球<input type="checkbox" value="1" v-model="hobby" /> 篮球<input
            type="checkbox"
            value="2"
            v-model="hobby"
          />
          排球<input type="checkbox" value="3" v-model="hobby" />
        </p>

        <select v-model="occupation">
          <option value="0">请选择职业</option>
          <option value="1">医生</option>
          <option value="2">老师</option>
          <option value="3">工人</option>
        </select>

        <label for="">描述</label>
        <textarea name="" id="" v-model="desc"></textarea>
        <p><button @click.prevent.stop="submit">提交</button></p>
        <div>
          <h1>过滤器</h1>
          <div>{{name|upper}}</div>
        </div>
      </div>
      <div>
        <h1>指令</h1>
        <input type="text" v-color />
        <input type="text" v-focus />
      </div>
      <div>
        <h1>计算属性</h1>
        <div>{{revese}}</div>
      </div>
      <div>
        <h1>匿名插槽</h1>
        <box>你好</box>
        <h2>命名插槽</h2>
        <boxname><span slot="mingming">命名插槽</span></boxname>
        <h1>作用域插槽</h1>
        <areaslot :fruits="fruits">
          <template slot-scope="scope">
            <span>{{scope.item}}</span>
          </template>
        </areaslot>
      </div>
      <div>
        <h1>样式操作</h1>
        <h2>合并样式</h2>
        <div class="box" :class="{active:active,error:error}"></div>

        <h2>切换样式</h2>
        <div class="box">
          <button @click="classToggle" :class="isActive==true?active:error">
            点击切换class
          </button>
        </div>
        <h2>样式数组</h2>
        <div :class="[active,error]"></div>
      </div>

      <div>
        <h2>循环</h2>
        <div class="books">
          <ul class="clear">
            <li :class="{bookActive:index==0}" @mouseover="bookMouseOver(index)" v-for="(book,index) in books" ::key="book.id">
              <a href="#">{{book.name}}</a>
            </li>
          </ul>
          <div class="bookimage">
            <img :src="bookImg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <script>
      axios.defaults.baseUrl = "http://www.baidu.com";
      axios.defaults.timeout = 30;
      axios.defaults.headers["token"] = "user";
      //响应拦截器
      axios.interceptors.response.use(
        function (res) {
          let data = res.data;
          return data;
        },
        function (err) {
          console.log(err);
        }
      );
      //请求拦截器
      axios.interceptors.request.use(
        function (config) {
          console.log(config.url);
          config.headers.mytoken = "";
        },
        function (err) {
          console.log(err);
        }
      );
      axios.get("").then(function (data) {});
      axios.post("", { name: "" }).then(function (data) {});
      axios.delete("").then(function (data) {});
      axios.put("", { name: "" }).then(function () {});

      let box = { template: `<div><slot>匿名插槽</slot></div>` };
      let boxname = { template: ` <div><slot name="mingming"></slot></div>` };
      let areaslot = {
        props: ["fruits"],
        template: `      
          <div>
        <ul>
          <li v-for="(fruit,index) in fruits">
            <slot :item="fruit"></slot>
          </li>
        </ul>
      </div>
        
        `,
      };

      Vue.directive("focus", {
        inserted: function (el) {
          el.focus();
        },
      });

      Vue.filter("upper", function (val) {
        return val.charAt(0).toUpperCase() + val.slice(1);
      });

      var vue = new Vue({
        el: "#app",
        data: {
          name: "nihao",
          gender: 1,
          hobby: [],
          occupation: 0,
          desc: "",
          fruits: ["苹果", "香蕉"],
          active: "active",
          error: "error",
          isActive: true,
          bookImg: "",
          bookActive:"bookeActive",
          books: [
            { id: 0, name: "三国演义", src: "1.jpg" },
            { id: 1, name: "西游记", src: "2.jpg" },
            { id: 2, name: "红楼梦", src: "3.jpg" },
            { id: 3, name: "水浒传", src: "4.jpg" },
          ],
        },
        methods: {
          submit: function () {
            alert("提交");
          },
          checkName: function () {
            if (this.name == "n") {
              alert(this.name + "验证失败");
            }
          },
          classToggle: function () {
            this.isActive = !this.isActive;
          },
          bookMouseOver: function (index) {
            console.log(index)
            this.booksIndex = index;
            let book = this.books.find((item) => item.id == index);
            this.bookImg = "./test/imgs/" + book.src;
          },
        },
        directives: {
          color: function (el) {
            el.style.backgroundColor = "red";
          },
        },
        computed: {
          revese: function (msg) {
            return this.name.split("").reverse().join(",");
          },
        },
        components: {
          boxname,
          box,
          areaslot,
        },
        watch: {
          name: function () {
            this.checkName();
          },
        },
      });
    </script>
  </body>
</html>

 

posted on 2024-09-19 21:59  是水饺不是水饺  阅读(7)  评论(0)    收藏  举报

导航