Vue随笔(1)

冬冬侠

已于 2022-08-23 14:40:37 修改

阅读量678

点赞数 1

文章标签： vue.js 前端

于 2022-08-15 23:28:52 首次发布

本文链接：https://blog.csdn.net/qq_57689862/article/details/126246925

版权

学习随笔

所有学习代码都在我的gitee上：https://gitee.com/shenjiudong24/vue2-studty.git

vue 有两个特性

1.数据驱动视图

我们使用vue的页面的时候，vue会帮助我们监听数据的变化，实现自动更新渲染页面的结构。

好处：当页面发生变化的时候，页面会自动重新渲染！
坏处：数据驱动是单项的数据绑定。

2.双向数据绑定

在网页中form表达负责采集数据，Ajax负责提交数据。、

js数据的变化，会被自动渲染到页面上。
页面上表单采集的数据后，会被vue自动获取到，并且更新到js数据中。

好处：开发者不需要手动操作DOM元素，来获取表单元素最新的值！

vue起到监听数据的变化自动渲染到数据中。

3.MVVM（上面两个的底层原理）

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model、View、ViewModel它把html分成这三个部分。

Model : 表示当前页面渲染是所以来的数据源。

View ：表示当前页面所渲染的Dom结构。

ViewModel ：表示vue实例，它是MVVM的核心。

ViewModel回将当前页面的数据源（Model）和页面结构（View）链接在一起。

4.指令与过滤器

1.内容渲染指令：

v-text 缺点(会覆盖标签内部的原本内容)
{{}} 插值表达式，解决内容覆盖问题。（不能覆盖原有内容）只能用在内容节点，不能用在属性节点！！！
v-html 渲染带标签的内容，将带标签的字符串，渲染成真正的html内容。

2.属性绑定指令

注意：插值表达式只能用在元素的内容节点，不能用在元素属性节点中！

v-bind 为元素的属性动态绑定值 可以简写成英文的：冒号，在使用v-bind属性绑定期间，如果绑定的内容需要动态拼接，字符串外面应该放一个单引号。
例如： <div :title="'box' + index">这是一个div</div>

3.事件绑定指令

1.v-on：为绑定事件，需要在methods里面定义函数，简写使用@。
其他的事件绑定属性套用就可以@+事件类型！！！！
事件修饰符
···prevent可以阻止a链接的跳转,表单的提交等 vue中的事件修饰符号
···stop可以阻止事件冒泡事件冒泡指的是

<div id="app">
        <!-- prevent可以阻止a链接的跳转,表单的提交等  vue中的事件修饰符号 -->
        <!-- stop可以阻止事件冒泡    事件冒泡指的是 -->
      <a href="http://www.baidu.com" @click.prevent="clickPrint">跳转到百度首页</a>
      <hr>

      <div style="height: 150px; background-color:red; padding-left: 100px; line-height: 150px;" @click="divHandler">
        <button @click.stop="btnHandler">按钮</button>
      </div>
    </div>

    <script>
      const vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            clickPrint(e){
                console.log("我点击了这个a标签");
                // e.preventDefault();     //原生写法
            },
            btnHandler(e){
                //e.stopPropagation();
                console.log('btnHandler');
            }, 
            divHandler(){
                console.log('divHandler');
            },
           

        },
      });
    </script>

4.按键修饰符

1.键盘事件 keyup 中可以使用esc和enter按钮，vue中使用@keyup. enter=''去实现，如：
<input type="text" @keyup.esc="clearInput" @keyup.enter="clearEnter">
下面是一个demo实现通过input获取焦点后通过键盘上的esc和enter按钮进行input框的清空操作：

