Vue 2.0-＞3.0学习笔记（第一章 Vue核心）

已于 2024-09-25 15:04:04 修改
阅读量948 收藏 30
点赞数 17
文章标签： vue.js 学习 笔记
于 2024-08-14 20:51:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/PNPYY/article/details/141171536
版权

Vue 2.0-＞3.0学习笔记（第一章 Vue核心）

1. 初识Vue

笔记

  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
  2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
  3. root容器里的代码被称为【Vue模板】；
  4. Vue实例和容器时一一对应得；
  5. 真是开发中只有一个Vue实例，并且会配合着组件一起使用；
  6. {{xxx}}中的xxx要写js表达式，且xxx可以在自动读取到data中的所有属性；
  7. 一旦data中的数据发送改变，那么页面（模板）中用到该数据的地方也会自动更新；

    注意区分： js表达式和js代码（语句）
  • 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。
    （1）.a
    （2）.a+b
    （3）.demo(1)
    （4）.x === y ? ‘a’ : ‘b’
  • js代码（语句）
    （1）.if(){}
    （2）.for(){}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>初识Vue</title>
</head>
<body> 
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello,{{name}}!</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue在启动时生成生成提示。
        new Vue({
            // el:document.getElementById('root')
            el:'#root',//el = element 用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串，若为id选择器，可以为el:'.root'
            data:{      //data中用于存储数据，数据供el所指定容器使用
                name:'max'
            }
        })
    </script>
</body>

2. Vue模板语法

笔记

Vue模板语法有两大类：

  1. 插值语法：
  •  功能：用于解析标签体内容。
  •  写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
  1. 指令语法：
  •  功能：用于解析标签（包括标签属性、标签体内容、绑定事件…）。
  •  举例：v-bind:href=“xxx” 或 简写为 :href =“xxx”, xxx同样要写js表达式，且可以直接读取到data中的所有属性。
     备注：Vue中有很多的指令，且形式都是v-???,此处我们只是拿v-bind举个例子。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <a :href="school.url">点我去{{school.name}}学习</a>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip =  false //阻止 vue 在启动时生成生产提示。
    
    new Vue({
        el:'#root',
        data:{
            name:'jack',
            school:{
                name:'max',
                url:'http://www.atguigu.com'
            }
            
        }
    })
</script>

3. 数据绑定

笔记

Vue中有2种数据绑定的方式：

  1. 单向绑定（v-bind）：数据只能从data流向页面。
  2. 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。
    备注：
    1. 双向绑定一般都应用在表单类元素上（如：input、select等）
    2. v-model：value可以简写为v-model，因为v-model默认收集的就是value值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
     <div id="root">
        <!-- 普通写法 -->
        <!-- 单向数据绑定：<input type="text" v-bind:value="name"> <br/>
        双向数据绑定:<input type="text" v-model:value="name"><br/> -->

        <!-- 简写 -->
        单向数据绑定：<input type="text" :value="name"> <br/>
        双向数据绑定:<input type="text" v-model="name"><br/> 
        <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素上）上 -->
         <h2 v-model:x="name">你好啊</h2>
     </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    new Vue({
        el:'#root',
        data:{
            name:'max'
        }
    })
</script>
</html>

4. el与data的两种写法

笔记

el与data的两种写法：

  1. el有2种写法
    (1).new Vue时候配置el属性。
    (2).先创建Vue实例,随后再通过vm.$mount(‘#root’)指定el的值。
  2. data有2种写法
    (1).对象式
    (2).函数式
    如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。
  3. 一个重要的原则:
    由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了,
    而是window。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>el与data的两种写法</title>
  </head>
  <body>
      <div id="root">
      <h1>Hello,{{name}}!</h1>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时生成生成提示。

    //el的两种写法
    /*const v = new Vue({
      //   el: '#root',//第一种写法
      data: {
        name: 'max',
      },
    });
    console.log(v);
    v.$mount("#root"); //第二种写法*/

    //data的两种写法
    new Vue({   
      el: '#root',
      //data的第一种写法:对象式
      /*data: {
        name: 'max',
      },*/
    
    //data的第二种写法:函数式
    data(){
        console.log('@@@',this)//此处的this是Vue实例对象
        return{
            name:'max'
        }
    }
    });
  </script>
</html>

5. MVVM模型

笔记

MVVM模型

  • M：模型(Model) ：对应 data 中的数据
  • V：视图(View) ：模板代码
  • VM：视图模型(ViewModel) ： Vue 实例对象
    观察发现:
       1. data中所有的属性,最后都出现在了vm身上.
       2. vm身上所有的属性=及Vue原型上所有属性,在Vue模板中都可以直接使用. 在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>理解MVVM</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
      <!-- 准备好一个容器 -->
    <div id="root">
      <h1>学校名称:{{name}}</h1>
      <h1>学校地址:{{address}}</h1>
      <!-- <h1>测试一下1:{{1+1}}</h1>
      <h1>测试一下2:{{$options}}</h1>
      <h1>测试一下3:{{$emit}}</h1>
      <h1>测试一下4:{{_c}}</h1> -->
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时生成生成提示。
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'max',
        address:'普宁',
        a:1
      },
    });
    console.log(vm)
  </script>
</html>

6. 数据代理

6.1 回顾Object.defineProperty方法

笔记

Object.defineproperty

  • 作用：直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。
  • Object.defineproperty方法需要传递3个参数,Object.defineproperty（obj, prop, desc ）
  • obj：需要定义属性的当前对象
  • prop：当前需要定义的属性名
  • desc：描述符 一般是一个对象

enumerable

  • 控制属性是否可以枚举,默认值是false,默认情况下无法被枚举.

writable

  • 控制属性是否可以被修改,默认值是false

configurable

  • 控制属性是否可以被删除,默认值是false
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let number = 18
        let person = {
            name:'max',
            sex :'男',
        }
        Object.defineProperty(person,'age',{
            // value:18,
            // enumerable:true,//控制属性是否可以枚举,默认值是false,默认情况下无法被枚举.
            // writable:true,//控制属性是否可以被修改,默认值是false
            // configurable:true,//控制属性是否可以被删除,默认值是false
            
            //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
            get(){
                console.log('有人读取age属性了')
                return number
            },

            //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
            set(value){
                console.log('有人修改了age属性,且值是',value)
                number = value
            }
        })

        console.log(Object.keys(person))



        console.log(person)
    </script>
