VUE学习笔记

司篂篂

已于 2024-02-29 20:59:14 修改

阅读量166

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-01-25 20:15:12 首次发布

本文链接：https://blog.csdn.net/jkjkikik/article/details/128751368

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

vue

01_初识Vue
02_Vue模板语法
03_数据绑定
04_el与data的两种写法
05_MVVM模型 MVVM模型
06_数据代理
07_事件处理
- - 1.事件的基本使用
  - 2.事件修饰符
- 2.1介绍一下事件冒泡
- - 3.键盘事件
08_计算属性
09_监视属性
10_绑定样式
- 10.1绑定class样式
- 10.2绑定style样式
11_条件渲染
- 11.1_vue条件渲染
- 11.2_vue列表渲染
12_key的作用与原理
13_vue监测对象，监测数组改变的原理
13_收集表单数据
14_生命周期

01_初识Vue

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;

 new Vue({
      el: '#root',//el用于指定当前vue实例为哪个容器服务，值通常通常为css选择器字符串。
      data: { name: "kk" }//data中用于储存数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
    })

root容器里的代码依然符合htm1规范，只不过混入了一些特殊的Vue语法;
root容器里的代码被称为[Vue模板];
Vue实例和容器是一一对应的;
真实开发中只有一个Vue实例，并且会配合着组件一起使用;
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性:
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新;
注意区分: js表达式和 js代码(语句)
表达式:一个表达式会产生一个值，可以放在任何一个需要值的地方:
(1)a
(2)a+b
(3)demo(1)
(4)x===y?a:b
2.js代码(语句)
(1)if(){}
(2)for(){}

02_Vue模板语法

Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。

		> v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定.
		原本属性值的双引号内是字符串，用v-bind绑定以后就变成了js表达式。
v-bind可以给标签里面任何一个属性绑定值，v-bind：可以简写为   ：

 <a v-bind:href="url">点我去{{name}}1</a>
    <a :href="url">点我去{{name}}2</a>

03_数据绑定

Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面(在vue调试器中改变数据，界面上的数据也会改变，但是改变界面上的数据，vue调试器里面的不会变)。

2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

1.双向绑定一般都应用在表单类元素上（如：input、select等）就是有value值的元素
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。v-model=“name”
如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上
<h2 v-model:x="name">你好啊</h2>

 <a v-bind:href="url">点我去{{name}}1</a>
    <a :href="url">点我去{{name}}2</a>

数据绑定代码示例

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!-- Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）就是有value值的元素
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。v-model="name" 

			如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 
		 <h2 v-model:x="name">你好啊</h2> 
-->

<body>
  <div id="root">
    <h1>我喜欢{{name}}</h1>
    输入框1: <input type="text" v-bind:value="name">
    <br>
    输入框2: <input type="text" v-model:value="name">
  </div>
  <script type="text/javascript">
    new Vue({
      el: '#root',
      data: { name: "china" }
    })
  </script>
</body>

</html>

04_el与data的两种写法

