开始

开始

模板语法

• {{ xxx }}:插值表达式（Mustache 语法），xxx 为 js表达式。

<template>
  <div id="app">{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!",
    };
  },
};
</script>

<style scoped>
#app {
  text-align: center;
}
</style>

渐进式框架

Vue 从设计角度来讲， 虽然能够涵盖这张图上所有的东西，但是你并不需要一上手就把所有东西全用上(主张最少) ，因为没有必要。无论从学习角度，还是实际情况，这都是可选的。声明式渲染和组件系统是Vue的核心库所包含内容，而客户端路由、状态管理、构建工具都有专门解决方案。这些解决方案相互独立，你可以在核心的基础上任意选用其他的部件，不一定要全部整合在一起。

• 声明式渲染：DOM 随状态（数据）更新而更新。（声明式：关注结果，命令式：关注过程（jQuery））

---

mvvm 框架

• 虽然没有完全遵循 MVVM 模型 (opens new window)，但是Vue的设计也受到了它的启发。因此在文档中经常会使用 vm(ViewModel的缩写) 这个变量名表示 Vue实例。通过用 Vue 函数创建一个新的**Vue 实例**。

  var vm = new Vue({
    // 选项
  });
  

• MVVM（Model–view–viewmodel）是一种软件架构模式 (opens new window)，MVVM支持双向绑定，意思就是当 M 层数据进行修改时，VM层会监测到变化，并且通知 V 层进行相应的修改，反之修改 V 层则会通知 M 层数据进行修改，以此也实现了视图与模型层的相互解耦。View 的变动，自动反映在ViewModel，反之亦然。

• 关系图

  

• 响应式原理

  1. 侵入式：this.a++(不调用方法)

     非侵入式：this.setState({a:this.state.a++})(调用方法)

  2. Object.defineProperty() (opens new window)

     //基本使用
     let obj = { b: 5 };
     Object.defineProperty(obj, "a", {
       //    value:5, //设置值
       //    writable: false, //是否可写(是否能被修改)
       //    enumerable:false,//是否可被枚举(循环对象是否能被输出)
       get() {
         console.log("访问a");
         return 6; //return的值是设置a的属性，没有return,下次访问a是undifined
       },
       set(newValue) {
         console.log("设置a");
         console.log(newValue); //被设置的值被当做参数传入set
       },
     });
     obj.a = 7;
     console.log(obj.a); //a=6,访问时又走了get,在使用临时变量保存改变的值，在set的时候赋值给临时变量，get中返回临时变量
     

     //getter/setter需要临时变量周转才能工作
     let obj = {};
     let temp;
     Object.defineProperty(obj, "a", {
       get() {
         console.log("访问a");
         return temp;
       },
       set(newValue) {
         console.log("设置a");
         temp = newValue;
       },
     });
     obj.a = 7;
     console.log(obj.a);
     

     //封装成函数defineReactive
     let obj = {};
     function defineReactive(data, key, val) {
       //data:数据对象，key:键值，val替代临时变量
       //函数外部可以访问val的值，get和set闭包中的环境
       Object.defineProperty(data, key, {
         enumerable: true, //可枚举
         configurable: true, //可改变或删除
         get() {
           console.log("访问" + key);
           return val;
         },
         set(newValue) {
           console.log("设置" + key);
           if (val == newValue) return;
           val = newValue;
         },
       });
     }
     defineReactive(obj, "a", 10);
     obj.a = 4;
     console.log(obj.a);
     

  3. 对象代理

     function Vue(options) {
         let _data = options.data()
         let _this = this
         Object.keys(_data).forEach(i => {//代理对象添加到实列原型
             Object.defineProperty(_this, i, {
                 get() {
                     console.log('Get'+i)
                     return _data[i]
                 },
                 set(newValue) {
                     _data[i]=newValue
                     return newValue
                 }
             })
         })
     
     }
     let vm = new Vue({
         data() {
             return {
                 name: 'Blueless Bird',
                 author: 'Joni'
             }
         }
     })
     vm.name='Hey Boi.'
     console.log(vm.name)
     

  4. 其他

     //this.$options.data().xxx获取初始值
     //el > $mount
     //render > template 替换el的内容
     