</body>
</html>

6.2 何为数据代理

笔记

数据代理

  • 通过一个对象代理对另一个对象中属性的操作(读/写)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>何为数据代理</title>
</head>
<body>
    <!-- 数据代理:通过一个对象代理对另一个对象中属性的操作(读/写) -->
     <script type="text/javascript">
        let obj = {x:100}
        let obj2 = {y:200}

        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x
            },
            set(value){
                obj.x = value
            }
        })
     </script>
</body>
</html>

6.3 Vue中的数据代理

笔记

Vue中的数据代理:

  • 通过vm对象来代理data对象中属性的操作(读/写)。

Vue中数据代理的好处:

  • 更加方便的操作data中的数据。

基本原理:

  • 通过Object.defineProperty()把data对象中所有属性添加到vm上；
  • 为每一个添加到vm上的属性,都指定一个getter/setter；
  • 在getter/setter内部去操作(读/写)data中对应的属性。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue中的数据代理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
      <div id="root">
      <h2>学校名称:{{name}}</h2>
      <h2>学校地址:{{address}}</h2>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时生成生成提示。
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'max',
        address: '普宁',
      },
    });
  </script>
</html>

7. 事件处理

7.1 事件的基本使用

笔记

事件的基本使用:

  1. 使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
  2. 事件的回调需要配置在methods对象中,最终会在vm上;
  3. methods中配置的函数,==不要用箭头函数!==否则this就不是vm了;
  4. methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;
  5. @click=“demo” 和 @click=“demo($event)” 效果一致,但后者可以传参;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件的基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
      <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <!-- <button v-on:click="showInfo">点我提示信息</button> -->
      <button @click="showInfo1">点我提示信息1(不传参)</button>
      <button v-on:click="showInfo2($event,66)">点我提示信息2(传参)</button>
      
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时生成生成提示。
    const vm = new Vue({
      el: '#root',
      data: {
        name: 'max',
      },
      methods:{
        showInfo(event){
            // console.log(event.target.innerText)
            // console.log(this === vm)//此处的this是vm
            // alert('同学你好')
        },
        showInfo1(event){
            // console.log(event.target.innerText)
            // console.log(this === vm)//此处的this是vm
            alert('同学你好!')
        },
        showInfo2(event,number){
            console.log(number)
            // console.log(event.target.innerText)
            // console.log(this === vm)//此处的this是vm
            alert('同学你好!!')
        }
      }
    });
  </script>
</html>

7.2 事件修饰符

笔记

Vue中的事件修饰符：

  1. prevent:阻止默认事件（常用）；
  2. stop：阻止事件冒泡（常用）；
  3. once：事件只触发一次（常用）；
  4. capture：使用事件的捕获模式；
  5. self：只有event.target是当前操作的元素是才触发事件；
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

