Vue（一）

发布于：2024-04-21 ⋅ 阅读:(261) ⋅ 点赞:(0)

文章目录

1.基本介绍

1.Vue是什么？

image-20240214142212263

2.MVVM
示意图

image-20240214143112904

MVVM思想

image-20240214144021353

3.快速入门
1.安装IDEA的vue.js插件

image-20240214144536794

2.官网下载vue2

vue2下载

image-20240214144641222

3.创建vue文件夹，用IDEA打开，并放入vue.js

image-20240214145141709

4.代码实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue -->
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    {{mes}} -- {{name}}
</div>
<!--注意：这里的script需要写在后面-->
<script>
    // 创建一个vue对象（Model）
    var vue = new Vue({
        // 绑定view层
        el: "#app",
        // 数据池
        data: {
            mes: "hello_vue!",
            name: "孙显圣"
        }
    });
    //取出数据池的信息
    console.log(vue.name)
    console.log(vue._data.mes)
    //如果修改了数据池的信息，则view里面的信息也会修改
    vue.name = "李白"
    vue.mes = "你好"
</script>
</body>
</html>

image-20240214151815862

image-20240214151826026

4.注意事项

image-20240214152335253

image-20240214152347571

2.数据渲染

1.单向渲染
1.需求分析

image-20240214152600792

image-20240214152615381

2.代码实例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入vue -->
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <h1>{{mes}}</h1>
<!--  使用v-bind给属性插值，alt + enter引入命名空间  -->
<!--  <img v-bind:src="img_src" v-bind:width="img_width">-->
<!--  简写形式  -->
  <img :src="img_src" :width="img_width">
</div>
<!--注意：这里的script需要写在后面-->
<script>
  // 创建一个vue对象（Model）
  var vue = new Vue({
    // 绑定view层
    el: "#app",
    // 数据池
    data: {
      mes: "hello!",
      img_src: "1.jpg",
      img_width: "200px"
    }
  });

</script>
</body>
</html>

image-20240214153522128

2.双向渲染
1.需求分析

image-20240214153820507

2.代码实例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入vue -->
  <script src="vue.js"></script>
</head>
<body>

<div id="app">
  <input type="text" v-model:value="hobby.value"><br>
  <input type="text" v-model:value="hobby.value"><br>
  您输入的爱好是：{{hobby.value}}
</div>

<!--注意：这里的script需要写在后面-->
<script>
  // 创建一个vue对象（Model）
  var vue = new Vue({
    // 绑定view层
    el: "#app",
    // 数据池
    data: {
      //这里的value也可以是，一个js对象
      hobby: {
        value: "购物"
      }
    }
  });

</script>
</body>
</html>

image-20240214154957799

3.课后练习

image-20240214155212893

代码实例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入vue -->
  <script src="vue.js"></script>
</head>
<body>

<div id="app">
  <h1>请输入图片编号1.jpg, 2.jpg</h1>
  <input type="text" v-model:name="name"><br>
<!--src使用一个单向绑定即可-->
  <img :src="name">
</div>

<!--注意：这里的script需要写在后面-->
<script>
  // 创建一个vue对象（Model）
  var vue = new Vue({
    // 绑定view层
    el: "#app",
    // 数据池
    data: {
      name: "1.jpg"
    }
  });

</script>
</body>
</html>

image-20240214155736755

image-20240214155725240

3.事件处理

1.基本介绍

image-20240214155944093

2.需求分析

image-20240214160916290

3.代码实例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入vue -->
  <script src="vue.js"></script>
</head>
<body>

<div id="app">
<!--  v-on:事件 = "绑定的方法"-->
  <input type="submit" value="点击输出" v-on:click = "sayHi"><br>
<!--  v-on: 可以简写成@-->
  <input type="submit" value="点击输出" @click = "sayOK"><br>
  <input type="submit" value="点击输出"><br>
</div>

<!--注意：这里的script需要写在后面-->
<script>
  // 创建一个vue对象（Model）
  var vue = new Vue({
    // 绑定view层
    el: "#app",
    // 数据池
    data: {
      name: "1.jpg"
    },
    // 方法池
    methods: {
      sayHi() {
        console.log("hi!")
      },
      sayOK() {
        console.log("ok!")
      }
    }
  });

