Vue入门（二）

阅读数：次 2021-12-14

原创字数统计: 3.8k字 | 预计阅读时长≈ 18分钟

本文讲解前端框架 Vue 组件化的相关知识点。

Vue 组件化编程

模块与组件、模块化与组件化

模块

1、理解：向外提供特定功能的 js 程序，一般就是一个 js 文件

2、为什么：js 文件很多，很复杂

3、作用：复用 js，简化 js 的编写，提高 js 运行效率

组件

1、理解：用来实现局部（特定）功能效果的代码集合（html、css、js、image）

2、为什么：一个界面的功能很复杂

3、作用：复用编码，简化项目编码，提高运行效率

模块化

当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用。

组件化

当应用的功能都是以多组件的方式来编写的，那这个应用就是一个组件化的应用。

非单文件组件

1、模板编写没有提示

2、没有构建过程，无法将 ES6 转换为 ES5

3、不支持组件的 CSS

4、真正开发中几乎不用

基本使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
			Vue中使用组件的三大步骤：
					一、定义组件(创建组件)
					二、注册组件
					三、使用组件(写组件标签)

			一、如何定义一个组件？
					使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
					区别如下：
						1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
						2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
					备注：使用template可以配置组件结构。

			二、如何注册组件？
					1.局部注册：靠new Vue的时候传入components选项
					2.全局注册：靠Vue.component('组件名',组件)

			三、编写组件标签：
					<school></school>
		-->
    <!-- 准备好一个容器 -->
    <div id="root">
      <Hello></Hello>
      <hr />
      <h1>{{msg}}</h1>
      <hr />
      <!-- 第三步：编写组件标签 -->
      <School></School>
      <hr />
      <!-- 第三步：编写组件标签 -->
      <Student></Student>
    </div>

    <div id="root2">
      <hello></hello>
    </div>
  </body>

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

    // 一步：创建school组件
    const School = Vue.extend({
      template: `
				<div class="demo">
					<h2>学校名称：{{schoolName}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showName">点我提示学校名</button>	
				</div>
			`,
      // el:'#root', // 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
      data() {
        return {
          schoolName: '科文',
          address: '江苏徐州',
        }
      },
      methods: {
        showName() {
          alert(this.schoolName)
        },
      },
    })

    // 第一步：创建student组件
    const Student = Vue.extend({
      template: `
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
			`,
      data() {
        return {
          studentName: '张三',
          age: 18,
        }
      },
    })

    // 第一步：创建hello组件
    const Hello = Vue.extend({
      template: `
				<div>	
					<h2>你好啊！{{name}}</h2>
				</div>
			`,
      data() {
        return {
          name: 'Tom',
        }
      },
    })

    // 第二步：全局注册组件
    Vue.component('hello', Hello)

    // 创建vm
    new Vue({
      el: '#root',
      data: {
        msg: '你好啊！',
      },
      // 第二步：注册组件（局部注册）
      components: {
        School,
        Student,
      },
    })

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