注意事项：

  • scroll事件：当页面或元素的滚动条发生滚动时，无论是通过拖拽、键盘操作还是鼠标滚轮滚动触发的，只要滚动条有移动，scroll事件就会被触发。
  • wheel事件：这个事件是与鼠标滚轮操作直接相关联的，即使滚动条已经滚动到了尽头，继续操作鼠标滚轮仍然会触发wheel事件。
  • 冒泡事件：事件从子级向父级传递。
  • 捕获事件：事件从父级传递向子级。
  • 捕获模式：是一种在事件到达最内层目标元素之前，从最外层元素开始向内传播的过程中识别并处理事件的方式。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件修饰符</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
        .box1{
            padding: 5px;
            background-color: skyblue;
        }
        .box2{
            padding: 5px;
            background-color: orange;
        }
        .list{
            width:200px ;
            height: 200px;
            background-color: peru;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      
      <!-- 阻止默认事件（常用） -->
      <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
      
      <!-- 阻止事件冒泡（常用） -->
       <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
            <!-- 修饰符可以连续写 -->
            <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
       </div>
       
       <!-- 事件只触发一次（常用） -->
       <button @click.stop="showInfo">点我提示信息</button>
       
       <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- 只有event.target是当前操作的元素是才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
       </div>

       <!--事件的默认行为立即执行，无需等待事件回调执行完毕  -->
       <ul @scroll.passive="demo" class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
       </ul>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时生成生成提示。
    new Vue({
      el: '#root',
      data: {
        name: 'max',
      },
      methods: {
        showInfo(e){
            alert('同学你好！')
            // console.log(e.target)
        },
        showMsg(msg){
            console.log(msg)
        },
        demo(){
            for (let i = 0; i < 100000; i++) {
                console.log('#')              
            }
            console.log('累坏了')
        }
      },
    });
  </script>
</html>

7.3 键盘事件

笔记

  1. Vue中常用的按键别名：
  • 回车 => enter
  • 删除 => delete (捕获“删除”和“退格”键)
  • 退出 => esc
  • 空格 => space
  • 换行 => tab(特殊，必须配合keydown去使用)
  • 上 => up
  • 下 => down
  • 左 => left
  • 右 => right
  1. Vue未提供别名的按键，可以使用按键原始的key值取绑定，但注意要转为kebab-case（短横线命名）
  2. 系统修饰键（用法特殊）：ctrl、alt、shift、meta（window键）
    （1）.配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
    （2）.配合keydown使用：正常触发事件。
  3. 也可以使用keyCode取指定具体的按键（不推荐）
  4. Vue.config.keyCodes.自定义键名 = 键码 可以去定制按键别名
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>键盘事件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h2>欢迎来到{{name}}学习</h2>
      <input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo"/>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时生成生成提示。
    Vue.config.keyCodes.huiche = 13
    new Vue({
      el: '#root',
      data: {
        name: 'max',
      },
      methods: {
        showInfo(e){
            // console.log(e.key,e.keyCode)
            console.log(e.target.value)
        }
      },
    });
  </script>
</html>

8. 计算属性

8.1 姓名案例_插值语法实现

笔记 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>姓名案例_插值语法实现</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      姓：<input type="text" v-model="firstName" /><br /><br />
      名：<input type="text" v-model="lastName" /><br /><br />
      全名：<span>{{firstName}}-{{lastName}}</span>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时生成生成提示。
    new Vue({
      el: '#root',
      data: {
        firstName: '张',
        lastName: '三',
      },
    });
  </script>
</html>

8.2 姓名案例_methods实现

笔记 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>姓名案例_methods实现</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      姓：<input type="text" v-model="firstName"><br /><br />
      名：<input type="text" v-model="lastName"><br /><br />
      全名：<span>{{fullName()}}</span>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时生成生成提示。
    new Vue({
      el: "#root",
      data: {
        firstName:'张',
        lastName:'三',
      },
      methods: {
        fullName(){
            console.log('@---fullName')
            return this.firstName + '-' + this.lastName
        }
      },
    });
  </script>
</html>

8.3 姓名案例_计算属性实现

笔记

计算属性：

  1. 定义：要用的属性不存在，要通过已有属性计算得来。
  2. 原理：底层借助了Object.defineproperty方法提供的getter和setter。
  3. get函数什么时候执行？
    （1）.初次读取时会执行一次。
    （2）.当依赖的数据发生改变时会被再次调用。
  4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
  5. 备注：
    1.计算属性最终会出现在vm上，直接读取使用即可。
    2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>姓名案例_计算属性实现</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      姓：<input type="text" v-model="firstName"><br /><br />
      名：<input type="text" v-model="lastName"><br /><br />
      全名：<span>{{fullName}}</span>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时生成生成提示。
    const vm = new Vue({
      el: '#root',
      data: {
        firstName:'张',
        lastName:'三',
      },
      computed:{
        fullName:{
          //get有什么作用？当有人读取fullName时，get就会被调用。且返回值就作为fullName的值
          //get什么时候调用？1。初次读取fullName时。2.所依赖的数据发生变化时。
          get(){
              console.log('get被调用了')
              // console.log(this)//此处的this是vm
              return this.firstName + '-' + this.lastName
          },
          //get什么时候调用？当fullName被修改时。
          set(value){
            console.log('set',value)
            const arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
          }
        }
      }
    });
  </script>
</html>

8.4 姓名案例_计算属性实现简写

笔记 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>姓名案例_计算属性简写</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      姓：<input type="text" v-model="firstName"><br /><br />
      名：<input type="text" v-model="lastName"><br /><br />
      全名：<span>{{fullName}}</span>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时生成生成提示。
    const vm = new Vue({
      el: '#root',
      data: {
        firstName:'张',
        lastName:'三',
      },
      computed:{
        //完整写法
        // fullName:{
        //   get(){
        //       console.log('get被调用了')
        //       // console.log(this)//此处的this是vm
        //       return this.firstName + '-' + this.lastName
        //   },
        //   set(value){
        //     console.log('set',value)
        //     const arr = value.split('-')
        //     this.firstName = arr[0]
        //     this.lastName = arr[1]
        //   }
        // }
        //简写
        fullName(){
          console.log('get被调用了')
          return thiss.firstName + '-' + this.lastName
        },
      }
    });
  </script>
</html>

9. 监视属性

9.1 天气案例

笔记 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
        <!-- <button @click = "isHot = !isHot">切换天气</button> -->
        <button @click = "changeWeather">切换天气</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生成提示。

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

9.2 天气案例_监视属性

笔记

监视属性watch：

  1. 当被监视的属性变化时，回调函数自动调用，进行相关操作
  2. 监视的属性必须存在，才能进行监视！！
  3. 监视的两种写法：
    （1）.new Vue时传入 watch配置
    （2）.通过 vm.$watch 监视
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例_监视属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
        <!-- <button @click = "isHot = !isHot">切换天气</button> -->
        <button @click = "changeWeather">切换天气</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生成提示。

    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true,
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            isHot:{
                immediate:true,//初始化时让handler调用一下
                //handler什么时候调用？当isHot发生改变时。
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            }
        }
    })

    vm.$watch('isHot',{
        immediate:true,//初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时。
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        }
    })
</script>
</html>

9.3 天气案例_深度监视

笔记

深度监视：
（1）.Vue中的watch默认不监测对象内部值得改变（一层）
（2）.配置 deep:true 可以监测对象内部值改变（多层）
备注：
（1）.Vue自身可以监测对象内部值得改变，但Vue提供得watch默认不可以！
（2）.使用watch时根据数据的具体结构，决定是否采用深度监视。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例_深度监视</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
        <!-- <button @click = "isHot = !isHot">切换天气</button> -->
        <button @click = "changeWeather">切换天气</button>
        <hr/>
        <h3>a的值是：{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值是：{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>        
        <button @click="numbers = {a:666,b:888}">彻底替换点numbers</button>
        {{numbers.c.d.e}}
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生成提示。

    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true,
            numbers:{
                a:1,
                b:1,
                c:{
                    d:{
                        e:100
                    }
                }
            }
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            isHot:{
                //immediate:true,//初始化时让handler调用一下
                //handler什么时候调用？当isHot发生改变时。
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            },
            //监视多级结构中某个属性的变化
            'numbers.a':{
                handler(){
                    console.log('a被改变了')
                }
            },
            numbers:{
                deep:true,
                handler(){
                    console.log('numbers改变了')
                }
            }
        }
    })


</script>
</html>

9.4 天气案例_深度监视_简写

笔记 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例_监视属性_简写</title>
    <script type="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在启动时生成生成提示。

    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true,
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            //正常写法
            /*isHot:{
                //immediate:true,//初始化时让handler调用一下
                //deep:true,//深度监视
                //handler什么时候调用？当isHot发生改变时。
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            },*/
            //简写
            isHot(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue)
            }
        }
    })
        //正常写法
        vm.$watch('isHot',{//immediate:true,//初始化时让handler调用一下
                //deep:true,//深度监视
                //handler什么时候调用？当isHot发生改变时。
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }})
        //简写
        vm.$watch('isHot',function(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        })
</script>
</html>

9.5 姓名案例_watch实现

笔记

computed 和 watch 之间的区别：

  1. computed能完成的功能，watch都可以完成
  2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

  1. 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是 vm 或 组件实例对象。
  2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，这样this的指向才是 vm 或 组件实例对象。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>姓名案例_watch实现</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      姓：<input type="text" v-model="firstName"><br /><br />
      名：<input type="text" v-model="lastName"><br /><br />
      全名：<span>{{fullName}}</span>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时生成生成提示。
    const vm = new Vue({
      el: '#root',
      data: {
        firstName:'张',
        lastName:'三',
        fullName:'张-三'
      },
      watch:{
        firstName(val){
          this.fullName = val + '-' + this.lastName
        },
        lastName(val){
          this.fullName = this.firstName + '-' + val
        }
      }
      
    });
  </script>
