Vue | （二）Vue组件化编程 | 尚硅谷Vue2.0+Vue3.0全套教程

文章目录

  • 📚模块与组件、模块化与组件化
  • 📚非单文件组件
    • 🐇基本使用
    • 🐇关于组件的几个注意点
    • 🐇组件的嵌套
  • 📚单文件组件
    • 🐇一个.vue 文件的组成
    • 🐇实例

学习链接：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通，本文对应p53-p60，博客参考尚硅谷公开笔记，补充记录实操。

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

  • ⭐️模块
    1. 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件。
    2. 为什么: js 文件很多很复杂。
    3. 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率。
  • ⭐️组件
    1. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
    2. 为什么: 一个界面的功能很复杂
    3. 作用: 复用编码, 简化项目编码, 提高运行效率
  • ⭐️模块化、组件化
    1. 模块化：当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。
    2. 组件化：当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。

在这里插入图片描述

在这里插入图片描述在这里插入图片描述

📚非单文件组件

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

🐇基本使用

  • Vue中使用组件的三大步骤：

    • 1.【定义】组件(创建组件)
    • 2.【注册】组件
    • 3.【使用】组件(写组件标签)

  • 如何定义一个组件？

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

  • 如何注册组件？

    • 局部注册：靠new Vue的时候传入components选项
    • 全局注册：靠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"><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>`,data(){return {schoolName:'哔哩哔哩',address:'bilibili'}},methods: {showName(){alert(this.schoolName)}},})//第一步：创建student组件const student = Vue.extend({template:`<div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>`,data(){return {studentName:'啦啦右一',age:20}}})//第一步：创建hello组件const hello = Vue.extend({template:`<div>	<h2>你好啊！{{name}}</h2></div>`,data(){return {name:'youyi'}}})//第二步：全局注册组件Vue.component('hello',hello)//创建vmnew Vue({el:'#root',data:{msg:'你好啊！'},//第二步：注册组件（局部注册）components:{school,student}})new Vue({el:'#root2',})</script>
</html>

    在这里插入图片描述

🐇关于组件的几个注意点

  • 关于组件名：
    • 一个单词组成：
      • 第一种写法(首字母小写)：school
      • 第二种写法(首字母大写)：School
    • 多个单词组成：
      • 第一种写法(kebab-case命名)：my-school
      • 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持，不然会报错)
    • 备注：
      • (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
      • (2).可以使用name配置项指定组件在开发者工具中呈现的名字。
  • 关于组件标签：
    • 第一种写法：<school></school>
    • 第二种写法：<school/>
    • 备注：不使用脚手架时，<school/>会导致后续组件不能渲染。
  • 一个简写方式：const school = Vue.extend(options)可简写为const school = options

🐇组件的嵌套

在这里插入图片描述

<!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 //定义student组件const student = Vue.extend({name:'student',template:`<div><h2>学生姓名：{{name}}</h2>	<h2>学生年龄：{{age}}</h2>	</div>`,data(){return {name:'lalayouyi',age:20}}})//定义school组件const school = Vue.extend({name:'school',template:`<div><h2>学校名称：{{name}}</h2>	<h2>学校地址：{{address}}</h2>	<student></student></div>`,data(){return {name:'哔哩哔哩',address:'bilibili'}},//注册组件（局部）components:{// 注册给谁就去哪里写student}})//定义hello组件const hello = Vue.extend({template:`<h1>{{msg}}</h1>`,data(){return {msg:'今天也在快乐学习————'}}})//定义app组件（管理app里所有的组件）const app = Vue.extend({template:`<div>	<hello></hello><school></school></div>`,components:{school,hello}})//创建vmnew Vue({template:'<app></app>',el:'#root',//注册组件（局部）components:{app}})</script>
</html>

在这里插入图片描述

  • 🔥关于VueComponent
    1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
    2. 我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
    3. 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
    4. 关于this指向：
      • 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是VueComponent实例对象。
      • new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是Vue实例对象。
    5. VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
    6. Vue的实例对象，以后简称vm。
  • 🔥一个重要的内置关系
    1. 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
    2. 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
      在这里插入图片描述
  • 多文件组件缺点
    1. 模板编写没有提示。
    2. 没有构建过程, 无法将 ES6 转换成 ES5。
    3. 不支持组件的 CSS。
    4. 真正开发中几乎不用。

📚单文件组件

  • 单文件组件：一个文件中包含有1个组件。

🐇一个.vue 文件的组成

  1. 模板页面
    <template>页面模板
</template>
  2. JS 模块对象
    <script>
export default {data(){return {}}, methods: {}, computed: {}, components: {}
}
</script>
  3. 样式
    <style>样式定义
</style>

🐇实例

  • 插件安装（Vue高亮显示）
    在这里插入图片描述
  • 快捷键：<v + 回车，快速创建框架
    在这里插入图片描述
  • 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:'bilibili'}},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:'lalayouyi',age:20}}}
</script>
  • App.vue（必须有）
    <template><!-- 要加一个div包裹 --><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.js
    import App from './App.vue'new Vue({el:'#root',template:`<App></App>`,components:{App},
})
  • index.html
    <!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>
    • 但是浏览器不能直接支持ES6的模块化语法——需要【脚手架】👀。
      在这里插入图片描述
    • 详见下文…

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/480129.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【洛谷题解】B2034 计算 2 的幂

【洛谷题解】B2034 计算 2 的幂