---

生命周期函数

• 在某一时刻自动执行的函数（也叫钩子函数）

• 图谱

  

• 1. beforeCreate在初始化 / 实例创建 之前执行的函数
  2. Created在初始化 / 实例创建 之后执行的函数,可以访问methods， data， computed等上的方法和数据
  3. beforeMount在组件内容被渲染到页面之前自动执行的函数

  （注意：可获取到vm.el，但并未挂载）

  4. Mounted在组件内容被渲染到页面之后自动执行的函数
  5. beforeUpdate在数据将要变化之前自动执行的函数
  6. updated在数据发生变化之后自动执行的函数
  7. beforeUnmount在VUE实例销毁之前自动执行的函数
  8. unmounted在VUE 实例销毁之后自动执行的函数
  9. errorCaptured 捕获一个来自子孙组件的错误时被调用

不要在选项 property 或回调上使用箭头函数 (opens new window)，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

• hook

  export default{
    methods:{
      fn(){
        const timer = setInterval(()=>{
          //具体执行代码
          console.log('1');
        },1000);
        this.$once('hook:beforeDestroy',()=>{
          clearInterval(timer);
          timer = null;
        })
      }
    }
  }
  

  //父组件
  <rl-child @hook:mounted="childMountedHandle"
  />
  //vue3 改为@vnode-updated
  method () {
    childMountedHandle() {
    // do something...
    }
  },
  

• 父子组件生命周期执行顺序

  初始化：

  

  原理：子组件作为父组件的DOM子节点，父组件实例化完成后要挂载这个父组件，调用父组件的render方法方向有子组件，则去 创建渲染子组件并缓存（因为可能有多层），子组件都完成完成父组件的挂载 子组件挂载完成后，父组件还未挂载

  更新 同理：先完成子组件的更新，再完成父组件

  父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

  销毁

  父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

---

计算属性

• 计算属性：依赖 data 中的数据进行计算，与 methods 不同的是只有响应式依赖发生改变时才进行重新计算(计算属性是基于它们的响应式依赖进行缓存的)。模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

  2

  <div>{{nmu1}}</div>
  <script>
      export default {
          data() {
              return {
                  num: 1,
              };
          },
          computed: {
              nmu1() {
                  //this指向vm实例，需要使用函数声明
                  return this.num + 1;
              },
          },
      };
  </script>
  

  显示代码 复制代码 复制代码

• 计算属性的 getter 和 setter

  当我们取计算属性值的时候会执行 get 方法（模板使用），设置的时候会执行 set 方法，computed 属性默认为 getter，但是它还提供了 setter，可以由因变量去影响自变量。

  wangcai

  <template>
  <input v-model="fullname" type="text" />
  <p>{{fullname}}</p>
  </template>
  <script>
      export default {
          data() {
              return {
                  firstName: "wang",
                  lastName: "cai",
              };
          }, //可以return fuc传参
          computed: {
              fullname: {
                  //这时fullname是对象
                  get: function () {
                      console.log("设置值");
                      return this.firstName + this.lastName;
                  },
                  set: function (value) {
                      console.log(value); //这里的value是fullname
                      this.firstName = "zhang"; //当改变fullname时执行set函数
                      this.lastName = "shang";
                  },
              },
          },
      };
  </script>
  

  显示代码 复制代码 复制代码

---

侦听器

• 监听属性，属性变化时，自动执行里面的函数，参数：current（现在参数的值），prev（以前参数的值）

  <input v-model="firstName" type="text" />
  <p>{{fullname}}</p>
  <script>
    export default {
      watch: {
        firstName: function (n, o) {
          //改变firstName，执行函数,改变fullname
          this.fullname = n + this.lastName;
          console.log(o);
        },
      },
    };
  </script>
  

