前端学习笔记____Vue2+Vue3全家桶_vue2和vue3笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_55181759/article/details/119535441

🌵 作者主页：仙女不下凡－前端萌新

🌵 前言介绍：以下👇 内容都是我个人对于前端知识的总结，会定期更新欢迎持续关注！

🌵 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！

🌺🌺前言🌺🌺

🏵学习视频地址：https://www.bilibili.com/video/BV1Zy4y1K7SH?from=search&seid=16946268743532201801
🏵 学习进度：该视频适用于有css、html、JavaScript与前后端交互基础的同学
🏵 学习方法总结：https://editor.youkuaiyun.com/md/?articleId=116121563

🌺🌺第一章 VUE基础🌺🌺

🌴一、Vue简介🌴

⭐1.Vue是什么?

🌼 Vue是一套用于构建用户界面的渐进式JavaScript框架。

⭐2.Vue发展历史

在这里插入图片描述

⭐3.Vue的特点

🌼特点：❶ 采用组件化模式，提高代码复用率且让代码更好维护；❷声明式编码，让编码人员无需直接操作DOM，提高开发效率；❸使用虚拟DOM+由优秀的Diff算法，尽量复用DOM节点。
在这里插入图片描述

🌱二、初识Vue🌱

⭐1.Vue模板语法

1.使用vue必须创建一个Vue实例,且要传入一个配置对象
<head>
  <script text="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="root">容器</div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;  //阻止Vue在启动时生成生产提示

  2.创建Vue实例
  const x = new Vue({
    el: '#root', //用于指定当前Vue实例为哪个容器服务,通常为css选择器字符串(element)
    data: {},
  })
</script>

🌼Vue模板语法两大类－插值语法：功能：用于解析标签体内容；写法：{ {xxx}}，xxx是js表达式，可以直接读取data中所有属性。
🌼Vue模板语法两大类－指令语法：功能：用于解析标签(包括：标签属性，标签体内容，绑定事件......)；写法：v-????。

⭐2.数据绑定

🌼单向数据绑定v-bind：数据只能从data流向页面，简写:。
🌼双向数据绑定v-model：如下代码是错误的，v-model只能应用在表单类元素(输入类元素)

<h2 v-model:x="name">你好啊</h2>

🌼⚠️注意⚠️：❶双向数据绑定一般都应用在表单类元素上(如：input、select等)；❷v-model:value可以简写为v-model，因为v-model默认收集的就是value的值。

⭐3.el与data的两种写法

⑴ `el`的两种写法

🌼 el的第一种写法

<head>
  <script text="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="root">容器</div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;  //阻止Vue在启动时生成生产提示

  const vm = new Vue({
     
    el: '#root', /第一种写法,直接与容器关联/
    data: {
     },
  })
</script>

🌼 el的第二种写法

<head>
  <script text="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="root">容器</div>

  <script type="text/javascript">
    Vue.config.productionTip = false;  //阻止Vue在启动时生成生产提示

    const vm = new Vue({
     
      //el: '#root', //直接与容器关联
      data: {
     },
    });
    vm.$mount('#root');  /这就是第二种写法挂载,意义:写法灵活,比如可以加定时器控制执行时间/
  </script>
</body>

⑵ `data`的两种写法

🌼data第一种写法

<head>
  <script text="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="root">容器</div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;  //阻止Vue在启动时生成生产提示

  const vm = new Vue({
     
    el: '#root',
    data: {
     },   /data第一种写法,对象式/
  })
</script>

🌼data第二种写法

<head>
  <script text="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="root">容器</div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;  //阻止Vue在启动时生成生产提示

  const vm = new Vue({
     
    el: '#root',
    data: function(){
       /data第二种写法,函数式,function可以省略,组件必须使用函数式/
      return: 'xxx',
    },
  })
</script>

⭐4.MVVM模型

🌼 MVVM模型：Vue参考了该模型
🌼 M：模型(Model)：对应data中的数据
🌼 V：视图(View)：模板
🌼 VM：视图模型(ViewModel)：Vue实例对象
MVVM模型
🌼 总结发现：❶data中所有的属性，最后都出现在了vm身上；❷另外vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

⭐5.数据代理

🌼 回顾Object.defineproperty方法(ES6)：给对象添加属性

let number = 18;
let person = {
   
  name: '张三',
  sex: '男',
  //age: number,
};

