Vue2 —— 学习（五）-CSDN博客

<body>
  <div id="root">
    <h2 :style="{opacity}">欢迎学习Vue</h2>
  </div>
  <script>
   const vm = new Vue({
      el: '#root',
      data: {
        opacity: 1
      }
    })
    setInterval(() => {
      vm.opacity -= 0.01
      if (vm.opacity <= 0)
        vm.opacity = 1
    }, 16);
  </script>
</body>

2. Vue 实例内写法

写在 Vue 里面不能写在 methods 里面因为数据一变就调用定时器，一直在变，一直调用定时器就坏了指数级调用有很大隐患

所以我们要单独写在一个函数中，它和 data 对象并列名字是 mounted(){} 挂载函数

Vue 完成解析并将初始的 dom 元素放入页面后挂载完毕才调用 mounted 这样就不会出现上面问题了

 const vm = new Vue({
      el: '#root',
      data: {
        opacity: 1
      },
      mounted() {
        setInterval(() => {
          this.opacity -= 0.01
          if (this.opacity <= 0)
            this.opacity = 1
        }, 16);
      },
    })

（二）生命周期函数

又名生命周期回调函数生命周期钩子

像 mounted(){} 这个函数一样的在 Vue 实例工作的时候只有在特殊的时间点才进行调用的函数就叫生命周期函数，关键的时间点调用一些关键的函数，生命周期函数中的this 指向是 Vue 实例

（三）生命周期函数过程

八个函数四对

1.挂载流程

第一个生命周期数据代理数据监测创建前将要创建

beforeCreat(){

}

还没进行数据代理 vm 中还没有 _data 对象

第二个生命周期创建完毕

created(){

}

创建数据监测和数据代理

第三个生命周期将要挂载

beforeMount(){

}

未经解析的 dom 结构里面对 dom 操作无效

第四个生命周期 挂载完毕就是初始化完毕一上来要处理的事都写在这里

比如发送 ajax 请求启动定时器，绑定自定义事件，订阅消息等

mounted(){

}

经过解析的的 dom 里面可以对dom 进行操作

template 能更新根节点里面只能写一个根元素，不然会报错，拿template 最外层的元素当根节点然后替换掉原来的模板，记住前面学过的 <template></template> 标签不能作为这个模板的根节点

如果多行html 模板应该使用模板字符串

<body>
  <div id="root">

  </div>
  <script>
    const vm = new Vue({
      el: '#root',
      template: ` <div>
    <h2>当前的n 值是{{n}}</h2>
    <button @click="add">点我n+1</button>
  </div>`,
      data: {
        n: 1
      },
      methods: {
        add() {
          this.n++
        }
      },
    })
  </script>
</body>

2.更新流程

第五个生命周期：将要更新

beforeUpdate(){

}

数据是新的但是页面还没来得及更新

第六个生命周期：更新完毕

updated(){

}

数据是新的页面也是新的

3.自毁流程

第七个生命周期：收尾的事在这儿做

关闭定时器，解绑自定义事件，取消订阅消息等

beforeDestroy(){

}

销毁之前，data methods 指令都是可用状态

第八个生命周期：

destroyed(){

}

移除监视销毁组件里面更新不了数据了必须放到 updata 中

vm.$destroy() 完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令和事件监听器，

销毁的是自定义事件，这个语法相当于自杀最好不要使用

可以对 vm 进行销毁，vm 被销毁了，但是vm 最后渲染的页面的成果还在，所以页面的东西还在

如果我们想销毁前把所有善后工作都做完比如关闭所有定时器，我们应该把善后的工作写在 beforeDestroy(){} 函数内部，一旦 vm 被销毁一定会调用里面的函数，如果不是自杀是他杀我们用这个就很方便。

 <script>
    const vm = new Vue({
      el: '#root',
      data: {
        opacity: 1
      },
      methods: {
        stop() {
          this.$destroy()
        }
      },
      mounted() {
        this.timer = setInterval(()=>{
          this.opacity -= 0.01
          if(this.opacity <= 0) this.opacity = 1
        },16)
      },
      beforeDestroy() {
        clearInterval(this.timer)
      },
    })
  </script>