</html>

10 绑定样式

笔记

绑定样式：

  1. class样式
    写法:class=“xxx” xxx可以是字符串、对象、数组。
    字符串写法适用于：类名不确定，要动态获取。
    数组写法适用于：要绑定多个样式，个数不确定，名字也不确定。
    对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
  2. style样式
    :style="{fontSize:xxx}“其中xxx是动态值。
    :style=”[a,b]"其中 a、b是样式对象。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绑定样式</title>
    <style>
        .basic{
            width:400px;
            height: 100px;
            border: 1px solid black;
        }
        .happy{
            border: 4px solid red;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border: 4px dashed rgb(2, 197, 2);
            background-color: gray;
        }
        .normal{
            background-color: skyblue;
        }
        .atguigu1{
            background-color: yellowgreen;
        }
        .atguigu2{
            font-size: 30px;
            text-shadow: 2px 2px 10px red;
        }
        .atguigu3{
            border-radius: 20px;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/><br/>

        <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
        <div class="basic" :class="classArr" >{{name}}</div><br/><br/>

        <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
        <div class="basic" :class="classObj" >{{name}}</div><br/><br/>

        <!-- 绑定style样式--对象写法 -->
        <div class="basic" :style="styleObj" >{{name}}</div><br/><br/>
        <!-- 绑定style样式--数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>
  </body>
  <script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生成提示。
    const vm = new Vue({
    el:'#root', 
    data: { 
        name:'max',
        mood:'normal',
        classArr:['atguigu1','aiguigu2','atguigu3'],
        classObj:{
            atguigu1:false,
            atguigu2:false,
            atguigu3:true
        },
        styleObj:{
            fontSize:'40px',
            color:'red',
        },
        styleObj2:{
            backgroundColor:'orange'
        },
        styleArr:[
            {
                fontSize:'40px',
                color:'blue',
            },
            {
                backgroundColor:'gray'
            }
        ]
    },
    methods: {
        changeMood(){
            this.mood = 'happy'
        }
    },
    })
  </script>
</html>

11 条件渲染

笔记

条件渲染：

  1. v-if
    写法：
    （1）.v-if=“表达式”
    （2）.v-else-if=“表达式”
    （3）.v-else=“表达式”
    适用于：切换频率较低的场景。
    特点：不展示的DOM元素直接被移除。
    注意：v-if可以和v-else-if、v-else一起使用和，但要求结构 不能被“打断”（即结构中间不能被插入其他的DOM元素）。
  2. v-show
    写法：v-show=“表达式”
    适用于：切换频率较高的场景。
    特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。
  3. 备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id = "root">
        <h2>当前的n值是{{n}}</h2>
        <button @click = "n++">点我n+1</button>
        <!-- 使用v-show做条件渲染 -->
        <h2 v-show = "false">欢迎来到{{name}}</h2>
        <h2 v-show = "1 === 1">欢迎来到{{name}}</h2>

        <!-- 使用v-if做条件渲染 -->
        <h2 v-if = "false">欢迎来到{{name}}</h2>
        <h2 v-if = "1 === 1">欢迎来到{{name}}</h2>

        <!-- v-else和v-else-if -->
        <div v-if = "n === 1">Angular</div>
        <div v-else-if = "n === 2">React</div>
        <div v-else-if = "n === 2">Vue</div>
        <div v-else>哈哈</div>

        <template v-if = "n === 1">
            <h2>你好</h2>
            <h2>max</h2>
            <h2>广东揭阳</h2>
        </template>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
    el:'#root', 
    data: { 
    name:'max',
    n:0
    }
    })
</script>
</html>

12 列表渲染

12.1 基本渲染

笔记

v-for指令

  1. 用于展示列表数据
  2. 语法：v-for=“(item,index) in xxx” :key=“yyy”
  3. 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本列表</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p,index) of persons" :key="index">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(char,index) of str" :key="index">
                {{char}}-{{index}}
            </li>
        </ul>
        <!-- 遍历字符串 -->
        <h2>测试遍历字符串</h2>
        <ul>
            <li v-for="(value,k) of car" :key="k">
                {{k}}-{{value}}
            </li>
        </ul>
        <!-- 遍历指定次数 -->
        <h2>测试遍历指定次数</h2>
        <ul>
            <li v-for="(number,index) of 5" :key="index">
                {{index}}-{{number}}
            </li>
        </ul>        
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
    el:'#root', 
    data: { 
        persons:[
            {id:'001',name:'张三',age:18},
            {id:'002',name:'李四',age:19},
            {id:'003',name:'王五',age:20},
        ],
        car:{
            name:'奥迪A8',
            price:'70万',
            color:'黑色'
        },
        str:'hello',
    }
    })
</script>
</html>

12.2 key的原理

笔记

面试题：vue中的key有什么作用？（key的内部原理）

  1. 虚拟DOM中key的作用：
    key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，
    随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
  2. 对比规则：
    （1）.旧虚拟DOM中找到了与新虚拟DOM相同的key：
       1.若虚拟DOM中内容没变，直接使用之前的真实DOM！
       2.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
    （2）旧虚拟DOM中未找到与新虚拟DOM相同的key:
       创建新的真实DOM，随后渲染到页面。
  3. 用index作为key可能会引发的问题：
    1.若对数据进行：逆序添加、逆序删除等破坏顺序操作：
       会产生没有必要的真实DOM更新 =>界面效果没问题，但效率低。
    2.如果结构中还包含输入类的DOM：
       会产生错误DOM更新 =>界面有问题。
  4. 开发中如何选择key？
    1.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
    2.如果不存在对数据的逆序天价1、逆序删除等破环顺序操作，仅用于渲染列表用于展示，
    使用index作为key是没有问题的。