<!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>vue按键修饰符</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
<body>
    <div id="app">
        <!-- keyup键盘事件 -->
        <input type="text" @keyup.esc="clearInput" @keyup.enter="clearEnter">  
        <input type="text" @keyup.enter="clearInput">  

    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{

            },
            methods: {
                clearInput(e){
                    e.target.value = '';  //点击esc按钮情况input的内容   必须获取焦点的情况!
                    console.log('触发了一次')
                },
                clearEnter(e){
                    e.target.value='';
                    console.log('触发enter的方法');
                }
            },
        });
    </script>
</body>
</html>

5.数据双向绑定

1.v-model 数据线双向绑定

input输入框
1.1 type = “radio”
1.2 type = “checkbox”
1.3 type = “xxxx”
textarea
select

demo

<!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>vue8双向数据绑定指令</title>
  </head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
  <body>
    <div id="app">
        <p>用户的名字是:{{username}}</p>
        <!-- 双向数据绑定 只能用在文本框，表单里面-->
        <input type="text" v-model = "username"/> 
        <hr>
        <select name="" id=""  v-model="city">
            <option value="">请选择城市</option>
            <option value="1">江苏</option>
            <option value="2">河南</option>
            <option value="3">深圳</option>
            <option value="4">上海</option>
            <option value="5">深圳</option>
            <option value="6">湖南</option>
        </select>
        <p>{{city}}</p>
        <button @click="showValue">显示cicty绑定的option的值</button>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
            username:"zhangsanww",
            // 默认值city的值是上海 ，数据的双向绑定是真的很神奇！！！！
            city:"1" 
        },
        methods: {
            showValue(e){
                alert(this.city);
            }
        },
      });
    </script>
  </body>
</html>

2. v-model的修饰符

vue 为v-model指令提供了3个修饰符：

number (自动将用户输入的内容进行处理)
trim （自动过滤用户输入的首尾空白字符）
lazy （在“change”时候而非“input”时候更新）

demo

<!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" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
    <title>vue9v-model的修饰符</title>
  </head>
  <body>
    <div id="app">
      <input v-model.number="n1" type="text" /> +
      <input v-model.number="n2" type="text" /> = <span>{{ n1+n2 }}</span>
      <hr>
      <input type="text" v-model.trim="username">
      <button @click="getUserName">获取用户名字</button>
      <hr>
      <!-- v-model.lazy在输入中的过程不会同步  、、防抖和节流 -->
      <input type="text" v-model.lazy="username">
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          username: "张三zhangsan",
          n1: 1,
          n2: 2,
        },
        methods: {
            getUserName(){
                //使用反引号进行填充
                console.log(`用户名是："${this.username}"`);
            }
        },
      });
    </script>
  </body>
</html>

6.条件渲染指令

v-show的原理是：动态的为元素添加或移除display：none，控制元素的隐藏
- 如果要频繁的切换元素的显示状态，用v-show会更好
v-if的原理是：每一次都会动态删除，动态加入页面中，频繁使用需要消耗更多的性能。
- 如果刚进入页面的时候，某些元素不需要被展示，并且后期也用不到的情况下，此时v-if性能更好。
在实际开发中不用考虑这这个问题，直接使用v-if就可以了！

包括了v-if、v-else-if、v-else

demo

<!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>vue10条件渲染指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
  </head>
  <body>
    <div id="app">
      <!-- v-if每一次都会动态删除，动态加入页面中，需要消耗更多的性能，
        v-show 是增删display：none -->
      <p v-if="flag">这是被v-if控制的元素</p>
      <p v-show="flag">这是被v-show控制的元素</p>
      <div v-if="type=='A'">优秀</div>
      <div v-else-if="type=='B'">良好</div>
      <div v-else="type=='C'">不及格</div>
    </div>

    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          //如果flag为true，就显示被控制的元素；如果false就隐藏元素。
          flag: false,
          type: "C",
        },
        methods: {},
      });
    </script>
  </body>
</html>

7.Vue的指令与过滤器

v-for 列表渲染指令
demo

