【Vue2-尚硅谷二】Vue组件化编程

最新推荐文章于 2024-07-07 18:00:46 发布
最新推荐文章于 2024-07-07 18:00:46 发布
阅读量269 收藏
点赞数
分类专栏： 框架 前端 文章标签： vue.js 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xbd_zc/article/details/124428279
版权

二,Vue组件化编程

文章目录

1,非单文件组件(一个文件中包含了N个组件)

1.1,对组件的理解

传统方式存在: 依赖关系混乱, 不好维护, 代码复用率不高的问题

image-20220423140956496

组件方式, 便于维护, 容易复用

image-20220423141452448

1.2,组件的定义

实现应用中 局部 功能 代码(css,html,js…) 和 资源(mp3.mp4…) 的集合

image-20220423141753833

1.3,基本使用

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">
         <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>

1.4,注意点(组件名)

  • 1.组件名

    • 1个单词的, 直接写,

      • 可以写首字母大小/全小写: school, School(一般用这个)

    • 多个单词 ,

      • 用-连接, 必须用引号: ‘my-school’
      • 官方推荐驼峰: MySchool (一般用这个) ==前提必须使用脚手架

    • 起名

      • (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
      • (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

  • 2.关于组件标签:

    • 第一种写法：
    • 第二种写法：
    • 备注：不用使用脚手架时，会导致后续组件不能渲染。

  • 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">
         <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>

1.5,组件的嵌套

  • 定义: const s= Vue.extend({})
  • 注册:
    • 局部components:{student:s}, 或者跟定义组件名相同components:{s}
    • 全局Vue.component("student",s)
  • 使用:<student></student>

image-20220423151823834

<!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>

1.6,VueComponent

关于VueComponent：

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

  • 2.我们只需要写或，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。

image-20220423153637908

1.7,Vue和VueComponent的关系

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

原型和原型链
//定义一个构造函数
 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)
  • 显示原型属性和隐式原型属性 共同指向了 原型对象
  • 通过隐式原型链获取原型的属性，从自身沿着原型链一直找直到window的原型为空
Vue和VueComponent的关系

实例的隐式原型属性，永远指向自己缔造者的原型对象

image-20220423160511276

  • 一个重要的内置关系：
    • VueComponent.prototype.proto === Vue.prototype
  • 为什么要有这个关系：
    • 让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

2,单文件组件(一个文件中只有1个组件)

2.1,定义组件

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>
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>
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>
xbd_zc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
尚硅谷Vue2项目尚品汇笔记及技巧汇总
With_Sunflower的博客
11-18 412
B站尚硅谷Vue2前台项目尚品汇笔记及技巧汇总，整理自用，部分内容摘自老师上课所记笔记哈~
Vue2_尚品汇前端项目day13超详细笔记_尚硅谷
weixin_50637054的博客
03-16 155
Vue2_尚品汇前端项目day13超详细笔记_尚硅谷
【尚硅谷】Vue2.x核心学习笔记--渐进式的JS框架
mmklo的博客
06-27 357
官网地址：https://cn.vuejs.org/Vue的作者尤雨溪在开源此框架的时候，就说Vue是借鉴了angular的模板和数据绑定技术和react的虚拟dom以及组件化 实现数据的双向绑定的案例【引入Vue】 当然也可以下载Vue的js文件，通过script标签来引入Vue【官网案例】Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： 【案例解析】：引入Vue.js创建Vue实例对象 一般使用Const 声明一个常量 双向绑定数据：显示数据：{{xxx}}理解V
B站尚硅谷---vue2实战项目《尚品汇》---第一天
m0_64804076的博客
11-30 697
B站尚硅谷---vue2实战项目《尚品汇》---第一天
尚硅谷vue前端项目心得2
im_joy的博客
01-16 645
Day 3,4 (22-42) 2.1 演示卡顿现象引入防抖与节流 正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿） 防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次 节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发 /** * 正常情况（用户慢慢操作）：鼠标进入，每个一级分类h3，都会触发鼠标进入事
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
以上代码展示了如何在Vue组件中引入Vue-Cron，通过`v-model`双向绑定Cron表达式，并监听`@change`事件来响应定时任务设置的变化。 总的来说，Vue-Cron是Vue.js开发中的一个实用工具，它简化了Cron表达式的使用，...
vue2-verify:vue的验证码插件
05-12
vue2-verify 基于 的验证码项目 项目验证码类型 支持的验证码类型 常规验证码picture 常规的验证码由数字和字母构成，用户输入不区分大小写，可变形成汉字验证。 运算验证码compute 运算验证码主要通过给出数字的加...
基于Vue2-Calendar改进的日历组件（含中文使用说明）
10-17
本文将详细介绍一个基于Vue2-Calendar组件进行改进的日历组件，该组件在原版基础上进行了多项优化，以满足更多样化的使用需求。首先，让我们了解一下Vue2-Calendar的基础知识。 Vue2-Calendar是一款适用于Vue.js...
vue2-elm-master.zip
12-19
1. **Vue.js 2.x**: Vue.js是目前非常流行的前端JavaScript框架，它的核心思想是组件化。Vue2引入了虚拟DOM、计算属性、侦听器、异步组件等新特性，提升了性能和开发体验。在Vue2-Elm项目中，你会看到如何组织和使用...
vue3-captcha（vue3行为验证码）
06-20
Vue3-Captcha是一款专为Vue3框架设计的行为验证码插件，旨在提高网站的安全性，防止自动化脚本或机器人进行恶意操作。Vue3是Vue.js框架的最新版本，它引入了许多性能优化和开发体验改进，包括Composition API、...
初识Vue
李公子的博客
07-25 354
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 3.root容器里的代码被称为【Vue模板】 4.Vue实例和容器是一一对应的 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用 6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性 7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新 <!DOCTYPE html> &
尚硅谷 张天禹老师vue2笔记（方便自己查阅）
Maynor的博客
10-19 4634
视频链接： https://www.bilibili.com/video/BV1Zy4y1K7SH?p=2&spm_id_from=pageDriver 尚硅谷 张天禹老师vue2笔记 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存
Vue一个案例引发的「编程式」创建组件
weixin_34400525的博客
04-03 218
在项目的开发过程中「动态添加标签」，「动态添加属性」，「或者动态添加关键词」，是我们在项目中经常遇到的一个场景。 最近在做项目时，就遇到了动态添加属性的案例。 通常在单文件组件的开发模式中，我们会以如下的方式创建组件。 <template> <span></span> </template> <script> export defau...
Vue全家桶
caronil的博客
03-27 1828
Vue 技术栈(全家桶) 文章目录Vue 技术栈(全家桶)第 1 章：Vue 核心1.1. Vue 简介1.1.1. 官网1.1.2. 介绍与描述1.1.3. Vue 的特点1.1.4. 与其它 JS 框架的关联1.1.5. Vue 周边库1.2. 初识 Vue1.3. 模板语法1.3.1. 效果1.3.2. 模板的理解1.3.3. 插值语法1.3.4. 指令语法1.4 数据绑定1.4.1. 效果1.4.2. 单向数据绑定1.4.3. 双向数据绑定1.5. MVVM 模型1.6. 事件处理1.6.1. 效果
尚硅谷vue前端项目心得5
im_joy的博客
01-21 314
p93-112 5.1 trade结算页面 <div class="address clearFix" v-for="(address,index) in addressInfo" :key="index"> <span class="username " :class="{selected:address.isDefault==1}">{{address.consignee}}</span> <p @click="changeDefault(add
Vue3+Element-plus的表单重置
weixin_49352307的博客
07-04 267
1.创建表单,绑定表单数据对象model,并且每一表单需要绑定prop。作用:简化代码,重置表单数据。
Vue的学习之class与style绑定
最新发布
人生苦短
07-07 103
本节对class与style的绑定内容就学习完毕了！
Vue前端打包
weixin_63680330的博客
07-04 235
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
新建Vue工程的几种方法
黔肆的博客
07-04 280
新建vue工程的几种方法，关键词：@vue/cli ,vite , parcel , webpack
【JavaScript-Vue】-Vue知识体系详解
07-25
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像 Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。 [7] Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建， [5] 是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值