index作为keyindex作为key>id作为keyid作为key
当不声明key值，Vue默认key为index。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>key的原理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表（遍历数组）</h2>
        <button @click="add">添加一个老刘</button>
        <ul>
            <li v-for="(p,index) of persons" :key="index">
                {{p.name}}-{{p.age}}
                <input type="text">
            </li>
        </ul>  
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
    el:'#root', 
    data: { 
        persons:[
            {id:'001',name:'张三',age:18},
            {id:'002',name:'李四',age:19},
            {id:'003',name:'王五',age:20},
        ],
    },
    methods: {
        add(){
            const p ={id:'004',name:'老刘',age:'40'}
            this.persons.unshift(p)
        }
    },
    })
</script>
</html>

12.3 列表过滤

笔记 

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表过滤</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord" />
        <ul>
            <li v-for="(p,index) of filPersons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    //用watch实现
    //#region
    // new Vue({
    //     el: "#root",
    //     data: {
    //         keyWord: "",
    //         persons: [{
    //                 id: "001",
    //                 name: "马冬梅",
    //                 age: 19,
    //                 sex: "女"
    //             },
    //             {
    //                 id: "002",
    //                 name: "周冬雨",
    //                 age: 20,
    //                 sex: "女"
    //             },
    //             {
    //                 id: "003",
    //                 name: "周杰伦",
    //                 age: 21,
    //                 sex: "男"
    //             },
    //             {
    //                 id: "004",
    //                 name: "温兆伦",
    //                 age: 22,
    //                 sex: "男"
    //             },
    //         ],
    //         filePersons: [],
    //     },
    //     watch: {
    //         keyWord: {
    //             immediate: true,
    //             handler(val) {
    //                 this.filPersons = this.persons.filter((p) => {
    //                     return p.name.indexOf(val) !== -1;
    //                 });
    //             },
    //         },
    //     },
    // });
    //#endregion

    //用computed实现
    new Vue({
        el: "#root",
        data: {
            keyWord: "",
            persons: [{
                    id: "001",
                    name: "马冬梅",
                    age: 19,
                    sex: "女"
                },
                {
                    id: "002",
                    name: "周冬雨",
                    age: 20,
                    sex: "女"
                },
                {
                    id: "003",
                    name: "周杰伦",
                    age: 21,
                    sex: "男"
                },
                {
                    id: "004",
                    name: "温兆伦",
                    age: 22,
                    sex: "男"
                },
            ],
        },
        computed:{
            filPersons(){
                return this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord) !== -1
                })
            }
        }
    });
</script>

</html>

12.4 列表排序

笔记 

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表排序</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord" />
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(p,index) of filPersons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el: "#root",
        data: {
            keyWord: "",
            sortType:0, // 0 原顺序 1 降序 2 升序
            persons: [{
                    id: "001",
                    name: "马冬梅",
                    age: 30,
                    sex: "女"
                },
                {
                    id: "002",
                    name: "周冬雨",
                    age: 31,
                    sex: "女"
                },
                {
                    id: "003",
                    name: "周杰伦",
                    age: 18,
                    sex: "男"
                },
                {
                    id: "004",
                    name: "温兆伦",
                    age: 19,
                    sex: "男"
                },
            ],
        },
        computed:{
            filPersons(){
                const arr =  this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord) !== -1
                })

                //判断一下是否需要排序
                if(this.sortType){
                    arr.sort((p1,p2)=>{
                        return this.sortType === 1 ? p2.age - p1.age : p1.age-p2.age
                    })
                }
                return arr
            }
        }
    });
</script>

</html>

12.5 更新时的一个问题

笔记 

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>更新时的一个问题</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>人员列表</h2>
        <button @click="updateMei">更新马冬梅的信息</button>
        <ul>
            <li v-for="(p,index) of persons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#root",
        data: {
            persons: [{
                    id: "001",
                    name: "马冬梅",
                    age: 30,
                    sex: "女"
                },
                {
                    id: "002",
                    name: "周冬雨",
                    age: 31,
                    sex: "女"
                },
                {
                    id: "003",
                    name: "周杰伦",
                    age: 18,
                    sex: "男"
                },
                {
                    id: "004",
                    name: "温兆伦",
                    age: 19,
                    sex: "男"
                },
            ],
        },
        methods: {
            updateMei(){
                // this.persons[0].name = '马老师'//奏效 
                // this.persons[0].age = 50//奏效
                // this.persons[0] = {id :'001',name :'马老师',age:50,sex:'男'}//不奏效
                this.persons.splice(0,1,{id :'001',name :'马老师',age:50,sex:'男'})
            }
        },
    });
</script>

</html>

12.6 Vue监测数据改变的原理

笔记 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue监测数据改变的原理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
    el:'#root', 
    data: { 
    name:'max',
    address:'广东揭阳',
    student:{
        name:'tom',
        age:{
            rAge:40,
            sAge:29
        },
        friends:[
            {name:'jerry',age:35}
        ]
    }
    }
    })
</script>
</html>

12.7 模拟一个数据监测

笔记 

<!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>
    <script type="text/javascript">
        let data = {
            name:'max',
            address:'广东揭阳'
        }

        //创建一个监视的实例对象，用于监视data中属性的变化
        const obs = new Observer(data)
        console.log(obs)

        //准备一个vm实例对象
        let vm = {}
        vm._data = data = obs

        function Observer(obj){
            //汇总对象中所有的属性形成一个数组
            const keys = Object.keys(obj)
            //遍历
            keys.forEach((k)=>{
                Object.defineProperty(this,k,{
                    get(){
                        return obj[k]
                    },
                    set(val){
                        console.log(`${k}被改了，我要去解析模板了，生成虚拟DOM……我要开始忙了`)
                        obj[k] = val
                    }
                })
            })
        }
    </script>
</body>
</html>

12.8 Vue.set的使用

笔记 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.set的使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>学校名称：{{school.name}}</h2>
        <h2>学校地址：{{school.address}}</h2>
        <h2>校长：{{school.leader}}</h2>
        <hr/>
        <h1>学生信息</h1>
        <button @click="addSex">添加一个性别属性，默认值时男</button>
        <h2>姓名：{{student.name}}</h2>
        <h2>性别：{{student.sex}}</h2>
        <h2>年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
    el:'#root', 
    data: { 
        school:{
            name:'max',
            address:'广东揭阳',
            leader:'max',
        },
        student:{
            name:'tom',
            age:{
                rAge:40,
                sAge:29,
            },
            friends:[
                {name:'jerry',age:35},
                {name:'tony',age:36}
            ]
        }
    },
    methods: {
        addSex(){
            // Vue.set(this.student,'sex','男')
            this.$set(this.student,'sex','男')
        }
    },
    })
