Vue初学30-vue组件化的使用方案

最新推荐文章于 2021-08-31 16:26:53 发布
置顶 最新推荐文章于 2021-08-31 16:26:53 发布
阅读量254 收藏
点赞数 1
分类专栏： vue 文章标签： vue 组件化 vue component vue template
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gis_zhouda/article/details/106496721
版权

vue在使用时是通过el属性与dom元素绑定，dom元素在html文件中，如果将dom元素都放在html文件中，随着页面的复杂，元素会越来越多，可读性差，维护起来也不方便。因此，需要采用组件化的思想组织页面元素。

el和template

vue中通过el属性与dom元素关联，vue中还有template属性，生成后，template中的元素将替换el中关联的dom元素。

将main.js和index.html修改如下：

main.js

import Vue from 'vue'
const vue = new Vue({
    el:'#app',
    template:`
    <div>
      <h2>{{message}}</h2>
    </div>
    `,
    data:{
        message:'hello world'
    }
})

index.html

<body>
<div id="app">
</div>
<script src="dist/bundle.js"></script>
</body>

重新打包，效果如下：

template的提取 

 将template放在vue里面，组织起来仍然比较乱，将template作为模板提取出来比较好。

修改main.js如下：

import Vue from 'vue'

const App = {
    template:` <div>
      <h2>{{message}}</h2>
    </div>`,
    data()
    {
        return {
            message:'hello world'
        }
    }
}
const vue = new Vue({
    el:'#app',
    template:'<App/>',
    components:{
        App
    }
})

模板可以单独放在一个js文件里面，在src目录下新建vue目录，vue目录下新建app.js文件

app.js文件如下：

export default {
    template:` <div>
      <h2>{{message}}</h2>
    </div>`,
    data()
    {
        return {
            message:'hello world'
        }
    }
}

main.js文件修改如下：

import Vue from 'vue'
import App from './vue/app.js'
const vue = new Vue({
    el:'#app',
    template:'<App/>',
    components:{
        App
    }
})

这样vue中代码更加清晰简洁，但是app.js中dom元素和js代码的层次不够清晰。

vue component提取

在vue目录下新建vue component文件App.vue

App.vue如下：

<template>
    <div>
       <h2 class='title'>{{message}}</h2>
    </div>
</template>

<script>
export default {
     name: 'App',
     data()
         {
             return {
                 message:'hello world'
             }
         }
};
</script>

<style scoped>
.title{
    font-size:20px;
    color:red;
}
</style>

App.vue文件有三部分<template>标签中放dom元素与app.js中的template标签对应，<script>标签中放data()函数等，<style>标签中放样式。

main.js修改如下：

import Vue from 'vue'
import App from './vue/App.vue'
const vue = new Vue({
    el:'#app',
    template:'<App/>',
    components:{
        App
    }
})

通过命令安装所需要的loader

npm install --save-dev  vue-loader vue-template-compiler

重新打包，报错，没有合适的vue-loader，怀疑是vue-loader版本问题，在package.json中修改vue-loader的版本为 "vue-loader": "^13.7.3" ，运行命令 npm install 重新安装。

安装完成后，npm run build 重新打包，效果如下。

 