1.el有2种写法
(1)new Vue时候配置el属性。
(2)先创建Vue实例，随后再通过vue实例.$mount(‘#root’)指定el的值。

const vm=new Vue({
      // el: '#hj',
      data() {
      console.log('@@@', this) //此处的this是Vue实例对象
      return {
        name: '尚硅谷'
      }
    }
    vm.$mount('#hj')

2.data有2种写法
(1)对象式
(2)函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。箭头函数没有自己的this

函数式

data: function () {
        return {
          name: 'hh'
        }
      }
    简写为：
    data() {
      console.log('@@@', this) //此处的this是Vue实例对象
      return {
        name: '尚硅谷'
      }
    }

对象式

 data: { }

05_MVVM模型 MVVM模型

					1. M：模型(Model) ：data中的数据
					2. V：视图(View) ：模板代码(容器)
					3. VM：视图模型(ViewModel)：Vue实例
		观察发现：
					1.data中所有的属性，最后都出现在了vm身上。
					2.vm身上所有的属性 及 Vue原型上所有属性，
					在Vue模板中都可以直接使用。

06_数据代理

1.回顾Object.defineProperty方法

Object.defineproperty方法：

Object.defineproperty 的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
Object.defineproperty可以接收三个参数 Object.defineproperty(obj, prop, desc)
obj : 第一个参数就是要在哪个对象身上添加或者修改属性
prop : 第二个参数就是添加或修改的属性名
desc ：配置项，一般是一个对象

第三个参数里面还有6个配置控住属性
/这六个配置生效的前提是这个属性是通过defineproperty添加的，而不是通过defineproperty修改的属性。

    writable：	是否可重写
 
    value：  	当前值
 
    get：    	 读取时内部调用的函数
 
	set：        写入时内部调用的函数
	
	enumerable： 	是否可以遍历
 
	configurable： 	是否可再次修改配置项

        
  <script type="text/javascript">
    let number = 19
    let person = {
      name: '张三',
      sex: '男',
      // age: number
    }
    // 传三个参数，对象名，属性名，对象
    Object.defineProperty(person, 'age', {
      value: number,//默认这个属性不可以更改，但是上面的两个属性就可以更改
      enumerable: true,
      writable: true,
      configurable: true,
      set(value) {
        console.log("有人想修改age属性")
      }
    })
    for (let key in person) {
      console.log(person[key])//enumerable为false的时候不能遍历到,
    } 
    //for in既能遍历数组，也能遍历对象
    console.log(Object.keys(person))
    //把person对象中所有属性的属性名提取出来做成一个数组，enumerable为false的时候不能提取到
  </script>

2.何为数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）
通过defineproperty用obj1操作obj的属性

 <script type="text/javascript">
    let obj = { x: 100 }
    let obj1 = { y: 200 }
    Object.defineProperty(obj, 'x', {
      get() {
        return obj1.y
      },
      set(value) {
        obj1.y = value
      }

    })
  </script>

3.Vue中的数据代理的应用

1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）【符合defineproperty通过一个对象代理另外一个对象的原则】
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

在这里插入图片描述

07_事件处理

1.事件的基本使用

1.(methods里面的方法不用数据代理，因为没有必要，但是methods配置项里面的方法都在vm身上，只有data里面的数据有数据劫持和数据代理)
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
v-on用法

v-on 指令用于绑定事件监听器，v-on 指令的简写形式为 @event。
v-on 指令可以支持同时写多个事件监听器，多个事件监听器的简写形式为 v-on={@event1:handler1, @event2:handler2}。
v-on 指令支持原生 JavaScript 的所有的事件，并且支持参数传递。

2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>事件的基本使用</title>
  <!-- 引入Vue -->
  <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 @click="showInfo2($event,66)">点我提示信息2（传参）</button>
    <!-- 这里因为加了一个参数，所以就把event挤掉了，需要在绑定时候加一个占位符$event，这样就不会挤掉了 -->
  </div>
</body>

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

  const vm = new Vue({
    el: '#root',
    data: {
      name: '尚硅谷',
    },
    methods: {
      // 参数event是事件对象.target是拿到事件的目标
      //  触发事件的标签元素
      // “event.target 获取的是触发事件的标签元素 event.currentTarget 获取到的是发起事件的标签元素
      showInfo1(event) {
        // console.log(event.target.innerText)
        // console.log(this) //此处的this是vm
        alert('同学你好！')
      },
      showInfo2(event, number) {
        console.log(event, number)
        // console.log(event.target.innerText)
        // console.log(this) //此处的this是vm
        alert('同学你好！！')
      }
    }
  })
</script>

</html>

2.事件修饰符

2.1介绍一下事件冒泡

事件冒泡：
在JavaScript中，事件冒泡是指当一个元素上的事件被触发时，该事件将从最具体的元素开始，然后逐级向上传播到更一般的元素。事件冒泡的条件包括：

嵌套关系：事件冒泡只会在有嵌套关系的元素中发生。也就是说，一个元素嵌套在另一个元素内部，当内部元素上的事件被触发时，外部元素上的相同事件也会被触发。
事件类型：不是所有类型的事件都会冒泡。例如，鼠标滚轮事件（wheel）和输入事件（input）不会冒泡，而点击事件（click）和键盘事件（keydown、keyup等）会冒泡。
事件处理程序：只有当元素上绑定了相应的事件处理程序时，事件才能够冒泡。如果没有为元素的某个事件绑定处理程序，那么该事件就不会冒泡。
需要注意的是，事件冒泡可以被阻止或停止。通过调用事件对象的stopPropagation()方法可以阻止事件继续向上冒泡。此外，可以使用addEventListener()方法的第三个参数来设置事件的捕获阶段（true表示捕获阶段，false表示冒泡阶段）。 -->

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

1,2,3（阻止默认事件，阻止事件冒泡，事件只触发一次）代码展示

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
  .gh {
    background-color: aqua;
    width: 200px;
    height: 100px;
  }
</style>
</head>

<body>
  <div class="gh" @click.once="sf">
    <button @click.stop="sf">点我一下</button>
    <a href="https://www.baidu.com/index.php?tn=46092069_pg" @click.prevent="sf">点击跳转</a>
  </div>

  <script type="text/javascript">
    new Vue({
      el: '.gh',
      data: {},
      methods: {
        sf() {
          alert("nihao")
        }
      },
    })
  </script>
</body>

</html>

capture,使用事件的捕获模式，在事件处理过程中，除了事件冒泡模式，还有事件捕获模式。事件冒泡是从里到外，事件捕获是从外到内，事件执行是在冒泡阶段执行的。

代码演示：

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
<style>

  .box1 {
    width: 300px;
    height: 100px;
    background-color: aquamarine;
  }

  .box2 {
    width: 100px;
    height: 50px;
    background-color: blueviolet;
  }
</style>
</head>

<body>
  <div class="gh">
    <div class="box1" @click.capture="sf(1)">
      <div class="box2" @click="sf(2)">
      </div>
    </div>


  </div>

  <script type="text/javascript">
    new Vue({
      el: '.gh',
      data: {},
      methods: {
        sf(value) {
          // alert("nihao")
          console.log(value)
        }
      },
    })
  </script>
</body>

</html>

这个代码需要注意的是

，scroll事件不会等回调执行完毕再去执行默认行为，而是先去执行默认行为，所以如果事件是scroll的话，则不用passive，但是wheel事件是先执行回调再执行默认事件的，所以需要用到passive。这里说一下，scroll只要是滚动条动了就能触发，而wheel是只要鼠标滚轮动了，不管滚动条动不动都能触发。

事件默认行为立即执行(scroll)：

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
  .gh{
    width: 100px;
    height: 300px;
    background-color: aquamarine;
    overflow: auto;
  }
  .gh li{
    height: 100px;
  }
</style>
</head>

<body>
  <ul class="gh" @scroll="sf">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
  </ul>

  <script type="text/javascript">
    new Vue({
      el: '.gh',
      data: {},
      methods: {
        sf() {
      for(var i=0;i<100;i++){
console.log(i)
      }
        },
      },
    })
  </script>
</body>

</html>

使用passive演示（wheel）

<body>
    <ul class="gh" @wheel.passive="sf">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
  </ul>

  <script type="text/javascript">
    new Vue({
      el: '.gh',
      data: {},
      methods: {
        sf() {
      for(var i=0;i<100;i++){
console.log(i)
      }
        },
      },
    })
  </script>
</body>

3.键盘事件

1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

== 2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名，首字母大写的要变为小写）==

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

一般表单文本框提示信息:placeholder=" ",默认颜色是灰色的
当用户按键时，会首先触发 keydown 事件
用户释放按键时最后触发 keyup 事件

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>键盘事件</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
    <!-- 也可以写成@keydown.编码的形式，只不过这种形式有些浏览器不太适用，所以不推荐使用 -->
  </div>
</body>

<script type="text/javascript">
  // Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

  new Vue({
    el: '#root',
    data: {
      name: '尚硅谷'
    },
    methods: {
      showInfo(e) {
        console.log(e.key, e.keyCode)
        // console.log(e.target.value)
      }
    },
  })
</script>

</html>

08_计算属性

1.姓名案例_插值语法实现（改变姓和名，全名也会随之改变，并且显示在页面上面）

当使用Vue.js 3时，以下是关于计算属性的要点总结：

==定义计算属性：==使用computed函数来定义计算属性，传入一个具有getter和(可选)setter的函数。

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
});

==计算属性的依赖：==计算属性可以依赖于其他数据属性。当被依赖的属性发生变化时，计算属性会自动重新计算其值。

javascript
computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

==计算属性的使用：==在模板中通过插值语法直接引用计算属性即可。无需在计算属性名称后面添加括号进行调用。

html
<p>Full Name: {{ fullName }}</p>

==计算属性的缓存：==计算属性默认具有缓存机制，只有当其依赖的响应式属性发生改变时才会重新运行计算方法。这意味着在多次访问计算属性时，只有在依赖项发生更改时，计算属性才会重新计算其值。

==计算属性的setter：==计算属性还可以提供一个可选的setter函数，用于处理对计算属性进行赋值操作。

avascript
computed: {
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    set(value) {
      const names = value.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    }
  }
}