//需求当number改变时可以同步使age改变,这是就是使用到Object.defineproperty方法
Object.defineproperty(person, 'age', {
   
  /当有人读取person的age属性时,get函数(getter函数)就会被调用,且返回值就是age的值/
  get:function(){
     //function可以省略
    return number;
  },
  /当有人修改person的age属性时,set函数(setter函数)就会被调用,且会收到修改的具体值/
  set(value){
   
    number = value
  }
})

🌼 Vue中的数据代理：通过一个对象代理对另一个对象中属性的操作(读/写)，示例代码如下：

//简单的数据代理
let obj = {
    x:200 };
let obj2 = {
    y:300 };

Object.defineproperty(obj2,'x',{
   
  get:(){
   
    return obj.x;
  },
  set(value){
   
    obj.x = value
  }
})

🌼 Vue中数据代理的好处：更加方便的操作data中的数据。
🌼 基本原理：❶通过Object.defineproperty()把data对象所有属性添加到vm上；❷为每一个添加到vm的属性，都指定一个getter/setter；❸在getter/setter内部去操作(读/写)data中对应的属性。

⭐6.事件处理

⑴ 事件处理v-on

🌼 事件的基本使用：❶使用v-on:xxx或@xxx绑定事件，其中xxx是事件名；❷事件的回调需要配置的在methods对象中，最终会在vm上；❸methods中配置的函数，不要用箭头函数，否则this就不是vm实例；❹methods中配置的函数，都是被Vue所管理的函数，this指向是vm实例或组件实例对象；❺@click="demo"与@click="demo($event)"效果一致，但是后者可以传参。

⑵ 事件修饰符

🌼 Vue中的事件修饰符：❶prevent阻止默认事件(常用)；❷stop阻止事件冒泡(常用)；❸once事件只触发一次(常用)；❹capture使用事件的捕获模式；❺self只有event.target是当前操作的元素时才触发事件；❻passive事件的默认行为立即执行，无需等待事件回调执行完毕。

⑶ 键盘事件key

🌼 Vue中常用的按键别名：

按键	别名
回车	enter
删除	delete(捕获"删除"和"退格"键)
退出	esc
空格	space
换行	tab(特殊，必须配合keydown去使用)
上，下，左，右	up，down，left，right
🌼 ⚠️注意⚠️：`Vue`未提供别名的按键，可以使用按键原始的`key值`去绑定，但注意要转为`kebab-case`(短横线命名)。
🌼 系统修饰键(用法特殊)：`ctrl、alt、shift、meta`。❶配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发；❷配合`keydown`使用：正常触发事件；❸也可以使用`keyCode`去指定具体的按键(不推荐)。
🌼 `Vue.config.keyCode.自定义键名 = 键码`：可以定制按键别名。

⭐7.计算属性computed与监视(侦听)属性watch

⑴ 计算属性－computed

🌼 对比插值表达式、方法methods、计算属性，来了解计算属性存在的必要。

1.姓名案例－插值语法实现
<body>
  <div id="root">
    姓：<input type="text" v-model="fristName"><br/>
    名：<input type="text" v-model="lastName"><br/>
    全名：<span>{
  {fristName}}-{
  {lastName}}</span>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;  //阻止Vue在启动时生成生产提示

  const vm = new Vue({
     
    el: '#root',
    data:{
     
      fristName: '张',
      lastName: '三'
    }
  })
</script>

2.姓名案例－methods方法实现
<body>
  <div id="root">
    姓：<input type="text" v-model="fristName"><br/>
    名：<input type="text" v-model="lastName"><br/>
    全名：<span>{
  {fullName()}}</span>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;  //阻止Vue在启动时生成生产提示

  const vm = new Vue({
     
    el: '#root',
    data: {
     
      fristName: '张',
      lastName: '三'
    },
    methods: {
     
      fullName(){
     
        return this.fristName + '-' + this.lastName, /问题效率不高/
      }
    }
  })
</script>

3.姓名案例－计算属性实现
<body>
  <div id="root">
    姓：<input type="text" v-model="fristName"><br/>
    名：<input type="text" v-model="lastName"><br/>
    全名：<span>{
  {fullName}}</span>
    全名：<span>{
  {fullName}}</span> /只调用了一次fullName中的get(),有缓存,优势/
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;  //阻止Vue在启动时生成生产提示

  const vm = new Vue({
     
    el: '#root',
    data:{
     
      fristName: '张',
      lastName: '三'
    },
    computed:{
       //计算属性
      //完整写法
      fullName:{
     
        /get作用：当有人读取fullName时,get就会被调用,且返回值就作为fullName的值/;
        /get什么时候被调用? ❶初次读取fristName时 ❷所依赖的数据发生改变时/
        get(){
      return this.fristName + '-' + this.lastName },
        /set什么时候调用? 当fullName被修改时调用./
        set(){
     }  //不是必须写的
      }
      
      //简写,如果没有定义setter简写形式如下
      fullName(){
     
        return this.fristName + '-' + this.lastName
      }
    }
  })