• 深度监听

  1. handler方法和immediate属性

     最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算,修改一下 watch 写法使其初绑定的时候就执行。

     watch: {
         firstName: {
             handler(n, o) {
                 this.fullname =n+this.lastName
                 console.log(o)
             },
                 immediate:true
         },
     },
     

  2. deep属性

     watch里面还有一个属性 deep，默认值是 false，代表是否深度监听。

     <input v-model="obj.a" type="text" />
     <p>{{ obj.a }}</p>
     <script>
       export default {
           data(){
               return {
                   obj: { a: 123 },
               }
           }
           watch: {
           obj: {
           handler() {
               this.obj.a = 567;
               console.log("change");
           },
               //immediate: true,
               deep: true
       //obj.a变化时执行函数，给对象的所有属性都加上监听器
       },
       },
       }
     </script>
     

     //优化，使用字符串形式监听
     watch: {
         'obj.a': { //只给obj.a加监听器
             handler() {
                 console.log("change");
             },
                 immediate: true,
                     deep: true
         },
     },
     

3. 注销 watch

   watch 写在组件中，会随着组件的销毁而销毁。如果使用下面这样的方式写 watch，那么就要手动注销。

   const unWatch = app.$watch("text", (newVal, oldVal) => {
     console.log(`${newVal} : ${oldVal}`);
   }); //返回unWatch方法
   
   unWatch(); // 手动注销watch
   

4. watch 监听路由

   可以使用 watch 来进行路由的监听

   watch: {
     changeShowType(value) {
         console.log("-----"+value);
     },
         '$route'(to,from){
             console.log(to);   //to表示去往的界面
             console.log(from); //from表示来自于哪个界面
             if(to.path=="/shop/detail"){
                 console.log("商品详情");
             }
         }
   },
   

---

过滤器

用于一些常见的文本格式化，用在双花括号插值和 v-bind 表达式中。

2024-08-05

{{date|format("prop")}}
<!-- date作为format函数的参数，format也可以传参 -->
<script>
  export default {
    data() {
      return {
        date: new Date(),
      }
    },
    filters: {
      format: function (value, prop) {
        //格式化日期
        //console.log(prop);
        const Y = value.getFullYear();
        const M = value.getMonth() + 1;
        const D = value.getDate();
        const times = Y + (M < 10 ? "-0" : "-") + M + (D < 10 ? "-0" : "-") + D;
        return times;
      },
    },
  };
</script>

显示代码 复制代码 复制代码

---

指令

• v-text

  1. 与花括号的区别是在页面加载时不显示{{}}。

  2. 在的前后可以添加其他的内容,而在 v-text 里面不行。

• v-html

  更新元素的 innerHTML

  <p v-html="msg"></p>
  <script>
    export default {
      data() {
        return {
          msg: "<input/ placeholder='这是一个输入框'>",
        };
      },
    };
  </script>
  

  显示代码 复制代码 复制代码

  注意

  1. 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击 (opens new window)。只在可信内容上使用 v-html，永不用在用户提交的内容上。
  2. 在单文件组件 (opens new window)里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules (opens new window) 或用一个额外的全局 <style> 元素手动设置类似 BEM 的作用域策略。
  3. 浅谈XSS攻击的那些事 (opens new window)

• v-show

  根据变量控制 dom 显示与隐藏，变量为 false 时,display:none,v-show 不支持 <template> 元素，也不支持 v-else。

• v-if

  根据变量控制 dom 显示与隐藏，变量为 false 时,直接移除 dom 元素。v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

• v-bind

  缩写：:绑定 html 标签中的属性值。

  <a :[type]="'http://www.baidu.com'">百度</a>
  <!--写静态要在""中加''-->
  <br />
  <a :[type]="url">百度</a>
  <script>
    export default {
      data() {
        return {
          type: "href",
        };
      },
    };
  </script>
  

• v-on

  缩写： @事件监听器，

  1. 事件修饰符：@click.prevent（阻止默认行为）
  2. 模板中绑定事件：<Son @click=‘handleClick’> \</Son>
  3. $event传递原生事件：hanclick(count,$event)，不传参数，第一个参数为e