计算属性还有简写模式，下面代码中含有
总结完毕

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <!-- 表单元素里面用v-model双向绑定，简写形式：和属性名全省掉了 -->
    姓：<input type="text" v-model="z">
    <br>
    名：<input type="text" v-model="s">
    <br>
    全名：{{z.slice(0,3)}}-{{s}}
    <!-- slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。 -->
  </div>

</body>
<script type="text/javascript">
  const vm = new Vue({
    el: '#root',
    data: {
      z: '张',
      s: "三"
    }
  })
</script>

</html>

运行截图：
在这里插入图片描述

2.姓名案例_methods实现

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <!-- 表单元素里面用v-model双向绑定，简写形式：和属性名全省掉了 -->
    姓：<input type="text" v-model="z">
    <br>
    名：<input type="text" v-model="s">
    <br>
    全名：{{forname()}}
    <br>
    全名：{{forname()}}
    <br>
    全名：{{forname()}}

    <!-- slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。 -->
    <!-- 指令语法里面调用函数不要加括号
    插值语法里面调用函数要加括号 -->
    <!-- 只要data里面数据改变，vue一定会重新解析模板，在重新解析模板的时候，只要遇见插值语法里面
    写方法，这个方法一定会重新调用一边，就是只要数据改变，函数就会被调用。 -->
  </div>