销毁后

Vue 开发者工具看不到任何有效信息自定义事件会失效原生dom 事件依然有效，不在 beforeDestroy(){} 函数内部操作数据因为操作也不会更新了更新的步骤在前面

二、Vue 组件化编程

（一）介绍

组件的定义实现应用中局部功能代码和资源的集合

局部就是一小块儿不能是一整个网页都是组件那就没意义了

资源里面可以有视频音频字体都可以封装进去

学这个框架就是为了组件化编程

1.模块

向外提供特定功能的 js 程序一般就是一个 js 文件

因为 js 文件很多很复杂

能复用 js 简化 js 的编写提高 js 的运行效率

前端的模块就是指的是 js

2.模块化

应用中的 js 都是用模块来编写这个应用就是一个模块化应用

js = a.js b.js c.js

3.组件

实现局部功能效果的代码集合

一个页面的功能很复杂

复用代码简化项目编码提高运行效率

3.组件化

应用中的功能都是多组件的方式来编写的这个应用就是一个组件化的应用

不同功能给拆开了就是组件化

（二）传统与组件方式编写对比

1.传统方式编写

传统方式存在依赖关系不好维护，代码复用率低

复制不是复用，html 里面的相似的结构类似头部和底部其他页面使用到相同结构还需要再复制，复用率不高

2.组件方式编写

我们使用组件的写法就能解决这个问题，把需要复用的 html css js 文件结构封装成一个组件，如果别的页面出现了相同结构我们直接用一句代码引入组件就行，而不是复制完整一大堆代码

使用了封装的思想

（三）单文件组件

介绍

非单文件组件：一个文件中包含 n 个组件

单文件组件：一个文件中只包含 1 个组件

单文件组件比较好建议使用单文件组件来写组件

（四）组件使用流程

1.创建组件

组件里面的结构写法和Vue 实例里面几乎一模一样但是组件不能写为谁服务就是 el 配置属性，因为组件从来都不是单独为谁服务的，而是可以被任何人所用

el 属性在 Vue 实例里面最终所有组件都被一个 vm 管理，vm 决定服务哪个容器

组件里面的 data 数据不能写成对象的形式而得写成函数的形式，因为如果多个组件都用对象的方法，修改一个组件中 data 对象中的属性其他组件中的data 对象也会收到影响，用函数形式可以避免这种状况每次调用都是返回一次新的对象

然后把我们要渲染的模板放到 template 配置属性中，使用模板字符串 `` 组件中的 html 就有了，注意只能有一个根标签，外面套一个 div

 const school = Vue.extend({
      template: `<div>
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
</div>`,
      data() {
        return {
          schoolName: '一个学校',
          address: '北京'
        }
      }
    })

2.注册组件

得使用一个全新的配置对象 components 里面写要注册的组件前面是我们自己定义的组件名

后面是名字对应哪个组件就是我们上一步创建的组件

局部注册（用的多）

下面属于局部注册，如果再创建一个 Vue 实例作用于 root2 那么这个实例中必须还得 components: {
xuexiao: school,
xuesheng: student
}

如果我们定义的名字和组件名相同我们能简写

components: {
school,
student
}

用这段代码引入

 new Vue({
      el: '#root',
      components: {
        xuexiao: school,
        xuesheng: student
      }
    })

全局注册

使用下面这段代码就代表进行了全局注册，这样注册不同的实例内部不用都引入 components

就能直接使用这个 hello 组件了

Vue.components('hello',hello)

3.使用组件

最后使用组件标签将组件显示到页面中就行了查看vue插件中 root 结构里面有一个root 结构有两个组件组件里面有对应的数据打开root 里面什么都没有

组件使用多次是不产生干扰的

