Vue第一天笔记

爱泡脚的鸡腿
55 阅读2分钟

主流三大框架 image.png

1.Vue介绍

image.png 课程概况：

image.png

image.png

2.Vue是什么

Vue.js - 渐进式 JavaScript 框架 | Vue.js

image.png

image.png

image.png

3.使用Vue

3.1 大致了解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>
</head>

<body>
  <!-- 1.准备一个容器  一会vue就会把数据展示到这个容器里面-->
  <div id="app">
    <p>姓名: {{uname}} </p>
    <p>朋友性别:{{friend.sex}}</p>
  </div>
  <!-- 2.导入vue.js (可以去官网下载或者引入cdn)-->
  <script src="./vue.js"></script>
  <!-- 3.创建一个Vue实例  并且传入配置对象（形如axios的配置对象）-->
  <script>
    new Vue({
      el: '#app', //要把数据展示到哪里
      data: { //data:要展示的数据
        uname: 'tom',
        age: 30,
        friend: {
          sex: 'man',
          age: 18
        }
      }
    })
  </script>
</body>

</html>

结果：

image.png

3.2 插值表达式

可以插入对象，方法，三元表达式，对象属性 image.png

image.png

image.png

  <div id="app">
    <p>姓名: {{uname}} </p>
    <p>朋友性别:{{friend.sex}}</p>
    <p>朋友年龄判断:{{friend.age>=18?'成年人':'未成年人'}}</p>
    <p>姓名大写:{{uname.toUpperCase()}}</p>
  </div>

结果：

image.png

3.3 响应式介绍-Vue核心特征

只改数据，页面内容也随着数据变化

image.png

3.4 开发者调试工具

image.png

image.png

3.5 Vue指令

3.5.1 v-html

作用：
v-html可视作innerHTML，即可以覆盖innerHTML，且可以显示出相应的粗体或者斜体 image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 1.准备一个容器  准备展示vue的数据-->
  <div class="app">
    <p>{{msg}}</p>
    <!-- //插值表达式,不会显示出字体样式 -->
    <p v-html="msg">im origin</p>

![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/de4eefd4e0ef4107bdd4288303b00987~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg54ix5rOh6ISa55qE6bih6IW_:q75.awebp?rk3s=f64ab15b&x-expires=1772017906&x-signature=HOXvh1CkSj8mtQd6zVubqtouIek%3D)
  </div>
  <!-- 2.引入vue.js文件 -->
  <script src="./vue.js"></script>

  <script>
    // 3.创建一个Vue实例对象
    var app = new Vue({
      el: '.app', //指定容器
      data: {
        msg: 'hello <strong>world</strong>'
      }
    })
  </script>
</body>

</html>

结果：

image.png

3.5.2 v-show和v-if

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      margin-top: 10px;
      width: 200px;
      height: 100px;
      background-color: babyblue;
      border: 5px solid black;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="box" v-show="flag">我是v-show控制的盒子</div>
    <div class="box" v-if="flag">我是v-if控制的盒子</div>
  </div>
  <script src="./vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        flag: true
      },

    })
  </script>
</body>

</html>

结果：

image.png

3.5.3 v-else、v-else-if、v-if

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p v-if="sex ===1">性别：男</p>
    <p v-if="sex ===2">性别：女</p>
    <hr>
    <p v-if="score>=90">成绩评定：奖励电脑</p>
    <p v-if="score>=80 && score<90">成绩评定：奖励平板</p>
    <p v-if="score>=60 && score<80">成绩评定：奖励手机</p>
    <p v-if="score<50">成绩评定：奖励耳机</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        sex: 1,
        score: 80
      }
    })
  </script>
</body>

</html>

结果：

image.png

3.5.4 Vue指令v-on

image.png

3.5.4.1 内联语句

作用：注册事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button v-on:click="count--">-</button>
    <span>{{count}}</span>
    <button @click="count++">+</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100

      }
    })
  </script>
</body>

</html>

结果：

image.png

3.5.4.2 method中的函数名
3.5.4.2.1 无参函数
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- <button @click="flag=!flag">切换显示隐藏</button> -->
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="flag">黑马程序员</h1>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app4 = new Vue({
      el: '#app',
      data: {
        flag: 'true',
      },
      methods: {
        fn() {
          // this永远表示Vue实例对象
          this.flag = !this.flag
        }
      }
    })
  </script>
</body>

</html>

结果：

image.png

3.5.4.2.1 传参函数

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app" class="box">
    <h3>自动售货机</h3>
    <button @click="fn(5)">可乐5元</button>
    <button @click="fn(10)">咖啡10元</button>
    <button @click="fn(7)">牛奶7元</button>
    <div>
      <p>银行卡余额：{{money}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          money: 100
        },
        methods: {
          fn(x) {
            this.money = this.money - x
          }
        }
      })
    </script>

  </div>

</body>

</html>

结果：

image.png

3.5.4.2.2 传参函数（同步显示）
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h2>需求：输入框输入内容，将内容显示在p标签中</h2>
    <!-- 方法一： -->
    <!-- <input type="text" @input="result = $event.target.value"> -->
    <!-- 方法二： -->
    <input type="text" @input="fn">
    <p>{{result}}</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        result: ''
      },
      methods: {
        fn(e) {
          this.result = e.target.value;
        }
      }
    });
  </script>
</body>

</html>

结果：

image.png

3.5.5 Vue指令v-bind

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <img :src="./images/tyre.png" :alt="轮胎" title="大家好，我是轮胎">
    <!-- <img v-bind:src="./images/tyre.png" v-bind:alt="轮胎" title="大家好，我是轮胎"> -->
  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        url:'./images/tyre.png'
      }
    })
  </script>
</body>

</html>

3.5.6 v-for(循环指令)

image.png

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h3>小黑水果店</h3>
    <ul>
      <li v-for="(item,index) in list">
        {{index}} --{{item}}
      </li>

    </ul>
  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '香蕉', '鳄梨', '榴莲']
      }
    })
  </script>
</body>

</html>

结果：

image.png

3.5.7 v-model

image.png

image.png

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    账户：<input type="text" v-model="username"><br>
    密码：<input type="password" v-model="password"><br>

    <button @click="login">登录</button>
    <button @click="reset">重置</button>

    </ul>
  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
      methods: {
        login() {
          console.log(this.username, this.password)
        },
        reset() {
          this.username = ''
          this.password = ''
        }
      }
    })

  </script>
</body>

</html>

结果：

image.png

avatar
文章
阅读
粉丝