</body>
<script type="text/javascript">
  const vm = new Vue({
    el: '#root',
    data: {
      z: '张',
      s: "三"
    },
    methods: {
      forname() {
        console.log('@@')
        return this.z + '-' + this.s
      }
    }
  })
</script>

</html>

3.姓名案例_计算属性实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div class="u">
姓：<input type="text" v-model="x"><br>
名：<input type="text" v-model="m"><br>
全名：{{fullname}}
<!-- 全名：<span>{{fullname}}</span> -->
  </div>                                                                    
  <script type="text/javascript">
 const vm = new Vue({
el:'.u',
data:{
  x:'张',
  m:'伟丽'
},
computed:{
  // vue里面，date中你写什么放在vm身上就是什么。methods里面你写什么也是什么，但是
  // computed里面，它往vm身上放的时候，自动找到get，自动调用get，拿到get的返回值放到vm身上。
  // 放的名字叫做fullname。
  fullname:{
    get(){
      console.log("get被调用了")
      return this.x+''+this.m
    //  get有什么作用？当有人读取fullname时，get就会被调用，且返回值就作为fullname的值
    //  get什么时候被调用？1.初次读取fullname的时候会被调用，以后读取的时候就不会被调用。（他有缓存）2.当被依赖的数据发生变化的时候
    //  （x/m发生变化）会被调用。 
    },
    set(value){
       console.log(value)
       var arr = value.split('-')
       this.x = arr[0]
       this.m =arr[1]
    }
  }
  // 计算属性简写;
  // fullname (){
  //   return this.x+''+this.s
  // }
}
  })
  </script>
  
</body>
</html>

4.姓名案例_计算属性简写

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <!-- 表单元素里面用v-model双向绑定，简写形式：和属性名全省掉了 -->
    姓：<input type="text" v-model="z">
    <br>
    名：<input type="text" v-model="s">
    <br>
    全名：<span>{{fullName}}</span>
    <!--  computed特殊一些，fullName这里为什么不加括号呢，因为他是函数执行过后返回的结果放在了vm里面，所以fullname不是函数 -->
    我们以后在模板里面写代码的时候，我们要注意，我们这个是什么。是data里面配置的数据，还是methods里面配置的方法。
    还是computed里面配置的计算属性。

    全名：<span>{{fullName}}</span>
    全名：<span>{{fullName}}</span>
    全名：<span>{{fullName}}</span>
    <br>
    <!-- slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。 -->
    <!-- 指令语法里面调用函数不要加括号
    插值语法里面调用函数要加括号 -->
    <!-- 只要data里面数据改变，vue一定会重新解析模板，在重新解析模板的时候，只要遇见插值语法里面
    写方法，这个方法一定会重新调用一遍，就是只要数据改变，函数就会被调用。 -->
  </div>
  <!-- _data里面有属性，但是没有计算属性。vm里面也没有_computed，它和data还是不一样的，虽然都是有数据代理。
