Vue2基础篇-21-非单文件组件
2024-06-01 17:43:13
1. 基本使用
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 非单文件组件-基本使用</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><!-- 第三步,使用组件--><school></school><hr><xuesheng></xuesheng>
</div>
<div id="root2"><hello></hello>
</div>
<script text="text/javascript">//第一步，创建组件const school = Vue.extend({template: `<div><h2>学校地址为{{ schoolAddress }}</h2><h2>学校名称为{{ schoolName }}</h2></div>`,data() {return {schoolName: "叮咚",schoolAddress: "上海",}}})const student = Vue.extend({template: `<div><h2>学生地址为{{ studentAddress }}</h2><h2>学生名称为{{ studentName }}</h2></div>`,data() {return {studentName: "张三",studentAddress: "上海",}}})//定义hello组件const hello = Vue.extend({template: `<div><h2>hello,{{ name }}</h2></div>`,data() {return {name: "张三"}}})//注册为全局组件Vue.component('hello', hello)//使用Vuenew Vue({el: "#root",//第二步，注册组件components: {//如果名字一样，可以简写成student,这里是演示可以更变名字xuesheng: student,school}})new Vue({el: "#root2"})
</script>
</body>
</html>
1.1 小总结
<!--Vue中使用组件的三大步骤:1. 定义组件(创建组件)2. 注册组件3. 使用组件(写组件标签)一、 如何定义一个组件使用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>-->
2. 注意点
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title> 非单文件组件-注意点</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><div id="root"><school></school><school /></div><script text="text/javascript">const school = Vue.extend({template: `<div> <h2>学校地址为{{schoolAddress}}</h2><h2>学校名称为{{schoolName}}</h2></div>`,data() {return {schoolName: "叮咚",schoolAddress: "上海",}}})new Vue({el: "#root",components: {school}})</script>
</body>
</html>
2.1 小总结
<!-- 注意点：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-->
3. 嵌套组件
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title> 非单文件组件-嵌套组件</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><div id="root"></div><script text="text/javascript">// 定义Student组件const Student = Vue.extend({name: "Student",template: `<div> <h2>学生地址为{{studentAddress}}</h2><h2>学生名称为{{studentName}}</h2></div>`,data() {return {studentName: "张三",studentAddress: "上海金葵",}}})// 定义School组件const School = Vue.extend({name: "School",template: `<div> <h2>学校地址为{{schoolAddress}}</h2><h2>学校名称为{{schoolName}}</h2><Student></Student></div>`,data() {return {schoolName: "叮咚",schoolAddress: "上海",}},components: {Student}})// 定义hello组件 const Hello = Vue.extend({name: "Hello",template: `<div> <h2>hello</h2></div>`,})// 定义App组件组件 const App = Vue.extend({name: "App",template: `<div><School></School><Hello></Hello></div>`,components: {School,Hello}})new Vue({el: "#root",template: `<div><App></App> </div>`,components: {App}})</script>
</body>
</html>
4. VueComponent
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title> VueComponent</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><div id="root"></div><script text="text/javascript">// 定义School组件const School = Vue.extend({name: "School",template: `<div> <h2>学校地址为{{schoolAddress}}</h2><h2>学校名称为{{schoolName}}</h2><Student></Student></div>`,data() {return {schoolName: "叮咚",schoolAddress: "上海",}}})new Vue({el: "#root",template: `<div><School></School></div>`,components: {School}})</script>
</body>
</html>
4.1 小总结
<!-- 关于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原型上的属性,方法；-->
5. 默认脚手架配置
<!-- 1. 脚手架文件结构:|--node_modules|--public| |------favicon.ico ： 页签图标|-------index.html ： 主页面|--src| |--assets: 存放静态资源| |--logo.png |--component: 存放组件|-- HelloWorld.vue|--App.vue:汇总所有组件|--main.js:入口文件||--.gitignore： git版本管制忽略的配置|--babel.config.js :babel的配置文件|--package.json :应用包配置文件|--README.md: 应用描述文件|--package-lock.json: 包版本控制文件2.关于不同版本的Vue:2.1 vue.js 与vue.runtime.xxx.js的区别:1. .vue.js是完整版的Vue,包含: 核心功能+模板解析器2. .vue.runtime.xxx.js 是运行版本的Vue,只包含: 核心功能，没有模板解析器因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体的内容；3.vue.config.js配置文件1. 使用vue.inspect > output.js可以查看到Vue脚手架的默认配置。2. 使用vue.config.js可以对脚手架进行个性化定制，详情见: https://cli.vuejs.org/zh/config/-->
Vue2基础篇-21-非单文件组件相关推荐
- Vue（组件化编程：非单文件组件、单文件组件）
一.组件化编程 1. 对比传统编写与组件化编程(下面两个解释图对比可以直观了解) 传统组件编写:不同的HTML引入不同的样式和行为文件 组件方式编写:组件单独,复用率高(前提组件拆分十分细致) 理解为 ...
- vue教程2 【Vue组件化编程】 组件的创建和使用 非单文件组件和单文件组件的区别
组件 实现局部功能的代码和资源的集合 非单文件组件 1.定义组件(创建组件) 2.注册组件 3.使用组件(写组件标签) 定义 使用Vue.extend(options)创建,其中options和new ...
- Vue之非单文件组件介绍
简介 主要介绍非单文件组件的方式创建Vue组件.使用. 非单文件组件指的是一个文件中包含多个vue组件. 非单文件组件实际上是html文件. 使用组件化主要分为三步: 编写组件. 注册组件. 使用组件 ...
- Vue的单文件组件和非单文件组件
单文件组件:一个文件中只包含一个组件,后缀为.vue(常用) <template><!-- html部分 --><div><p class="tit ...
- 非单文件组件和单文件组件区别
这里写自定义目录标题 非单文件组件和单文件组件区别 非单文件组件和单文件组件区别 在学vue组件时有这么两个概念:非单文件组件和单文件组件. 现在来总结一下这两种组件区别: 非单文件组件: 一个文件里 ...
- vue 组件 - 非单文件组件
一.定义组件 const school = Vue.extend({name: 'xuexiao', // ----------------------------> 指定组件在开发者工具中显示 ...
- Vue自定义组件——非单文件组件
使用 component 或 components <div id="root"><h1>{{msg}}</h1><school>& ...
- Vue单文件组件基础模板
背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...
- Vue2.0 Vue组件 单文件组件
聊到单文件就要写道xxx.vue,但是.vue文件浏览器是不认识的得处理和加工成.js怎么处理和加工 渠道一: webpack 渠道二: 借助Vue官方提供的脚手架(官方给你搭建的整个webpack编 ...
最新文章
- 09-CA/TA编程:storage demo
- Redis5.0.8集群搭建与说明
- Java程序员需要掌握的计算机底层知识（一）：CPU基本组成、指令乱序执行、合并写技术、非同一访问内存 NUMA
- Android 百度地图开发(一)
- 控件(View)之TextSwitcher, Gallery, ImageSwitcher, GridView, ListView, ExpandableList【转】
- oracle 12c alert,Oracle 12c DG备库Alert报错ORA-01110
- 2DToolkit官方文档中文版打地鼠教程（一）：初始设置
- unity编译器安装路径_1.安装Unity
- 微信小程序测试需要考虑哪些方面？一分钟快速掌握(小白必看！）
- 计算机用户名登录取消,win7系统取消登录界面显示用户名的还原办法
- 西数trex自动版u盘版_当移动硬盘遇上它，改变了我的生活：西数My Passport随行版...
- CSS两种盒模型(标准盒模型IE盒模型)
- vue获取内外网ip地址
- python中reduce函数_reduce函数
- 财经APP富途/老虎/雪盈 牌照分析
- 竞赛——【蓝桥杯】2022年11月第十四届蓝桥杯模拟赛第一期Python
- 一篇小论文:VGGish-BiGRU网络
- 【程序源代码】微信小程序餐饮点餐商城
- PlaintextAttack
- javaweb项目相对路径与绝对路径