</script>
</body>
</html>

image-20240214161520131

image-20240214161535579

4.注意事项和细节

image-20240214162518426

5.课后练习
1.练习一

image-20240214162901959

代码实例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入vue -->
  <script src="vue.js"></script>
</head>
<body>

<div id="app">
  <input type="submit" value="点击增加1" @click = "addOne"><br>
  <input type="submit" value="点击增加2" @click = "addTwo"><br>
  <h2>你的按钮被点击了{{count}}次</h2>
</div>

<!--注意：这里的script需要写在后面-->
<script>
  // 创建一个vue对象（Model）
  var vue = new Vue({
    // 绑定view层
    el: "#app",
    // 数据池
    data: {
      count: 0
    },
    // 方法池
    methods: {
      //使用this可以获取当前对象信息
      addOne() {
        this.count += 1;
      },
      addTwo() {
        this.count += 2;
      }
    }
  });

</script>
</body>
</html>
2.练习二

image-20240214162818170

代码实例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入vue -->
  <script src="vue.js"></script>
</head>
<body>

<div id="app">
<!--  将value进行双向绑定-->
  <h4>书名：<input type="text" v-model:value="value">&nbsp;<button @click = "showInput">点击弹窗显示输入框的内容</button></h4>
</div>

<!--注意：这里的script需要写在后面-->
<script>
  // 创建一个vue对象（Model）
  var vue = new Vue({
    // 绑定view层
    el: "#app",
    // 数据池
    data: {
      value: ""
    },
    // 方法池
    methods: {
      //使用this可以获取当前对象信息
      showInput() {
        alert(this.value)
      }
    }
  });

</script>
</body>
</html>

image-20240214164459394

4.修饰符

1.基本介绍

image-20240214165238870

2.需求分析

image-20240214165733814

3.代码实例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入vue -->
  <script src="vue.js"></script>
</head>
<body>

<div id="app">
  <!-- 默认提交到百度，使用修饰符修饰一个指令，阻止表单提交，并且调用一个方法-->
  <form action="https://www.baidu.com/" v-on:submit.prevent="onMySubmit">
<!--    这里的monster虽然没有声明属性，但是由于是双向绑定，则这里的值会自动为model里的monster创建属性-->
    <h4>妖怪名<input type="text" v-model:value="monster.name"></h4>
    <input type="submit">
    <h4>后端返回的数据为{{value}}</h4>
  </form>
</div>

<!--注意：这里的script需要写在后面-->
<script>
  // 创建一个vue对象（Model）
  var vue = new Vue({
    // 绑定view层
    el: "#app",
    // 数据池
    data: {
      //可以直接存放一个对象，不用定义属性，可以根据view里面的值动态生成
      monster: {

      },
      value: ""
    },
    // 方法池
    methods: {
      //使用this可以获取当前对象信息
      onMySubmit() {
        //根据输入框是否为空做出响应操作
        if (!this.monster.name) {
          alert("输入的内容为空")
        } else {
          alert(`表单提交，输入的值为：${this.monster.name}`)
          //记录后端返回的数据
          this.value = "666";
        }
      }
    }
  });

</script>
</body>
</html>
<script setup>
</script>

image-20240214172523705

image-20240214172533179

image-20240214172542616

4.修饰符扩展案例
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue -->
    <script src="vue.js"></script>
</head>
<body>

<div id="app">
    <!--    在输入框中输入了enter-->
    <input type="text" v-on:keyup.enter="onMySubmit">
    <!--    在输入框中输入了向下的箭头-->
    <input type="text" v-on:keyup.down="onMySubmit">
    <!--    双向绑定了count并且会自动清除空格-->
    <input type="text" v-model.trim="count">

</div>

<!--注意：这里的script需要写在后面-->
<script>
    // 创建一个vue对象（Model）
    var vue = new Vue({
        // 绑定view层
        el: "#app",
        // 数据池
        data: {
            count: "12"
        },
        // 方法池
        methods: {
            //使用this可以获取当前对象信息
            onMySubmit() {
                //根据输入框是否为空做出响应操作
                alert("点击按钮！")
            }
        }
    });

</script>
</body>
</html>
<script setup>
</script>

image-20240214173944170

image-20240214174006154

image-20240214174037131

image-20240214174046855

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布