computed里面的计算属性是通过属性计算出来之后直接放在vm里面，而且computed里面计算属性的getter和setter必须写出来
写在计算属性的对象里面。 -->
</body>
<!-- 
  			计算属性：
  					1.定义：要用的属性不存在，要通过已有属性计算得来。
  					2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
  					3.get函数什么时候执行？
  								(1).初次读取时会执行一次。
  								(2).当依赖的数据发生改变时会被再次调用。
  					4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。method是写了几次就调用几次
  					5.备注：
  							1.计算属性最终会出现在vm上，直接读取使用即可。
  							2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
  		 -->
<script type="text/javascript">
  const vm = new Vue({
    el: '#root',
    data: {
      z: '张',
      s: "三"
    },
    // 注意，只考虑读取，不考虑修改的时候才可以用简写属性
    computed: {
      //完整写法
      /* fullName:{
        get(){
          console.log('get被调用了')
          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 this.firstName + '-' + this.lastName
      }
    }
  })
</script>

</html>

09_监视属性

在Vue.js 3中，以下是关于监视属性的要点总结：

定义监视属性：通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性，并传入要监视的数据属性或计算属性名称。

isHot:{
					// immediate:true, //初始化时让handler调用一下
					// deep:true,//深度监视
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, 
				//简写
				isHot(newValue,oldValue){
				//new是修改后的，old是修改前的。
					console.log('isHot被修改了',newValue,oldValue,this)
				}

监视属性的回调函数：在watch中定义的回调函数将在被监视的属性发生变化时被调用。该函数接收两个参数：新值和旧值。

监视多个属性：您可以同时监视多个属性，将它们作为一个对象传递给watch。

javascript
const app = Vue.createApp({
  data() {
    return {
      firstName: '',
      lastName: '',
    };
  },
  watch: {
    firstName(newValue, oldValue) {
      // 处理firstName属性的变化
    },
    lastName(newValue, oldValue) {
      // 处理lastName属性的变化
    },
  },
});

深度监视：通过将deep选项设置为true，可以实现对对象或数组的深度监视。这意味着当对象内部的属性发生变化时，也会触发监视回调函数。

javascript
const app = Vue.createApp({
  data() {
    return {
      user: {
        name: 'John',
        age: 30,
      },
    };
  },
  watch: {
    user: {
      deep: true,
      handler(newValue, oldValue) {
        // 处理user对象的变化，包括其内部属性
      },
    },
  },
});

监视立即执行：通过将immediate选项设置为true，可以使监视函数在初始挂载时立即执行一次。

javascript
const app = Vue.createApp({
  data() {
    return {
      count: 0,
    };
  },
  watch: {
    count: {
      immediate: true,
      handler(newValue, oldValue) {
        // 初始挂载时立即执行的处理逻辑
      },
    },
  },
});

1.天气案例

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="cw">切换天气</button>
  </div>
  <!-- vm里面的东西都要到模板（vm）里面找，在vm里面找不到就去vue原型上面找，vue原型对象上如果也没有alert
  那这个事件就结束了， -->
</body>
<script type="text/javascript">
  new Vue({
    el: '#root',
    data: {
      //除了data里面，其他的配置项里面都要加this吗？？？？
      //this的问题
      ishot: true,//用来判断
      // window//它是内置对象
    },
    methods: {
      cw() {
        // this.ishot = !this.ishot
        alert("nnn")
      }
    },
    computed: {
      //这是三目运算符
      info() {
        return this.ishot ? '炎热' : '凉爽'
      }
    }
  })
</script>

</html>

2.天气案例_监视属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div class="wh">
    天气很{{info}}
<button @click="ee">点击切换天气</button>
  </div>
  <script type="text/javascript">
var v = new Vue({
  el:'.wh',
  data:{
ishot:true
  },
  methods: {
    ee(){
this.ishot = !this.ishot
    }
  },
  computed:{
info(){
  return this.ishot ? '炎热' : '凉爽'
}
  },
  watch:{
    // 这里是对象里面的key-value键值对
    ishot:{
      // 当ishot发生改变的时候，就会调用handler
      immediate: true,//immediate配置项会在初始化的时候调用一下handler
      handler(newValue,oldValue){
  // 会把修改前的值和修改后的值都告诉你
  
  console.log('handler执行了')
  console.log(newValue+''+oldValue)
}
    }
  }
})
  </script>
</body>
</html>

3.天气案例_深度属性

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

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

<body>
  <div class="ui">
    a:{{numbers.a}}<br>
    <button @click="qwe">点我让a+1</button>
    <hr>
    b:{{numbers.b}}<br>
    <button @click="asd">点我让b+1</button>
  </div>

  <script type="text/javascript">
    new Vue({
      el: '.ui',
      data: {
        numbers: {
          a: 1,
          b: 1
        }
      },
      methods: {
        qwe () {
          this.numbers.a++;
          //           在大多数 Vue.js 配置选项中，你需要使用 key 来访问数据属性。但是，有一些例外情况不需要使用 ：thisthis

          //           data：在选项本身中，您无需使用 访问数据属性。您可以直接通过它们的名称来引用它们。例如，以 身份访问。datathis{ myData: 'Initial value' } myData

          //           computed：定义计算属性时，可以直接使用数据属性，而无需使用 。计算属性自动可以访问组件的数据和其他计算属性。this

          // watch：在观察程序的函数中，可以直接访问数据属性，而无需使用 。handlerthis

          //           生命周期挂钩：在生命周期挂钩（如 、 等）中，您可以在没有.createdmountedthis

          //           对于所有其他配置选项（如 、 等），您需要使用 来访问数据属性。methodscomponentsthis
        },
        asd () {
          this.numbers.b++;
        }
      },
      computed: {
      },
      vm.$watch('numbers', {
        handler () {
          console.log('number里面的东西被调用了')
        }
      })


    })
  </script>
</body>

</html>

4.天气案例_监视属性_简写


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_监视属性_简写</title>
		<!-- 引入Vue -->
		<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(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, */
				//简写
				/* isHot(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue,this)
				} */
			}
		})

		//正常写法
		/* vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) */

		//简写
		/* vm.$watch('isHot',(newValue,oldValue)=>{
			console.log('isHot被修改了',newValue,oldValue,this)
		}) */

	</script>
