56. Vue原生js的组件拆分结构设计
时间:2022-07-23
本文章向大家介绍56. Vue原生js的组件拆分结构设计,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
需求
在历史问题的情况下,存在需要往jquery项目中引入vue.js框架的情况,这种情况下,因为前期并没有使用webpack
进行打包压缩,所以考虑直接使用原生的js
拆分vue.js
的组件,不依赖与wabpack
等打包软件。
思路
因为没有使用webpack以及babel等高级语法编译工具,只有jquery支持,所以我采用将组件按照该html以及js进行文件夹封装,然后采用jquery
的load
方法来导入组件。
示例
1. 首先编写基础文档结构
2.组件login的编写
login.html
<template id="register-tpl">
<div>
<h1 class="register-h1">注册组件</h1>
</div>
</template>
<style>
.register-h1{
color: cyan;
font-family: "Microsoft YaHei UI";
}
</style>
login.js
var login = {
template: "#login-tpl",
data() {
return {
msg: '123',
};
}
};
3.组件register的编写
register.html
<template id="register-tpl">
<div>
<h1 class="register-h1">注册组件</h1>
</div>
</template>
<style>
.register-h1{
color: cyan;
font-family: "Microsoft YaHei UI";
}
</style>
register.js
// 创建注册组件
var register = {
template: '#register-tpl'
};
4.编写index.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入jqeury -->
<script src="lib/jquery/jquery-3.4.1.min.js"></script>
<!-- 导入vue.js库 -->
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<a href="" @click.prevent=" comName='login' ">登陆</a>
<a href="" @click.prevent=" comName='register' ">注册</a>
<!-- Vue提供了 component ,来展示对应名称的组件 -->
<!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 -->
<component :is="comName"></component>
</div>
<!-- 导入组件的import.js -->
<script src="import.js"></script>
<!-- 导入main.js -->
<script src="main.js"></script>
</body>
</html>
在这里要注意:jquery的load方法是不能用在 vue 的 app 容器内的,但是外部就可以直接调用。
所以在下面的使用import.js
引入所有组件的内容,然后用 main.js
来编写 vm
实例。
5. 编写import.js
// 导入login组件
$('<login></login>').insertAfter("#app"); // 在app后面加入login标签
$('login').load('./components/login/login.html'); // 导入login.html
document.write('<script src="components/login/login.js"></script>');
// 导入register组件
$('<register></register>').insertAfter("#app");
$('register').load('./components/register/register.html');
document.write('<script src="components/register/register.js"></script>');
6.编写main.js
// 创建Vue的实例
var vm = new Vue({
el: '#app',
data: {
comName: '', // 设置默认的组件显示登陆
},
components: {
login, // 注册login组件
register, // 注册register组件
}
});
7.在浏览器打开index.html查看效果
image-20200307233128635
好了,到这里基本的组件拆分已经实现。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Codeforce-CodeCraft-20 (Div. 2)-B. String Modification (找规律+模拟)
- Codeforce-CodeCraft-20 (Div. 2)-A. Grade Allocation
- Cypress系列(69)- route() 命令详解
- Codeforce-Ozon Tech Challenge 2020-D. Kuroni and the Celebration(交互题+DFS)
- Codeforce 263D Cycle in Graph 搜索 图论 哈密尔顿环
- codeforce 266c Below the Diagonal 矩阵变换 (思维题)
- Codeforce-Ozon Tech Challenge 2020-C. Kuroni and Impossible Calculation(鸽笼原理)
- 探索ParNew和CMS垃圾回收器
- Codeforce-Ozon Tech Challenge 2020-B. Kuroni and Simple Strings(贪心)
- 第K短路+严格第K短路
- PostgreSQL异常重启postmaster.pid处理
- Codeforce-Ozon Tech Challenge 2020-A. Kuroni and the Gifts
- 洛谷P3360偷天换日(树形DP)
- Java开发编程规范: 2.常量定义
- Codeforces Round #509 (Div. 2) A. Heist 贪心