• 修饰符

  表单：lazy，trim，number

  事件：stop(冒泡)，prevent(阻止默认)，capture(捕获，使事件触发从包含这个元素的顶层开始往下触发)，once(只触发一次)，self(只当在 event.target 是当前元素自身时触发处理函数),passive(onscroll事件加一个.lazy),native(监听根元素的原生事件)

  鼠标、键盘:left、right、middle：鼠标左、右、中键点击,keycode：对应键盘码

---

样式绑定

1. 字符绑定：在 data()在定义变量，v-bind 绑定属性

   给时光以生命，给岁月以文明

   <div :class="str">{{message}}</div>
   <script>
     export default {
       data() {
         return {
           str: "red",
           message: "给时光以生命，给岁月以文明",
         };
       },
     };
   </script>
   <style>
     .red {
       color: red;
     }
     .green {
       color: green;
     }
   </style>
   

   显示代码 复制代码 复制代码

2. 对象绑定：传给:class 一个对象

   给时光以生命,而不是给生命以时光

   <div :class="{ red:isRed, blue:isBlue }">{{message}}</div>
   <script>
       export default {
           data() {
               return {
                   message: "给时光以生命,而不是给生命以时光",
                   isRed: false,
                   isBlue: true, //根据isBlue的值控制样式
               };
           },
       };
   </script>
   <style>
       .red{
           color:red;
       }
       .blue{
           color:skyblue
       }
   </style>
   

   显示代码 复制代码 复制代码

   或者

   <div :class="{ red:false,green:true}">{{message}}</div>
   

3. 数组绑定：把数组传给 :class

   <div :class="['red', 'active']">{{ message }}</div>
   

   或者 data()中定义数组

   或许是不知梦的缘故，流离之人追逐幻影。

   <div :class="classArray">{{ message }}</div>
   <script>
       export default {
           data() {
               return {
                   message: "或许是不知梦的缘故，流离之人追逐幻影。",
                   classArray: ["pink", "active"],
               };
           },
       };
   </script>
   <style>
       .pink{
           color:pink;
       }
       .active:hover{
           font-weight:bold
       }
   </style>
   

   显示代码 复制代码 复制代码

4. 行内动态样式

   1. 字符串形式

      The closer you look,the less you see.

      <div :style="red">{{ message }}</div>
      <script>
          export default {
              data() {
                  return {
                      message: "The closer you look,the less you see.",
                      red: "color:gold", //字符串样式
                  };
              },
          };
      </script>
      

      显示代码 复制代码 复制代码

   2. 对象形式

      These violent delights have violent ends

      <div :style="styleObj">{{ message }}</div>
      <script>
        export default {
          data() {
            return {
              message: "These violent delights have violent ends",
              styleObj: { color: "greenYellow " }, //对象样式
            };
          },
        };
      </script>
      

      显示代码 复制代码 复制代码

   其他

   <el-button :style="list[types]" @click="change" ref="btn">点击变色</el-button>
   <script>
       export default {
           data() {
               return {
                   list:[
                       "backgroundColor:red",
                       "backgroundColor:blue",
                       "backgroundColor:yellow"],
                   types:1
               };
           },
           methods: {
               change(){
                   this.types=++this.types%3
               }
           }
       }
   </script>
   

   显示代码 复制代码 复制代码
   <el-button
           :class="{red:types==0,
                   blue:types==1,
                   yellow:types==2}"
           @click="types=++types%3"
           ref="btn"
           >
       点击变色
   </el-button>
   <script>
       export default {
           data() {
               return {
                   list:["red","blue","yellow"],
                   types:0
               };
           }
       }
   </script>
   

   显示代码 复制代码 复制代码

---

列表循环

• v-for:循环可迭代对象（数组，对象，字符串，数字）,vue 要求增加 key 值**（字符串、数值）**避免重复渲染。
• 零化域的缺失之环
• 闭时曲线的碑文
• 对偶福音的规约
• 模糊像散的孤独
• 二律背反的双重人格
• 永劫回归的潘多拉
• 回折叙唱的鹅妈妈
• 盟誓的文艺复兴