几个注意点

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>几个注意点</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
			几个注意点：
				1.关于组件名:
					一个单词组成：
						第一种写法(首字母小写)：school
						第二种写法(首字母大写)：School
					多个单词组成：
						第一种写法(kebab-case命名)：my-school
						第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
					备注：
						(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
						(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

				2.关于组件标签:
					第一种写法：<school></school>
					第二种写法：<school/>
					备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

				3.一个简写方式：
					const school = Vue.extend(options) 可简写为：const school = options
		-->
    <!-- 准备好一个容器 -->
    <div id="root">
      <h1>{{msg}}</h1>
      <school></school>
    </div>
  </body>

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

    // 定义组件
    const s = Vue.extend({
      name: 'atguigu',
      template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
      data() {
        return {
          name: '科文',
          address: '徐州',
        }
      },
    })

    new Vue({
      el: '#root',
      data: {
        msg: '欢迎学习Vue!',
      },
      components: {
        school: s,
      },
    })
  </script>
</html>

组件嵌套

<!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"></div>
  </body>

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

    // 定义student组件
    const student = Vue.extend({
      name: 'student',
      template: `
				<div>
					<h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
      data() {
        return {
          name: '晶哥哥',
          age: 18,
        }
      },
    })

    // 定义school组件
    const school = Vue.extend({
      name: 'school',
      template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
      data() {
        return {
          name: '科文',
          address: '徐州',
        }
      },
      // 注册组件（局部）
      components: {
        student,
      },
    })

    // 定义hello组件
    const hello = Vue.extend({
      template: `<h1>{{msg}}</h1>`,
      data() {
        return {
          msg: '欢迎来到科文学习！',
        }
      },
    })

    // 定义app组件
    const app = Vue.extend({
      template: `
				<div>	
					<hello></hello>
					<school></school>
				</div>
			`,
      components: {
        school,
        hello,
      },
    })

    //创建vm
    new Vue({
      template: '<app></app>',
      el: '#root',
      // 注册组件（局部）
      components: { app },
    })
  </script>
</html>

VueComponent

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>VueComponent</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
			关于VueComponent：
				1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

				2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
					即Vue帮我们执行的：new VueComponent(options)。

				3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

				4.关于this指向：
					(1).组件配置中（Vue.extend(options)）：
						data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
					(2).实例化Vue配置中（new Vue(options)）：
						data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

				5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
				  Vue的实例对象，以后简称vm。
		-->
    <!-- 准备好一个容器 -->
    <div id="root">
      <school></school>
      <hello></hello>
    </div>
  </body>

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

    // 定义school组件
    const school = Vue.extend({
      name: 'school',
      template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showName">点我提示学校名</button>
				</div>
			`,
      data() {
        return {
          name: '科文',
          address: '徐州',
        }
      },
      methods: {
        showName() {
          console.log('showName', this)
        },
      },
    })

    const test = Vue.extend({
      template: `<span>科文</span>`,
    })

    // 定义hello组件
    const hello = Vue.extend({
      template: `
				<div>
					<h2>{{msg}}</h2>
					<test></test>	
				</div>
			`,
      data() {
        return {
          msg: '你好啊！',
        }
      },
      components: { test },
    })

    // console.log('@',school)
    // console.log('#',hello)

    // 创建vm
    const vm = new Vue({
      el: '#root',
      components: { school, hello },
    })
  </script>
</html>

一个重要的内置关系

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>一个重要的内置关系</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
			1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
			2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
		-->
    <!-- 准备好一个容器 -->
    <div id="root">
      <school></school>
    </div>
  </body>

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

    //定义school组件
    const school = Vue.extend({
      name: 'school',
      template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showX">点我输出x</button>
				</div>
			`,
      data() {
        return {
          name: '科文',
          address: '徐州',
        }
      },
      methods: {
        showX() {
          console.log(this.x)
        },
      },
    })

    //创建一个vm
    const vm = new Vue({
      el: '#root',
      data: {
        msg: '你好',
      },
      components: { school },
    })

    // 定义一个构造函数
    /* function Demo(){
			this.a = 1
			this.b = 2
		}
		// 创建一个Demo的实例对象
		const d = new Demo()

		console.log(Demo.prototype) // 显示原型属性

		console.log(d.__proto__) // 隐式原型属性

		console.log(Demo.prototype === d.__proto__)

		// 程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
		Demo.prototype.x = 99

		console.log('@',d) */
  </script>
</html>

单文件组件

一个.vue 文件的组成

有三个部分：

1、模板页面

1
2
3

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

2、Js 模块对象

<script>
  // 引入组件
  import School from './School.vue'
  import Student from './Student.vue'

  export default {
    name: 'App',
    components: {
      School,
      Student,
    },
  }
</script>

3、样式定义

1
2
3

<style>
  样式定义
</style>

推荐一个页面模板：

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

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {}
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped></style>

基本使用

比如说定义两个组件：

School.vue

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

<script>
export default {
  name: 'School',
  data() {
    return {
      name: '科文',
      address: '江苏徐州',
    }
  },
  methods: {
    showName() {
      alert(this.name)
    },
  },
}
</script>

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

Student.vue

<template>
  <div>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生年龄：{{ age }}</h2>
  </div>
</template>

<script>
export default {
  name: 'Student',
  data() {
    return {
      name: '李晶',
      age: 18,
    }
  },
}
</script>

然后创建一个.vue 文件，引入组件、映射成标签，并且使用标签

App.vue

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

<script>
// 引入组件
import School from './School.vue'
import Student from './Student.vue'

export default {
  name: 'App',
  components: {
    School,
    Student,
  },
}
</script>

再者，创建一个 js 文件，实例化 Vue 应用

main.js

import App from './App.vue'

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

创建主页面，定义容器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>练习一下单文件组件的语法</title>
  </head>
  <body>
    <!-- 准备一个容器 -->
    <div id="root"></div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="./main.js"></script>
  </body>
</html>

这里的页面运行会有问题，由于浏览器脚本的默认语言是 JavaScript。

在报错中了解到，是说无法在模块外部使用 import 语句，因为 Module 的加载实现的是 es6 语法。

这里暂时不解决这个问题了，解决方法也有，百度搜索报错信息，解决方式一大堆。

使用 Vue 脚手架

初始化脚手架

说明

Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）

最新的版本是 5.x.x

官方文档：https://cli.vuejs.org/zh/

具体步骤

第一步（仅第一次执行）：全局安装 @vue/cli。

1	npm install @vue/cli -g

第二步：切换到你要创建项目的目录，然后使用命令创建项目

1	vue create 项目名称

第三步：启动项目

1	npm run serve

备注：

1、如果出现下载缓慢，建议切换成 npm 淘宝镜像：

# 安装国内淘宝库：
npm install -g cnpm --registry=https://registry.npm.taobao.org
或者
# 修改npm为淘宝镜像：
npm config set registry http://registry.npm.taobao.org/


# 还原为npm官方镜像：
npm config set registry https://registry.npmjs.org/

# 查看镜像是否设置成功：
npm config get registry

# npm常用命令：
npm install -g --save -dev name version
npm update -g   # 更新npm
npm uninstall    # 卸载npm
npm uninstall -g webapck  # 卸载webapck
npm -v   # 查看npm版本
cnpm -v	 # 查看cnpm版本

2、Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体 webpack 配置，执行如下命令：

1	vue inspect > output.js

模板项目的结构

由于高级部分内容比较复杂，以后再出文讲解，这里暂不概述。

本文作者： LiJing
发布时间： 2021-12-14
最后更新： 2024-06-24
本文标题： Vue入门（二）
本文链接： https://blog-yilia.xiaojingge.com/posts/56a9c9b0.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！