周达
关注
专栏目录
Vue-组件化
Sunshine的博客
02-28 913
Vue-组件化一、定义vue组件二、 全局组件定义的三种方式1、使用vue.extend 来创建全局的vue组件2、直接创建3、在外部定义template 结构三、定义私有的组件四、组件中的data 传值 以下均为自用学习笔记 一、定义vue组件 什么是组件，组件的出现是为了拆分vue实例的代码量的，能够让我们以不同的组件来划分不同的功能模块，将来我们需要什么样的功能就可以去调用什么样的组件即可。 组件化和模块化的不同： 模块化：从代码逻辑的角度进行划分；方便代码分层开发，保证功能模块职能单一 组件化：
Vue组件化的基本使用
46054543的博客
02-08 103
效果图： 组件化的使用步骤： 1、创建组件构造器对象 2、注册组件 3、使用组件 核心代码如下： <body> <div id="app"> <my-cpn></my-cpn> <my-cpn></my-cpn> </div> <script src="../Vue_js/vue.js"></script> <script> //创建组件构造器模板 con
vue组件化的基本使用
weixin_42349568的博客
09-29 174
一，创建好各个组件 二，在根组件中使用： <template> <div > <my-addition></my-addition> </hr> <my-subtraction></my-subtraction> </div> </template> <script> //导入两个组件 import Addition from './components
Vue中组件化的基本使用
qq_41138726的博客
11-17 197
注册组件的步骤： 1.创建组件构造器 2.注册组件 3.使用组件 <body> <!-- <cpn> <h2>我是标题</h2> <p>我是内容，哈哈哈哈哈</p> <p>我是内容，呵呵呵呵呵</p> </cpn> --> <div id="app"> <!-- //
Vue 组件化及基本使用
Mark
07-11 547
目录 1、组件化是啥 2、注册组件的基本步骤 3、组件化的基本使用 4、组件之间的切换 1、组件化是啥 如果将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。但如果将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。 Vue 组件化思想：组件化是 Vue.js 中的重要思...
可视化大屏 Vue3 版本vue-big-screen-plugin-master.zip
最新发布
04-04
Vue3版的`vue-big-screen-plugin-master.zip`是一款专为数据可视化大屏设计的插件，基于最新的Vue3框架构建，旨在提供高效、灵活且易用的解决方案，帮助开发者快速搭建大规模数据展示平台。该插件的核心特点是充分...
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
10-18
在home.vue组件中，我们主要通过实例代码来学习Vue中的指令以及如何使用它们进行数据绑定。Vue的指令是一种特殊的前缀，通常附加到DOM元素上，并对元素进行一些操作。例如，v-for指令用于基于源数据多次渲染一个元素...
基于Vue2-Calendar改进的日历组件（含中文使用说明）
10-17
本文将详细介绍一个基于Vue2-Calendar组件进行改进的日历组件，该组件在原版基础上进行了多项优化，以满足更多样化的使用需求。首先，让我们了解一下Vue2-Calendar的基础知识。 Vue2-Calendar是一款适用于Vue.js...
vue-admin-beautiful是一款绝佳的前端开发框架-javascript
06-21
Vue.js 的核心特性包括声明式渲染、组件化、虚拟DOM、响应式数据绑定以及易于上手的API。Vue-admin-beautiful则在此基础上，提供了丰富的预设组件和布局，如导航菜单、表格、图表、表单元素等，大大减少了开发工作量...
vue-admin-template-master.zip
02-21
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、易用性和高性能著称。Element-UI 是基于 Vue.js 的一套企业级 UI 组件库，提供了丰富的界面元素和设计模式，便于快速构建美观且功能齐全的后台管理系统。...
深入理解Vue.js轻量高效的前端组件化方案
10-17
主要介绍了深入理解Vue.js轻量高效的前端组件化方案 ,需要的朋友可以参考下
Vue基础入门（vue组件化的使用和vue-cli组件化的使用）
weixin_44011306的博客
07-07 423
vue组件化的使用和vue-cli组件化的使用效果展示不使用用组件化使用组件使用vue-cli 效果展示 输入数字后点击提交自动生成一列显示输入内容，点击该列该列消失 不使用用组件化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src=vue.js></
一眼看完Vue组件化的使用以及理解
龚建华的博客
05-01 362
1.组件化出现的原因 1.项目复杂度增加, 一个页面一个文件需要处理的内容过多. 2.重复性劳动多, 效率低 3.质量差, 不可控 1.1 最早的处理方式 1.jQuery 有 jQuery 插件机制. 你可以将一些常用逻辑进行封装变成 jQuery 插件, 还可以将插件开源进行共享. $(".select").pluginName(config) 2.利用对象模式，对象模式通...
vue组件化
weixin_45663697的博客
08-31 138
一、vue组件化 1. JavaScript高级函数的使用 filter函数的使用 返回的必须是一个Boolean值 const nums = [10, 20, 112, 430, 34, 50]; let newNums1 = nums.filter(function (n){ return n < 100; }); console.log(newNums1); // [10, 20, 34, 50] map函数的使用 const newNums1 = [10, 20, 34
Vue组件化理解与使用
不停
02-12 492
文章目录一 Vue组件化1. 组件使用的三个步骤2. 全局组件（多个Vue实例中可用）3. 局部组件（只在自身Vue实例可用）4. 父子组件（组件中复用组件）5. 语法糖注册组件6. 模板分离7. 组件数据存放8. 父子组件通信-父传子9. 父子组件通信-子传父 一 Vue组件化 应用会被抽象成一棵组件树 1. 组件使用的三个步骤 创建组件构造器 Vue.extend() 注册组件 Vue.co...
vue 基础 组件化的基本使用
qq_45494569的博客
03-14 111
vue 组件化 一、vue组件化的基本使用 <div id="app"> <!-- 3.使用组件 --> <my-cpn></my-cpn> <my-cpn></my-cpn> <my-cpn></my-cpn> <my-cpn></my-cpn> </div> <scr
Vue之组件化开发和vue接口调用
weixin_45651869的博客
08-19 2005
标题1 组件注册 全局组件注册Vue.component 示例代码： Vue.component('my-cart',{ data:function(){ return {返回的是组件中使用的数据} }, template:`<h1>这是组件的模板结构</h1>` }) 参数分析： data：必须是一个带有return返回值的函数，return返回的是一个对象，对象中是template模板中要使用的数据 template模板：使用模板字符串包裹比较好，里面是组
如何使用VUE做组件化开发 -- 思考篇
weixin_30682127的博客
03-30 215
技术学习并不难，如何使用才是关键 用VUE 开发已经快一年的时间了，在感叹webpack+vue+vuex+vue-router全家桶为开发带来的便捷，同时也回到最初的技术选择问题上。 为什么要选择VUE？ 　　因为像作者说的那样，vue是一个轻量型的前端MVVM框架，更快的虚拟DOM渲染？ 　　然而实际开发中并没有遇到很大的数据渲染（1000以上的都没有），在形式上看来，VUE的数据绑定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值