</html>

10_绑定样式

10.1绑定class样式

绑定class样式
三种情况：
数组：个数不确定，名字不确定

对象：个数确定，名字确定，可以动态决定用不用
字符串：样式的类名不确定，需要动态绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=\, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<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>
<body>
  <div id="root">
    <!-- 字符串 -->
  <div class="basic" :class="a" @click="b"></div>
  <!-- 对象 -->
  <div class="basic" :class="c"></div>
  <!-- 数组 -->
  <div class="basic" :class="d"></div>
  </div>
  
  <script type="text/javascript">

const vm = new Vue({
  el:'#root',
  data:{
a:'happy',
c:{
  happy:false,
  atguigu1:false,
  atguigu2:false,
  atguigu3:false,
},
d:["happy","sad","atguigu1"]
  },
  methods: { 
    b(){
const arr = ["atguigu1","atguiu2","atguigu3"]
// 注意数组里面的要是字符串才可以，因为vue里面是没有定义这几个的
const index=Math.floor(Math.random()*3)
this.a=arr[index]
    }
  },
})
  </script>
</body>
</html>

10.2绑定style样式

在这里插入图片描述

Document

11_条件渲染

11.1_vue条件渲染

条件渲染：
1.v-if
写法：
(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else=“表达式”
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

						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>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="rf">
    <button @click="n++">{{n}}</button>
    <!-- <h1 v-if ='n==1'>1</h1>
    <h2 v-else-if='n==2'>2</h2>
    <h2 v-else-if='n==3'>3</h2>
    <h3 v-else=''>4</h3> -->
<div v-show="n==1">1</div>
<div v-show="n==2">2</div>
<div v-show="n==3">3</div>
  </div>
  <script type="text/javascript">
    new Vue({
      el:'#rf',
      data:{
        n:0
      }
    })
  </script>
</body>
</html>

11.2_vue列表渲染

11.2.1_列表排序

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <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 filPerons" :key="p.id">
        {{p.name}}-{{p.age}}-{{p.sex}}
        <input type="text">
      </li>
    </ul>
  </div>

  <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: {
        filPerons() {
          const arr = this.persons.filter((p) => {
            return p.name.indexOf(this.keyWord) !== -1
          })
          //判断一下是否需要排序
          if (this.sortType) {
            // 0转化为布尔值是false。0就相当于一无所有。一无所有就是犯了很多错。所以是false
            arr.sort((p1, p2) => {
              return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
            })
          }
          return arr
        }
      }
    })

  </script>

</html>

