目录
- 文章有误请指正，如果觉得对你有用，请点三连一波，蟹蟹支持✨
- V u e j s Vuejs Vuejs
- V u e Vue Vue组件化编程
- 模块·组件·模块化·组件化
- 模块
- 组件
- 模块化
- 组件化
- 组件定义与使用—(非单文件)
- 基本使用
- 几个注意点
- 组件的嵌套
- 组件实例对象
- 组件的个重要的内置关系
- 组件定义与使用——(单文件组件)
- V u e Vue Vue文件的组成
- 存在的问题
- 基本使用
- 总结
文章有误请指正，如果觉得对你有用，请点三连一波，蟹蟹支持✨
⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸ ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇ 不能 ⡏⠀⠀ ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇ 白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽
提示：以下是本篇文章正文内容
V u e j s Vuejs Vuejs
简介 ： Vue 是一套用于构建用户界面的 渐进式 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
- 官方
- 中文 ： https://cn.vuejs.org/
- 英文 ： https://vuejs.org/
- Vue2API : https://v2.cn.vuejs.org/
- Vue2 相关包 ： https://github.com/vuejs/awesome-vue
- Vue2 入门安装官方 ：https://v2.cn.vuejs.org/v2/guide/installation.html
- Vue 相关插件 ： https://awesomejs.dev/for/vue/
V u e Vue Vue组件化编程
模块·组件·模块化·组件化
模块
- 理解: 向外提供特定功能的js程序, 一般就是一个js文件
- 为什么: js代码更多更复杂
- 作用: 复用js, 简化js的编写, 提高js运行效率
组件
- 理解: 用来实现特定(局部)界面功能效果的代码集合(html/css/js/image……)
- 为什么: 一个界面的功能很复杂
- 作用: 复用编码, 简化项目编码, 提高运行效率
模块化
- 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件化
- 当应用是以多组件的方式实现, 这个应用就是一个组件化的应用, 应用的开发方式就是组件化的
组件定义与使用—(非单文件)
基本使用
— 代码演示 🎊
<!-- 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>
-->
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>基本使用</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><!-- 准备好一个容器--><div id="root"><!-- 第三步：使用组件(写组件标签) --><partstudio></partstudio><wholesituation></wholesituation></div>
</body><script type="text/javascript">Vue.config.productionTip = falseconst partstudio = Vue.extend({template: `<div><h2>{{name}}</h2><h2>{{age}}</h2></div>`,data() {return {name: "郭先生_局部",age: 18}}})const wholesituation = Vue.extend({template: `<div><h2>{{name}}</h2><h2>{{age}}</h2></div>`,data() {return {name: "郭先生_全局",age: 18}}})//第二步：注册组件（注册）Vue.component('wholesituation', wholesituation)//第二步：注册组件（局部注册）new Vue({el: '#root',//注册组件（局部注册）components: {partstudio}})</script></html>
几个注意点
— 代码演示 🎊
<!-- 几个注意点：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-->
组件的嵌套
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>基本使用</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><!-- 准备好一个容器--><div id="root"><!-- 第三步：使用组件(写组件标签) --><partstudio></partstudio></div>
</body><script type="text/javascript">Vue.config.productionTip = falseconst neststuio = Vue.extend({template: `<div><h2>{{name}}</h2><h2>{{age}}</h2></div>`,data() {return {name: "郭先生_全局",age: 18}},})const partstudio = Vue.extend({template: `<div><h2>{{name}}</h2><h2>{{age}}</h2><h3>------嵌套组件 下面是嵌套组件------</h3><neststuio></neststuio></div>`,data() {return {name: "郭先生_局部",age: 18}},components: {neststuio,}})//第二步：注册组件（局部注册）new Vue({el: '#root',//注册组件（局部注册）components: {partstudio,}})</script></html>
组件实例对象
— 代码演示 🎊
<!-- 关于VueComponent：1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！4.关于this指向：(1).组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。(2).new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。-->
组件的个重要的内置关系
— 代码演示 🎊
<!-- 1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。-->
<!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"><school></school></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。Vue.prototype.age = 99//定义school组件const school = Vue.extend({name: 'school',template: `<div><h2>姓名：{{name}}</h2> <h2>年龄：{{this.age}}</h2></div>`,data() {return {name: '小明',}},})//创建一个vmconst vm = new Vue({el: '#root',data: {msg: 'hello world vue!'},components: { school }})</script></html>
组件定义与使用——(单文件组件)
V u e Vue Vue文件的组成
- 组成成分 ： 3个部分个App~ Index入口问文件~ main文件
- 模板页面
<template>页面模板
</template>
- JS模块对象
<script>export default {data() {return {}},methods: {},computed: {},components: {},... }
</script>
- 样式
<style> 样式定义
</style>
- app
<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>- main
import App from './App.vue'new Vue({el:'#root',template:`<App></App>`,components:{App},
})
存在的问题
- 模板编写没有提示
- 没有构建过程, 无法将ES6转换成ES5
- 不支持组件的CSS
- 真正开发中几乎不用
所以必须脚手架才能使用
基本使用
- 引入组件
- 映射成标签
- 使用组件标签
总结
以上是个人学习Vue的相关知识点，一点一滴的记录了下来，有问题请评论区指正，共同进步，这才是我写文章的原因之，如果这篇文章对您有帮助请三连支持一波