</script>
</html>

12.9 Vue监测数据改变的原理_数组

笔记 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue监测数据改变的原理_数组</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>学校名称：{{school.name}}</h2>
        <h2>学校地址：{{school.address}}</h2>
        <h2>校长：{{school.leader}}</h2>
        <hr/>
        <h1>学生信息</h1>
        <button @click="addSex">添加一个性别属性，默认值时男</button>
        <h2>姓名：{{student.name}}</h2>
        <h2>性别：{{student.sex}}</h2>
        <h2>年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
    el:'#root', 
    data: { 
        school:{
            name:'max',
            address:'广东揭阳',
            leader:'max',
        },
        student:{
            name:'tom',
            age:{
                rAge:40,
                sAge:29,
            },
            hobby:['抽烟','喝酒','烫头'],
            friends:[
                {name:'jerry',age:35},
                {name:'tony',age:36}
            ]
        }
    },
    methods: {
        addSex(){
            // Vue.set(this.student,'sex','男')
            this.$set(this.student,'sex','男')
        }
    },
    })
</script>
</html>

12.10 总结Vue数据监测

笔记

Vue监视数据的原理：

  1. vue会监视data中所有层次的数据。
  2. 如何监测对象中的数据？
    通过setter实现监视，且要在new Vue时就传入要监测的数据。
    （1）.对象中后追加的属性，Vue默认不做响应式处理
    （2）.如需给后添加的属性左响应式，请使用如下API：
        Vue.set(target,propertyName/index,value) 或
        vm.$set(target,propertyName/index,value)
  3. 如何监测数组中的数据？
    通过包裹数组更新元素的方法实现，本质就是做了两件事：
    （1）.调用原生对应的方法对数组进行更新。
    （2）.重新解析模板，进而更新页面。
  4. 在Vue修改数组中的某个元素一定要用如下方法：
    1.使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    2. Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象（如vm._data） 添加属性！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>总结Vue数据监测</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄+1岁</button><br/><br/>
        <button @click="addSex">添加性别属性，默认值时男</button><br/><br/>
        <button @click="student.sex = '未知'">修改性别</button><br/><br/>
        <button @click="addFriend">在列表首位添加一个朋友</button><br/><br/>
        <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br/><br/>
        <button @click="addHobby">添加一个爱好</button><br/><br/>
        <button @click="updateHobby">修改第一个爱好为：开车</button><br/><br/>
        <button @click="removeSmoke">过滤爱好中的抽烟</button><br/><br/>
        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友们：</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            student:{
                name:'tom',
                age:18,
                hobby:['抽烟','喝酒','烫头'],
                friends:[
                    {name:'jerry',age:35},
                    {name:'tony',age:36}
                ]
            }
        },
        methods: {
            addSex(){
                // Vue.set(this.student,'sex','男')
                this.$set(this.student,'sex','男')
            },
            addFriend(){
                this.student.friends.unshift({name:'jack',age:70})
            },
            updateFirstFriendName(){
                this.student.friends[0].name='张三'
            },
            addHobby(){
                this.student.hobby.push('学习')
            },
            updateHobby(){
                // this.student.hobby.splice(0,1,'开车')
                // Vue.set(this.student.hobby,0,'开车')
                this.$set(this.student.hobby,0,'开车')
            },
            removeSmoke(){
                this.student.hobby = this.student.hobby.filter((h)=>{
                    return h !== '抽烟'
                })
            }
        },
    })
</script>
</html>

13. 收集表单数据

笔记

收集表单数据：
   若：<input type=“text”/> ，则v-model收集的是value值，用户输入的就是value值。
   若：<input type=“radio”/>，则v-model收集的是value值，且要给标签配置value值。
   若：<input type=“checkbox”/>,
      1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
      2.配置input的value属性：
         （1）v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
         （2）v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
      lazy：失去焦点再收集数据
       number：输入字符串转为有效的数字
      trim：输入首尾空格过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表单数据</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model.trim="userInfo.account"><br/><br/>
            密码：<input type="password" v-model="userInfo.password"><br/><br/>
            年龄：<input type="number" v-model.number="userInfo.age"><br/><br/>
            性别：
            男<input type="radio" name="sex" v-model="userInfo.hobby" value="male">
            女<input type="radio" name="sex" v-model="userInfo.hobby" value="female"><br/><br/>
            爱好：
            学习<input type="checkbox" v-model="userInfo.hobby" value="study">
            打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
            吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
            <br/><br/>
            所属校区
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select>
            <br/><br/>
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea><br/><br/>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:'#root', 
        data: { 
            userInfo:{
                account:'',
                password:'',
                age:18,
                sex:'female',
                hobby:[],
                city:'beijing',
                other:'',
                agree:''
            },
        methods:{
            demo(){
                console.log(JSON.stringify(this.userInfo))
            }
        }
    }
    })
</script>
</html>

14. 过滤器

笔记

过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：

  1. 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
  2. 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

  1. 过滤器也可以接受额外参数、多个过滤器也可以串联
  2. 并没有改变原本的数据，是产生新的对应的数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>