<div id="root">
    <xuexiao></xuexiao>
    <hr>
    <xuesheng></xuesheng>
    <xuesheng></xuesheng>
  </div>

4.注意

组件名：

不能用已有的标签名来当组件名比如 h2

一个单词的时候

可以使用纯小写的也能使用首字母大写的形式（能和开发者工具呼应上，因为工具里面就是显示默认首字母大写）

多个单词的时候

可以用 ‘my-school’ 单词之间用 - 隔开

也可用 MySchool 大驼峰每一个单词的首字母都大写但是得有脚手架环境不然会报错后面学到脚手架的时候再用

可以用 name 属性配置组件在开发者工具中出现的名字

const s = Vue.extend({
      name:'duli',
      data() {
        return {
          schoolName: '一个学校',
          address: '北京'
        }
      }
    })

组件标签：

可以不用双标签用单标签自闭和

但是要用这种写法必须保证在脚手架环境下不然会出现错误无法处理多个自闭和标签写多个自闭和标签就会只显示一个

<xuesheng/>

创建组件简写方法：

直接后面接等号不用 const student = Vue.extend({ }) 里面直接写配置对象，虽然省略了 Vue.extend() 但是其实还是调用了这个方法会自动给我们补上

const sudent = {

}

（五）组件嵌套

就是一个组件里面又放了一个组件外面的组件称为父组件里面包含的组件称为子组件，是一个父子关系

我们想在学校 school 里面嵌套一个组件学生 student

先创建学校组件然后再在 Vue 实例中注册学校事件然后在 root 模板里面使用组件

然后写嵌套先创建一个子组件我们要在 school 里面嵌套所以我们在 school 父组件里面注册子组件

注意我们要把子组件创建在父组件前面因为父组件依赖子组件进行工作得先创建子组件不然没有子组件调用就会报错

最后使用我们在谁里里面注册的组件就在哪里使用不能在 root 模板里使用要在 school 的模板template 里使用组件标签 <student></student> 使用即可

<body>
  <div id="root">
    <school></school>
  </div>
  <script>
    const student = Vue.extend({
      template: `<div>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{age}}</h2>
  </div>`,
      data() {
        return {
          studentName: '张三',
          age: 18
        }
      }
    })
    const school = Vue.extend({
      name: 'school',
      template: `<div>
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
     <student></student>
</div>`,
      data() {
        return {
          schoolName: '一个学校',
          address: '北京'
        }
      },
      components: {
        student
      }
    })

    new Vue({
      el: '#root',
      components: {
        school
      }
    })
  </script>
</body>

定义一个 app 组件是一人之下万人之上，在 vm 下面在其他组件的上面最后 vm 实例只要引入一个组件 app 就行

new Vue({
      template: `<app></app>`,
      el: '#root',
      components: { app }
    })

（六）VueComponent 构造函数

可以简写成 vc 组件实例对象 vm 管理着一个个 vc （我们自己命名的别的程序员不知道，vm所有程序员都知道）

1.本质

我们写的组件的本质是什么，我们输出school 得到返回值是一个函数类型数据，school 不仅是一个函数而且是一个构造函数 VueComponent

得前面先加 new 然后后面加括号才能使用就是 new Vuecomponent() 的形式

所以school 组件本质是一个名为 Vuecomponent 的构造函数，且不是程序员定义的，是 Vue.extend 生成的。

2.创建组件对象

我们只需写<school/>或<school></school> Vue解析时就会帮我们创建 school组件的实例对象

就是执行 new VueComponent(options) options 就是我们写的 extend({ })括号里面写的配置项

每次调用 Vue.extend({ }) 都会创建一个新的VueComponent

3.this 指向

组件配置中

data methods watch computed 中的函数 this 都指向 VueComponent 实例对象

new Vue() 实例中

data methods watch computed 中的函数 this 都指向 Vue 实例对象

  const school = Vue.extend({
      name: 'school',
      template: `<div>
    <h2>学校名称：{{schoolName}}</h2>
    <h2>学校地址：{{address}}</h2>
</div>`,
      data() {
        return {
          schoolName: '一个学校',
          address: '北京'
        }
      },
    })