11.2.2_列表过滤

在这里插入图片描述 `

列表过滤

人员列表

11.2.3_列表渲染

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>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <!--v-for列表渲染 -->
  <div id="root">
<!-- 遍历数组 -->
<!-- 遍历数组的时候，p是数组元素 -->
    <ul>
      <li v-for="(p,i) in persions">{{p.name}}-{{p.age}}-{{i}}</li>
    </ul>
    <!-- 遍历对象 -->
    <!-- <ul> -->
      <!-- <li v-for="(p,i) in persions">{{p}}-{{i}}</li> -->
      <!-- 对象拿出来的是键值对，value在前（p是value），key（i是key）在后。 -->
    <!-- </ul> -->
    <!-- 遍历字符串 -->
    <!-- <ul>
      <li v-for="(p,i) in persions">
        {{p}}-{{i}}
      </li>
    </ul> -->
    <!-- 遍历指定次数 -->
    <ul><li v-for="(p,i) in 8">
      {{p}}-{{i}}
    </li></ul>
  </div>
  <script type="text/javascript">
new Vue({
el:'#root',
data:{
persions:[{id:'01',name:'张三',age:12}, { id: '02', name: '张四', age: 13 }, { id: '03', name: '张五', age: 14 }]
  // persions:{
  //   name:'hj',
  //   age:12,
  //   sex:'女'
  // }
  // persions:'123456'
},
})
  </script>
</body>
</html>

在这里插入图片描述

12_key的作用与原理

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

虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2.对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到到页面。

用index作为key可能会引发的问题：
若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。

开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>key的原理</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <!-- 遍历数组 -->
    <h2>人员列表（遍历数组）</h2>
    <button @click.once="add">添加一个老刘</button>
    <ul>
      <li v-for="(p,index) of persons" :key="index">
        {{p.name}}-{{p.age}}
        <input type="text">
      </li>
    </ul>
  </div>

  <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)
          // unshift() 方法可向数组的开头添加一个或更多元素, 并返回新的长度。 语法 arrayObject.unshift(newele1, newelet2,…, neweleX) 返回值 array 的新长度
        }
      },
    })
  </script>

</html>

虚拟dom对比算法：
在这里插入图片描述

在这里插入图片描述
因为虚拟dom对比算法，所以key最好还是设置为唯一标识。

13_vue监测对象，监测数组改变的原理

模拟一个数据监测：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript" >

			let data = {
				name:'尚硅谷',
				address:'北京',
			}

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

			//准备一个vm实例对象
			let vm = {}
			vm._data = data = obs
//这是vue用来做响应式的一个构造函数
			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>

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的根数据对象 添加属性！！！

在这里插入图片描述
调用vue里面的数组它会重新解析模版。
第一步找原型对象，第二步就是重新解析模版。
vue对数组的监测就是靠包装数组身上的常用方法。
vue监测对象：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名称：{{school.name}}</h2>
			<h2>学校地址：{{school.address}}</h2>
			<h2>校长是：{{school.leader}}</h2>
			<hr/>
			<h1>学生信息</h1>
			<button @click="addSex">添加一个性别属性，默认值是男</button>
			<h2>姓名：{{student.name}}</h2>
			<h2 v-if="student.sex">性别：{{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 //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				school:{
					name:'尚硅谷',
					address:'北京',
				},
				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>

vue监测数组：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理_数组</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名称：{{school.name}}</h2>
			<h2>学校地址：{{school.address}}</h2>
			<h2>校长是：{{school.leader}}</h2>
			<hr/>
			<h1>学生信息</h1>
			<button @click="addSex">添加一个性别属性，默认值是男</button>
			<h2>姓名：{{student.name}}</h2>
			<h2 v-if="student.sex">性别：{{student.sex}}</h2>
			<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
			<h2>爱好</h2>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<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 //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				school:{
					name:'尚硅谷',
					address:'北京',
				},
				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>

13_收集表单数据

14_生命周期

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<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)
			},
		})

		//通过外部的定时器实现（不推荐）
		/* setInterval(() => {
			vm.opacity -= 0.01
			if(vm.opacity <= 0) vm.opacity = 1
		},16) */
	</script>
</html>

总结生命周期
常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

			关于销毁Vue实例
					1.销毁后借助Vue开发者工具看不到任何信息。
					2.销毁后自定义事件会失效，但原生DOM事件依然有效。
					3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

司篂篂

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录