</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h3>现在是：{{fmtTime}}</h3>
        <!-- methods实现 -->
        <h3>现在是：{{getFmtTime()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是：{{time | timeFormater}}</h3>

        <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
        <h3 :x="msg | mySlice">max</h3>
    </div>

    <div id="root2">
        <h2>{{msg | mySlice}}</h2>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })

    new Vue({
        el:'#root', 
        data: { 
            time:1621561377603, //时间戳
            msg:'你好，max'
        },
        computed:{
            fmtTime(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            getFmtTime(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        //局部过滤器
        filters:{
            timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
                // console.log('@',value)
                return dayjs(value).format(str)
            },
            // mySlice(value){
            //     return value.slice(0,4)
            // }
        }
    })

    new Vue({
        el:'#root2', 
        data: { 
            msg:'hello'
        }
    })
</script>
</html>

15. 内置指令

15.1 v-text_指令

笔记

我们学过的指令：

  • v-bind ： 单向绑定解析表达式，可简写为 :xxx
  • v-model ： 双向数据绑定
  • v-for ： 遍历数组/对象/字符串
  • v-on ： 绑定事件监听，可简写为@
  • v-if ： 条件渲染（动态控制节点是否存在）
  • v-else ： 条件渲染（动态控制节点是否存在）
  • v-show ： 条件渲染（动态控制节点是否展示）

v-text 指令：

  1. 作用：向其所在的节点中渲染文本内容。
  2. 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text_指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-text="name"></div>
        <div v-text="str"></div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示    
    new Vue({
        el:'#root', 
        data: { 
            name:'max',
            str:'<h3>你好啊！</h3>'
        }
    })
</script>
</html>

15.2 v-html_指令

笔记

v-html指令：

  1. 作用：向指定节点中渲染包含html结构的内容。
  2. 与插值语法的区别：
    （1）.v-html会替换掉节点中所有的内容，{{xx}}则不会。
    （2）.v-html可以识别html结构。
  3. 严重注意：v-html有安全性问题！！！
    （1）.在网络上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
    （2）.一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！cookie简略图示
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html_指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <div>你好，{{name}}</div>
        <div v-html="str"></div>
        <div v-html="str2"></div>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示    
    new Vue({
        el:'#root', 
        data: { 
            name:'max',
            str:'<h3>你好啊！</h3>',
            str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！<a/>'
        }
    })
</script>
</html>

15.3 v-cloak_指令

笔记

v-cloak指令（没有值）：

  1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
  2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-cloak_指令</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-cloak>{{name}}</h2>
    </div>
    <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
</body>
<script type="text/javascript">
    console.log(1)
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示    

    new Vue({
        el:'#root', 
        data: { 
            name:'max',
        }
    })
</script>
</html>

15.4 v-once_指令

笔记

v-once指令：

  1. v-once所在节点在初次动态渲染后，就视为静态内容了。
  2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-once指令</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
 <!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-once>初始化的n值是：{{n}}</h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
    
    new Vue({
        el:'#root', 
        data: { 
            n:1
        }
    })
</script>
</html>

15.4 v-pre_指令

笔记

v-pre指令：

  1. 跳过其所在节点的编译过程。
  2. 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-pre指令</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-pre>Vue其实很简单</h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
    
    new Vue({
        el:'#root', 
        data: { 
            n:1
        }
    })
</script>
</html>

16. 自定义指令

16.1 自定义指令

笔记

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

自定义指令总结：
    一、定义语法：
        （1）.局部指令：
new Vue({                        new Vue({
    directives:{指令名:配置对象}     或     directives(){}
})                              })
        （2）.全局指令：
Vue.directive(指令名，配置对象) 或 Vue.directive(指令名，回调函数)
    二、配置对象中常用的3个问题：
        （1）. bind：指令与元素成功绑定时调用。
        （2）. inserted：指令所在元素被插入页面时调用。
        （3）. update：指令所在模板结构被重新解析时调用。
    三、备注：
        1.指令定义时不加v-，但使用时要加v-；
        2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>{{name}}</h2>
        <h2>当前的n值是:<span v-text="n"></span></h2>
        <!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span></h2> -->
        <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <hr/>
        <input type="text" v-fbind:value="n">
    </div>

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

    //定义全局指令
    Vue.directive('fbind',{
                //指令与元素成功绑定时（一上来）
                bind(element,binding){
                    element.value = binding.value * 20
                },
                //指令所在元素被插入页面时
                inserted(element,binding){
                    element.focus()
                },
                //指令所在的模板被重新解析时
                update(element,binding){
                    element.value = binding.value *20
                },
            })

        // Vue.directive('big',function(element,binding){
        //         console.log('big',this)//注意此处的this是window
        //         // console.log('big')
        //         element.innerText = binding.value * 10 
        // })

    new Vue({
        el:'#root', 
        data: { 
            name:'max',
            n:1
        },
        directives:{
            //big函数何时会被调用？1。指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
            // 'big-number'(element,binding){
            //     console.log('big')
            //     element.innerText = binding.value * 10 
            // },
            big(element,binding){
                console.log('big',this)//注意此处的this是window
                // console.log('big')
                element.innerText = binding.value * 10 
            },
            // fbind:{
            //     //指令与元素成功绑定时（一上来）
            //     bind(element,binding){
            //         element.value = binding.value * 20
            //     },
            //     //指令所在元素被插入页面时
            //     inserted(element,binding){
            //         element.focus()
            //     },
            //     //指令所在的模板被重新解析时
            //     update(element,binding){
            //         element.value = binding.value *20
            //     },
            // }
        }
    })
</script>
</html>

16.2 回顾一个DOM操作

笔记 

<!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>
        .demo{
            background-color: orange;
        }
    </style>
</head>
<body>
    <button id="btn">点我创建一个输入框</button>
    <script type="text/javascript">
        const btn = document.getElementById('btn')
        btn.onclick = ()=>{
            const input = document.createElement('input')

            input.className = 'demo'
            input.value = 99
            input.onclick = ()=>{alert(1)}

            document.body.appendChild(input)

            input.focus
            input.parentElement.style.backgroundColor = 'skyblue'
            console.log(input.parentElement)
        }
</script>
</body>
</html>

17. 生命周期

17.1 引出生命周期

笔记

生命周期：

  1. 又名：生命周期回调函数、生命周期函数、生命周期钩子。
  2. 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
  3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
  4. 生命周期函数中的this指向是vm 或 组件实例对象。

Vue2生命周期图示
Vue2生命周期图示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引出生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-if="a">你好啊</h2>
        <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
    
    new Vue({
        el:'#root', 
        data: { 
            a:false,
            opacity:1
        },
        methods: {
            
        },
        //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
        mounted(){
            console.log('mounted',this)
            setInterval(()=>{
                this.opacity -= 0.01
                if(this.opacity <=0) this.opacity = 1
            },16)
        }
    })
</script>
</html>

17.2 分析生命周期

笔记 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分析生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-text="n"></h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
    
    new Vue({
        el:'#root', 
        // template:`
        // <div id="root">
        //     <h2>当前的n值是：{{n}}</h2>
        //     <button @click="add">点我n+1</button>
        // </div>
        // `,
        data: { 
            n:1
        },
        methods: {
            add(){
                console.log('add')
                this.n++;
            },
            bye(){
                console.log('bye')
                this.$destroy()
            }
        },
        beforeCreate() {
            console.log('beforeCreate')
        },
        created() {
            console.log('created')
        },
        mounted() {
            console.log('mounted')
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
    })
</script>
</html>

17.3 总结生命周期

笔记

常用的生命周期钩子：

  1. mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
  2. beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

  1. 销毁后借助Vue开发者工具看不到任何信息。
  2. 销毁后自定义事件会失效，但原生DOM事件依然有效。
  3. 一般不会再beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>总结生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        <button @click="opacity = 1">透明度设置为1</button>
        <button @click="stop">点我停止变换</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
    
    new Vue({
        el:'#root', 
        data: { 
            opacity:1
        },
        methods: {
            stop(){
                this.$destroy()
            }
        },
        //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
        mounted(){
            console.log('mounted',this)
            this.timer = setInterval(()=>{
                console.log('setInterval')
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16)
        },
        beforeDestroy() {
            clearInterval(this.timer)
            console.log('vm即将驾鹤西游了')
        },
    })
</script>
</html>
  • 本文仅作个人学习笔记使用，无商业用途。
  • 上述内容笔记大部分摘自“B站尚硅谷”
  • 如若转载，请先声明。
普宁Max
关注
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （一）
weixin_44566194的博客
12-08 3362
本文为总结尚硅谷Vue2.0+Vue3.0 的学习笔记系列的第一章——Vue的核心，包含Vue简介、模板语法、数据绑定、MVVM模型、事件处理，计算属性与监视、class与style绑定、列表渲染、过滤器、内置指定和自定义指令以及Vue生命周期等知识点
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （三）
weixin_44566194的博客
12-24 994
本文整理了B站尚硅谷Vue2.0 + Vue3.0 入门到精通教程视频第三章 Vue脚手架的学习内容笔记，包含初始化脚手架、ref与props属性、混入、插件、自定义事件、全局事件总线、消息订阅与发布、过渡与动画以及TodoList案例实操等内容。
Vue快速上手笔记
Zeng的博客
10-03 2024
Vue学习笔记
-VUE-
最新发布
hqHQLwe的博客
02-23 810
渐进式框架：Vue 是渐进式的，意味着你可以根据项目的需求逐步采用 Vue 的不同功能。你可以从一个简单的组件开始，逐渐引入路由、状态管理等功能，而不必一开始就采用整个 Vue 生态系统。这种灵活性使得 Vue 可以方便地集成到现有的项目中。响应式数据绑定：Vue 采用了响应式系统，当数据发生变化时，与之绑定的 DOM 元素会自动更新。通过简单的语法，开发者可以将数据绑定到 DOM 节点上，实现数据与视图的同步。组件化开发：Vue 鼓励使用组件化的方式来构建应用。
Vue2.0+Vue3.0从入门到精通（尚硅谷学习笔记）--Vue2.0
qq_48105178的博客
10-20 2589
尚硅谷Vue2.0学习笔记
vue2.0升级vue3.0
weixin_43822237的博客
01-20 3175
记录一下： Vue2 到 Vue3 升级指南 | GoGoCode
Vue学习（一）
sunny77777777的博客
02-22 271
Vue核心，组件化编程
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （四）
weixin_44566194的博客
12-24 632
本文整理了B站尚硅谷Vue2.0 + Vue3.0 入门到精通教程视频第四章的学习内容的笔记，包括Vue 脚手架配置代理，GitHub 用户搜索案例，vue项目中常用的2个Ajax库，slot插槽等知识。
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （五）
weixin_44566194的博客
01-10 464
本文整理了B站尚硅谷Vue2.0 + Vue3.0 入门到精通教程视频第五章的学习内容的笔记，包括Vuex 核心概念和相应的API、VUex 工作原理、多组件数据共享、模块化+命名空间等知识。
尚硅谷 Vue 2.0 + Vue 3.0 入门到精通教程学习笔记 （二）
weixin_44566194的博客
12-12 423
本文主要记录尚硅谷Vue学习教程笔记的第二章部分——Vue 组件化编程：包括模块与组件、模块化与组件化、非单文件组件和单文件组件的知识。
简单介绍一下vue2.0
weixin_30307267的博客
09-20 321
Vue Vue是用于构建用户界面的渐进框架。作者尤雨熙特别强调它与其他的框架不同，Vue是渐进式的框架，可以逐步采用，不必一下就通过框架去重构项目。 另外Vue的核心库只专注于视图层，这样就更容易与其他库或现有项目进行集成，也更灵活。 Vue在兼容性上不支持IE8以下版本的浏览器，用到了ECMAScript 5的功能，所有支持ECMAScript 5的浏览器都没问题，像这些： ...
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
尚硅谷VUE核心技术课件资料-笔记总结
04-17
尚硅谷VUE核心技术课件资料-笔记总结
尚硅谷Vue笔记
m0_56428225的博客
10-17 4422
vue学习笔记
从vue2.0更新到vue3.0
m0_62226095的博客
02-16 3824
vue3.0重构后台管理系统 从2.0更新到3.0
尚硅谷vue笔记 详细讲解版（尚硅谷 天禹老师）
abjtxf的博客
03-01 9097
详细版的意思就是把老师课上讲的内容都结合自己的思考记录了下来，很适合只会应用而不知原理的同学参考
vue2.0到vue3.0有这一篇就够了
chen12345678y的博客
04-14 1347
vue2.0到vue3.0有这一篇就够了 ####基本框架 <template> <div class=""> </div> </template> <script setup> import {} from 'vue' </script> <style lang="scss" scoped> </style> ####vue3.2版本推出了setup语
Vue2.0项目重构到Vue3.0
h5jqd的博客
02-17 2112
项目重构的解析与理解
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
热门推荐
DingDong的博客
04-26 1万+
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
vue2.0-vue3.0
09-23
Vue2.0和Vue3.0是Vue框架的两个主要版本。Vue2.0是目前使用最广泛的版本，而Vue3.0是在Vue2.0的基础上进行了一些重大改进和优化。Vue3.0引入了一些新的特性和改进，例如使用Proxy替代defineProperty来实现更好的响应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值