<!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>vue10循环渲染指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    />
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="app">
      <table class="table table-bordered table-hover table-striped">
        <thead>
          <th>索引</th>
          <th>ID</th>
          <th>姓名</th>
        </thead>
        <tbody>
          <!-- (item,index) index是需不需要用到索引来决定 -->
          <!-- 官方建议：只要用到v-for的指令，那么一定要绑定一个：key的属性。而且尽量要把id作为key的值 -->
          <!-- 官方对key的值的类型,是由要求的,key的值只能是字符串或者数字类型 -->
          <!-- key的值是不能重复的 -->
          <tr v-for="(item,index) in list" :key="item.id">
            <td>{{index}}</td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          list: [
            { id: 1, name: "张三" },
            { id: 2, name: "王五" },
            { id: 3, name: "小李" },
          ],
        },
        methods: {},
      });
    </script>
  </body>
</html>

key的注意事项

key的值只能是数字或者是字符串类型。
key的值必须是唯一的（不能重复）。
建议使用数据项的id属性的值作为key的值。
使用index值作为key没有任何意义（index值不具备唯一性）。
建议使用v-for指令时候一定要指定key的值，技能提升性能、有防止列表状态絮乱。

综合demo：实现表单添加功能，表格删除功能。文件代码在最上方的gitee中

<!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>品牌列表案例</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <link rel="stylesheet" href="./css/brandlist.css" />
  </head>

  <body>
    <div id="app">
      <!-- 卡片区域 -->
      <div class="card">
        <div class="card-header">添加品牌</div>
        <div class="card-body">
          <!-- 添加品牌的表单区域 -->
          <!-- form 表单元素有 submit 事件中的prevent阻止刷新,事件照样会触发 -->
          <form @submit.prevent="add">
            <div class="form-row align-items-center">
              <div class="col-auto">
                <div class="input-group mb-2">
                  <div class="input-group-prepend">
                    <div class="input-group-text">品牌名称</div>
                  </div>
                  <input
                    type="text"
                    class="form-control"
                    placeholder="请输入品牌名称"
                    v-model.trim="brand"
                  />
                </div>
              </div>
              <div class="col-auto">
                <button type="submit" class="btn btn-primary mb-2">添加</button>
              </div>
            </div>
          </form>
        </div>
      </div>

      <!-- 表格区域 -->
      <table class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">品牌名称</th>
            <th scope="col">状态</th>
            <th scope="col">创建时间</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>
              <div class="custom-control custom-switch">
                <!-- 使用 v-model 实现双向数据绑定 -->
                <input
                  type="checkbox"
                  class="custom-control-input"
                  :id="'cb' + item.id"
                  v-model="item.status"
                />
                <!-- 使用 v-if 结合 v-else 实现按需渲染 -->
                <label
                  class="custom-control-label"
                  :for="'cb' + item.id"
                  v-if="item.status"
                  >已启用</label
                >
                <label class="custom-control-label" :for="'cb' + item.id" v-else
                  >已禁用</label
                >
              </div>
            </td>
            <td>{{ item.time }}</td>
            <td>
              <a href="javascript:;" @click="remove(item.id)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          // 品牌列表的数据
          list: [
            { id: 1, name: "BMW", status: true, time: new Date() },
            { id: 2, name: "Audi", status: false, time: new Date() },
          ],
          //用户输入的品牌名称
          brand: "",
          nextId: 3,
        },
        methods: {
          // 点击链接删除对应的品牌
          remove(id) {
            //过滤函数
            this.list = this.list.filter((item) => item.id !== id);
          },
          // 阻止表单默认提交后，触发add事件
          add() {
            // 如果判断到brand为空字符串，就return出去。
            if (this.brand == "") return alert("不能输入空字符串");

            // 不为空执行添加操作
            const obj = {
              id: this.nextId,
              name: this.brand,
              status: true,
              time: new Date(),
            };
            this.list.push(obj);
            this.brand = "";
            this.nextId++;
          },
        },
      });
    </script>
  </body>
</html>