题目链接&#xff1a;计算 2 的幂 - 洛谷 题目难度&#xff1a;入门 涉及知识点&#xff1a;pow函数返回值 题意&#xff1a; 分析&#xff1a;用pow计算再强制转换即可 AC代码&#xff1a; #include<bits/stdc.h> using namespace std; int main(){int a;ios::syn…
阅读更多...
初始回溯算法

初始回溯算法

回溯算法一般用于对数据枚举后选取符合条件的结果并最终返回结果集的问题&#xff0c;之所以叫回溯法&#xff0c;是因为它可进可退 要想理解回溯的本质&#xff0c;还是要通过具体的题目去学习。 路径问题 https://www.nowcoder.com/practice/b736e784e3e34731af99065031301b…
阅读更多...
GZ036 区块链技术应用赛项赛题第9套

GZ036 区块链技术应用赛项赛题第9套

2023年全国职业院校技能大赛 高职组 “区块链技术应用” 赛项赛卷&#xff08;9卷&#xff09; 任 务 书 参赛队编号&#xff1a; 背景描述 随着异地务工人员的增多&#xff0c;房屋租赁成为一个广阔是市场&#xff1b;目前&#xff0c;现有技术中的房屋租赁是由…
阅读更多...
Git 客户端可视化工具tortoisegit

Git 客户端可视化工具tortoisegit

Git 使用教程 git一点通 (kdocs.cn) 二、Git 客户端可视化工具-推荐 1.常用工具 tortoisegit 官网 https://tortoisegit.org/ 推荐 sourcetree 官网 https://www.sourcetreeapp.com/ 2.tortoisegit安装 2.1 下载安装包 2.2 下载语言包 2.3 安装 2.4 安装语言包 5.使用 5.1 新建…
阅读更多...
strongswan教程

strongswan教程

在 CentOS 7 上使用 StrongSwan 5.7.2 建立 IPSec VPN 连接&#xff0c;可以按照以下步骤进行配置&#xff1a; 准备3台服务器&#xff1a; A:192.168.3.209&#xff0c;私网172.18.1.0/24 B:192.168.3.29&#xff0c;私网172.18.2.0/24 C:192.168.3.154&#xff0c;私网10…
阅读更多...
LeetCode--代码详解 104. 二叉树的最大深度

LeetCode--代码详解 104. 二叉树的最大深度

104. 二叉树的最大深度 题目 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3示例 2&#xff1a; 输入&…
阅读更多...
体验一下UE5.3的Skeletal Editor

体验一下UE5.3的Skeletal Editor

UE5.3中增加了蒙皮网格骨架编辑工具&#xff0c;用户无需导出Fbx就可以直接编辑蒙皮网格&#xff0c;支持修改绑定姿势的骨骼位置、修改蒙皮权重、对已蒙皮多边形进行编辑以及对蒙皮网格减免等操作&#xff0c;就来体验一下。 1.加载插件 要使用Skeletal Editor功能&#xff…
阅读更多...
量化巨头“卖空”被刷屏！网友：又一类量化策略要“收摊”了

量化巨头“卖空”被刷屏！网友：又一类量化策略要“收摊”了

量化圈遇到了龙年首宗“大事件”&#xff01; 2月20日晚间&#xff0c;沪深交易所同时出手对量化巨头灵均投资的异常交易行为进行“处理”。 沪深交易所均称发现灵均在2月19日开盘1分钟内&#xff0c;名下多个账户通过计算机程序自动生产交易指令&#xff0c;短时间大量下单卖…
阅读更多...
解锁文档处理新境界：ONLYOFFICE编辑功能为开发者带来新机遇

解锁文档处理新境界：ONLYOFFICE编辑功能为开发者带来新机遇

引言 ONLYOFFICE最新发布的文档8.0版本带来了一系列引人注目的功能和优化&#xff0c;为用户提供了更强大、更高效的在线编辑体验。这次更新涵盖了多个方面&#xff0c;包括PDF表单、RTL支持、单变量求解、图表向导以及插件界面设计更新等。这些新功能不仅提升了文档处理的便利…
阅读更多...
Android挖取原图中心区域RectF(并框线标记)放大到ImageView宽高，Kotlin

Android挖取原图中心区域RectF(并框线标记)放大到ImageView宽高，Kotlin

Android挖取原图中心区域RectF(并框线标记)放大到ImageView宽高&#xff0c;Kotlin 红色线框区域即为选中的原图中心区域&#xff0c;放大后放到等宽高的ImageView里面。 import android.content.Context import android.graphics.Bitmap import android.graphics.BitmapFactor…
阅读更多...
HarmonyOS Stage模型基本概念讲解

HarmonyOS Stage模型基本概念讲解

本文 我们来说harmonyos中的一种应用模型 Stage模型 官方提供了两种模型 一种是早期的 FA模型 另一种就是就是 harmonyos 3.1才开始的新增的一种模型 Stage模型 目前来讲 Stage 会成为现在乃至将来 长期推进的一种模型 也就是 无论是 现在的harmonyos 4.0 乃至 之后要发布的 …
阅读更多...
机器人内部传感器阅读笔记及心得-位置传感器-光电编码器

机器人内部传感器阅读笔记及心得-位置传感器-光电编码器

目前&#xff0c;机器人系统中应用的位置传感器一般为光电编码器。光电编码器是一种应用广泛的位置传感器&#xff0c;其分辨率完全能满足机器人的技术要求&#xff0c;这种非接触型位置传感器可分为绝对型光电编码器和相对型光电编码器。前者只要将电源加到用这种传感器的机电…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023