4.Vue 实例和组件实例

里面的属性方法完全一样个数也一样

但是 vc 里面不能写 el 属性 vm里面必须写

vc 中的 data 必须写成函数型 vm 中的 data 可以写成函数型也能写成对象型

组件是可复用的 Vue 实例所以与 new Vue 接受的配置项都是相同的

5.一个重要的内置关系

VueComponent.prototype.__proto__ === Vue.prototype

让组件实例对象 vc 可以访问到 Vue 原型上的属性和方法

所以 vc 里面的属性和方法和 vm 里面的一模一样

（七）单文件组件

以.vue 结尾的文件 Vue 团队打造的特殊的文件但是浏览器不能直接解析 .vue 文件我们需要将这个文件转化成 js 文件就能正常使用了

1.两个渠道

第一个是 webpack

第二个是官方提供的脚手架人家搭建好的webpack 工作流（建议使用）

2.命名规则

和组件的命名方式相同

school.vue

School.vue 习惯使用

my-school.vue

MySchool 习惯使用

3.vue 文件内容

快速生成骨架 <v

内容

如下所示但是标签没有高亮因为 vscode 不认识 .vue 文件我们得下载插件，然后就有高亮了

但是里面只认识这三个标签我们不能些别的标签不然会报错

在下面写脚本的时候我们不能直接复制粘贴我们要加上暴露方式

有三种暴露方式

用哪一种都行但是一般用默认暴露方便一点

export 写前面是分别暴露 export const school = Vue.extend 引入时 import {。。。} from 。。。

export 写后面加花括号这个叫统一暴露 export {school} 引入时 import {。。。} from 。。。

export 写后面 export default school 叫默认暴露引入时直接 import 。。。 from 。。。就行

<template>
  <div class="demo">
    <h2>学校名称：{{ schoolName }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="showName">点我提示学校名</button>
  </div>
</template>

<script>
const school = Vue.extend({
  data() {
    return {
      schoolName: "一个学校",
      address: "北京",
    };
  },
  methods: {
    showName() {
      alert(this.schoolName);
    },
  },
});
export default school 
</script>

<style>
.demo {
  background-color: orange;
}
</style>

使用默认暴露时不用写这么麻烦可以把中转变量 school 去掉直接export default 写前面，而且前面学习到了我们可以不写这个 Vue.extend 直接创建对象

<script>
export default {
  name: school,
  data() {
    return {
      schoolName: "一个学校",
      address: "北京",
    };
  },
  methods: {
    showName() {
      alert(this.schoolName);
    },
  },
};
</script>

4.单文件组件使用流程

第一步先创建组件就是上面构建 School.vue 的过程

第二步创建组件app

这个组件是一人之下万人之上用来管理所有的组件必须有这个组件

里面连接了刚才我们写的组件 School 组件

用 import School from “./School.vue” 引入

然后把 School 组件标签显示到模板里面

<template>
<div>
  <School></School>
</div>
</template>

<script>
import School from "./School.vue";
export default {
  name: "app",
  components: {
    School,
  },
};
</script>

<style>
</style>

第三步创建 vm 实例对象它是 app 唯一的上级

名字叫做 main.js 或 index.js

引入 app 组件然后显示到模板里面

import app from './app.vue'
new Vue({
  el:'#root',
  template: `<app></app>`,
  components:{
    app
  }
})

第四步创建html 文件显示页面

名字叫做 index.html

写好一个根节点里面不需要放任何东西

引入 vue 的语法和上一步的 vm 对象 main.js

<body>
  <div id="root"></div>
  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript" src="./main.js"></script>
</body>

四个步骤都完成后到网页中打开发现是不能运行的，因为 html 不能识别 import es6 语法

我们后面学习脚手架把这引入代码放进去就能正常显示了这只是一个基本流程