前端:vue

无非905

于 2024-09-17 19:45:31 发布

阅读量721

点赞数 5

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_70532458/article/details/142317558

版权

1.什么是vue

Vue.js 是一个开源的前端 JavaScript 框架，由尤雨溪（Evan You）于 2014 年创建。它主要用于构建用户界面和单页应用（SPA）。Vue.js 的设计哲学是简单易用，它通过响应式数据绑定和组合的视图组件，使得开发者能够以声明式的方式来编写界面。

2.vue的特点

响应式和组件化：Vue.js 的核心是响应式系统，它能够自动追踪数据变化，并更新视图。此外，Vue.js 采用了组件化的开发模式，使得代码易于管理和维护。
轻量级：Vue.js 的体积较小，易于快速上手和部署。
双向数据绑定：Vue.js 提供了双向数据绑定，即当数据发生变化时，视图会自动更新；反之亦然。
易于上手：Vue.js 的 API 设计简洁明了，易于理解和使用。
生态系统丰富：Vue.js 拥有丰富的生态系统，包括路由管理器 Vue Router、状态管理库 Vuex 等。

3.vue和普通js的代码区别

实现一个简单的加减乘除的计算方法

3.1:先看常规方法的代码:

<!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>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>{{ message }}</h2>
      <input type="number" id="num1" />
      <select id="x" name="" id="" value>
        <option value="+">加</option>
        <option value="-">减</option>
        <option value="*">乘</option>
        <option value="%">除</option>
      </select>
      <input type="number" id="num2" name="" id="" />
      <!-- {{ num3 }} -->
      <span id="sum"></span>
      <button id="calculate">计算</button>

      <input type="text" id="message" />
      <span id="messageLength"></span>
      <span id="sumplus"></span>
    </div>

    <script>
      // 数据对象
      const data = {
        message: "Hello Vue",
        num1: 1,
        num2: 2,
        num3: "",
        x: "+",
      };

      // 计算属性对象
      const computed = {
        sumplus: {
          get() {
            console.log(96324624786521475);
            return data.num1 + data.num2;
          },
          set(value) {
            return value;
          },
        },
      };

      // 方法对象
      const methods = {
        sum() {
          switch (data.x) {
            case "+":
              return data.num1 + data.num2;
            case "-":
              return data.num1 - data.num2;
            case "*":
              return data.num1 * data.num2;
            case "%":
              return data.num1 / data.num2;
            default:
              return 0;
          }
        },
      };

      // 绑定 DOM 元素和数据
      const app = document.getElementById("app");
      const num1 = app.querySelector("#num1");
      const num2 = app.querySelector("#num2");
      const x = app.querySelector("#x");
      const sum = app.querySelector("#sum");
      const calculate = app.querySelector("#calculate");
      const message = app.querySelector("#message");
      const messageLength = app.querySelector("#messageLength");
      const sumplus = app.querySelector("#sumplus");

      num1.value = data.num1;
      num2.value = data.num2;
      x.value = data.x;
      sum.textContent = data.num1 + data.num2;
      message.value = data.message;
      messageLength.textContent = data.message.length;
      sumplus.textContent = data.num1 + data.num2;

      // 事件处理
      calculate.addEventListener("click", () => {
        data.num3 = methods.sum();
        sum.textContent = data.num3;
      });

      // 更新 DOM
      x.addEventListener("change", () => {
        data.x = x.value;
        sum.textContent = methods.sum();
      });

      // 计算属性更新
      message.addEventListener("input", () => {
        data.message = message.value;
        messageLength.textContent = data.message.length;
        sumplus.textContent = computed.sumplus.get();
      });
    </script>
  </body>
</html>

3.2 vue实现此功能:

<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>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>{{ message }}</h2>
      <input type="number" v-model.number="num1" />
      <select v-model="x" name="" id="" value>
        <option value="+">加</option>
        <option value="-">减</option>
        <option value="*">乘</option>
        <option value="%">除</option>
      </select>
      <input type="number" v-model.number="num2" name="" id="" />
      <!-- {{ num3 }} -->
      {{ sum() }}
      <button @click="sum">计算</button>

      <input type="text" v-model.trim="message" name="" id="" />
      {{ message.length }} {{ sumplus }}
    </div>
    <script type="text/javascript" src="../js/vue.global.js"></script>
    <script>
      // 1.创建app
      const app = Vue.createApp({
        // data: option api
        data: function () {
          return {
            message: "Hello Vue",
            num1: 1,
            num2: 2,
            num3: "",
            x: "+",
          };
        },
        methods: {
          sum() {
            // this.num3 = parseInt(this.num1) + parseInt(this.num2);
            // return parseInt(this.num1) + parseInt(this.num2);
            // return this.num1 + this.num2;

            if (this.x == "+") {
              return this.num1 + this.num2;
            }
            if (this.x == "-") {
              return this.num1 - this.num2;
            }
            if (this.x == "*") {
              return this.num1 * this.num2;
            }
            if (this.x == "%") {
              return this.num1 / this.num2;
            }
          },
        },
        computed: {
          sumplus: {
            get() {
              console.log(96324624786521475);

              return this.num1 + this.num2;
            },
            set(value) {
              return value;
            },
          },
        },
      });
      // 2.挂载app
      app.mount("#app");
    </script>
  </body>
</html>

3.3 总结两者区别:

1. 最直接的代码数量:vue只需要70行,而常规代码110行,代码数量可以反映出那种方法的效率高

2. 相比较起来,vue的使用更加简单,不需要对于参数和方法的调用也更加便捷

4 vue的一些简易用法:

这是vue的基础模板:

return{}中放参数

method{}中放方法

调用参数直接{{}}里面放参数方法改成@click=""

<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>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
</div>
<script type="text/javascript" src="../js/vue.global.js"></script>
<script>
  // 1.创建app  
 const app = Vue.createApp({
 // data: option api
   data: function() {
  return {
    message: "Hello Vue" 
   }
  },
  methods: {},
  })
  // 2.挂载app  
  app.mount("#app")
</script>
</body>
</html>