</script>

🌼 定义：要用的属性不存在，要通过已有属性计算得来。
🌼 原理：底层借助了Object.defineproperty()提供的getter和setter。
🌼 get函数什么时候执行❶初次读取时会执行一次❷当依赖的数据发生变化时会被再次调用。
🌼 优势：与methods实现相比，内部有缓存机制(复用)，效率更高，调试更方便。
🌼 ⚠️备注⚠️：❶计算属性最终出现在vm实例上，直接读取使用即可❷如果计算属性要被修改，那必须写在set函数去响应修改，且set中要引起计算时依赖的数据发生改变`。

⑵ 监视(侦听)属性－watch

通过上述学习的方法实现天气的切换
<head>
  <script text="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <h2>今天天气很{
  {info}}</h2>
    <button @click="changeWeather">切换天气</button> /事件(如click)后的表达式默认在vm上面找属性和方法执行/
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;  //阻止Vue在启动时生成生产提示

  //创建Vue实例
  const vm = new Vue({
     
    el: '#root',
    data: {
     
      isHot: true,
    },
    computed: {
     
     info(){
      return this.isHot ? '炎热' : '凉爽' }
    },
    methods: {
     
      changeWeather(){
      this.ihHot = ! this.isHot }
    }
  })
</script>

通过该案例理解监视watch方法
<head>
  <script text="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <h2>今天天气很{
  {info}}</h2>
    <button @click="changeWeather">切换天气</button> 
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;  //阻止Vue在启动时生成生产提示

  //创建Vue实例
  const vm = new Vue({
     
    el: '#root',
    data: {
     
      isHot: true,
    },
    computed: {
     
     info(){
      return this.isHot ? '炎热' : '凉爽' }
    },
    methods: {
     
      changeWeather(){
      this.ihHot = ! this.isHot }
    }
    watch:{
       /第一种监视watch方法/
      isHot:{
       /这里isHot是配置对象,也是监视的对象/
        immediate:true,  /初始化时让handler调用一下/
        //handler什么时候调用?当isHot发生改变时调用.
        handler(newValue,oldValue){
      console.log(newValue,oldValue) }  /handler也是配置对象/
      }
    }

    /简写,当不需要设置immediate与deep时,第一种可以这样简写/
    watch{
     
      isHot(newValue,oldValue){
      console.log(newValue,oldValue) }
    }
  })

  vm.$watch('isHot', {
       /第二种监视watch方法/
    immediate:true,
    handler(newValue,oldValue){
      console.log(newValue,oldValue) }
  });

  /简写,当不需要设置immediate与deep时,第二种可以这样简写/
    vm.$watch('isHot', function(newValue,oldValue){
      console.log(newValue,oldValue) });
</script>

🌼 监视属性watch：当监视的属性变化时，回调函数自动调用，进行相关操作，监视属性必须必存在，才能进行监视。
🌼 监视的两种写法：❶new Vue时传入watch配置❷通过vm.$watch监视。

⑶ 深度监视(侦听)

通过该案例理解深度监视-只检测a的变化
<head>
  <script text="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <h3>a的值是:{
  {number.a}}</h3>
    <button @click="number.a++">点我让a+1</button>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;

  const vm = new Vue({
     
    el: '#root',
    data: {
     
      number: {
     
        a:1,  //监听a
        b:1
      }
    },
    watch:{
      
      /监视多级结构中某个属性的变化/
      'number.a':{
     
        handler(newValue,oldValue){
     
        }
      }
    }
  })
</script>

通过该案例理解深度监视-检测a和b的变化
<head>
  <script text="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <h3>a的值是:{
  {number.a}}</h3>
    <button @click="number.a++">点我让a+1</button>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;

  const vm = new Vue({
     
    el: '#root',
    data: {
     
      number: {
     
        a:1,  //监听a
        b:1
      }
    },
    watch:{
      
      number:{
     
        deep: true,  /深度检测开启/
        handler(newValue,oldValue){
     }
      }
    }
  })
</script>