Vue入门五、组件化开发

最新推荐文章于 2024-01-09 00:04:18 发布
最新推荐文章于 2024-01-09 00:04:18 发布
阅读量81 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://blog.51cto.com/12012821/2398230
版权

创建组件的两种方式：

1、局部组件声明、注册和使用：

方法一(推荐)、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
    // 局部组件声明
    var myHeader = {
        template: `
        <div>我的头可不是面团捏的</div>
        `
    }
    new Vue({
        el: '#app',
        // 组件注册
        components: {
            myHeader
        },
        // 组件使用
        template: `
            <div>
                <myHeader></myHeader>
            </div>
            `
    })
</script>
</body>
</html>

方法二、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
    // 局部组件声明
    // var myHeader = {
    //     template: `
    //     <div>我的头可不是面团捏的</div>
    //     `
    // }
    var myHeader = Vue.extend({
        template: `
            <div>我的头可不是面团捏的</div>
        `
    })
    new Vue({
        el: '#app',
        // 组件注册
        components: {
            myHeader
        },
        // 组件使用
        template: `
            <div>
                <myHeader></myHeader>
            </div>
            `
    })
</script>
</body>
</html>
2、全局组件的使用：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
    // 组件声明加注册
    Vue.component('myFoot', {
        template:`
            <div>我没有尾巴</div>
        `
    })
    new Vue({
        el: '#app',
        template: `
                <div>
                    <!--组件的使用-->
                    <myFoot></myFoot>
                </div>
            `
    })
</script>
</body>
</html>

转载于:https://blog.51cto.com/12012821/2398230

weixin_34121304
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue——组件化开发
鹿蹊zz的博客
08-09 2172
我们在复用组件的时候肯定希望，各自组件用各自的变量，如果确实需要都用一样的，可以全局组件注册，也可以是用vuex来进行状态管理。注意：组件就是一个vue实例，vue实例的属性，组件也可以有，例如data、methods、computed等。的count是各自用各自的，像局部变量一样有块级作用域，这个块级就是vue组件的作用域。​ 父组件访问子组件，有时候需要直接操作子组件的方法，或是属性，此时需要用到。​ 组件的思想是复用，定义组件当然是把通用的公共的东西抽出来复用。并不保证顺序，也不是响应式的。...
vue组件化开发
m0_62351236的博客
02-07 1191
一般我们在面试的时候面试官通常会问以下问题 你封装过组件吗？ 说一下组件封装？ 你在项目中是如何封装组件的？ … 而我的回答： 我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多
vue的组件化开发
最新发布
蔡里都傻的博客
01-09 657
单文件组件需要写在vue文件中，所以浏览器是不能直接解释的，需要在vue-cli脚手架中把vue文件解析成html,css,js文件。多个组件可以放在同一个文件中，也可以一个组件放在一个文件中（实际开发一般选单文件组件），这里先说多个组件放在同一个文件中，后面再讨论单文件组件。vue的组件是一个可以重复使用的Vue实例，与new Vue的使用方式接近，但是有一定的区别。定义在子组件的props中的属性可以接收到父组件的值，注意不要在子组件中改变props的属性的值，因为父组件刷新时会覆盖这个值。
VUE 前端中如何进行组件化开发？
kalvin_y_liu的博客
06-10 1209
我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次，这个层次就叫做视图层。Vue 的核心库只关注视图层 图1： dom对象树结构 图2：DOM和CSS 一起呈现a、html写构架b、css装饰c、js交互讲到JQuery，就不得不说到JavaScript的DOM操作了。如果你用JQuery来开发一个知乎，那么你就需要用JQuery中的各种DOM操作方法去操作HTML的DOM结构了。a、有声明式b、响应式的数据绑定c、组件化的开发d、Virtual DOM因为Vue.js有声明式
Vue基础知识总结 4：vue组件化开发
热门推荐
学Java，找哪吒
07-21 1万+
一、函数式编程 1、函数式编程简介 函数式编程是种编程方式，它将电脑运算视为函数的计算。函数编程语言最重要的基础是λ演算（lambda calculus），而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。 和指令式编程相比，函数式编程强调函数的计算比指令的执行重要。 和过程化编程相比，函数式编程里函数的计算可随时调用。 filter函数自动过滤对象的所有元素，返回true才会存入指定对象； Reduce函数对数组内部的所有元素进行汇总； 2、代码实例 <!DOCTYPE
Vue组件化开发
weixin_43370373的博客
07-21 56
组件 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素，封装可重用的代 组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树： 组件注册 全局注册 Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象 全局组件注册后，任何vue实例都可以用 <div id="example"&gt
Vue组件式开发
m0_47323674的博客
12-14 394
Vue组件
Vue 组件化开发
每天都要努力学习哦~~
12-07 3539
模块化(组件化)开发 按照功能(或按照复用性)把一个页面拆成各个板块(模块),每一个模块都是一个单独的文件(单独的组件)，最后把各个模块(组件)拼在一起即可！！ 目的 :方便团队协作开发 实现复用 组件分类 功能型组件「UI组件库中提供的一般都是功能型组件:element/iview/antdv/vant/cube..」 + 一般UI组件库提供的功能组件就够用了 + 偶尔UI组件库中不存在的，才需要自己封装「难点」 + 我们经常会把功能型组件进行二次封装（结合自己项目...
二、vue组件化开发（轻松入门vue）
莫安逸无风雪
04-15 2655
二、vue组件化开发（轻松入门vue） Vue组件化开发五、组件化开发1. 组件注册组件命名规范组件注册注意事项全局组件注册局部组件注册2. Vue调试工具下载3. 组件间数据交互父组件向子组件传值props传递数据原则：单向数据流。子组件向父组件传值非父子组件之间传值4. 组件插槽基本用法具名插槽用法作用域插槽 组件化思想：标准、分治、重用、组合 组件 (Component) 是 Vue.js...
Vue. js 六、组件化开发（一）
weixin_47863686的博客
02-27 208
组件化思想 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。 有了组件化的思想，我们在之后的开发中就要充分的利用它。 尽可能的将页面拆分成一个个小的、可复用的组件。 这样让我们的代码更加方便组织和管理，并且扩展性也更强 组件的使用分成三个步骤： 1.创建组件构造器 2.注册组件 3.使用组件 <div id='app'> <!-- 3.使用组件 --> <my-cpn></my-cpn> <my
vue组件化开发简单实例(上)
Sobered的博客
06-25 1366
Vue组件化的实现和使用步骤 注册组件的基本步骤 创建组件构造器 注册组件 使用组件 具体实现[最基础的使用]： <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue事件监听练习</title> </head> <script src="./js/vue.js"></script> <body>
Vue——组件化开发DEMO
无限迭代中......
01-25 536
<template> <div> <h2>{{messagea}}</h2> <button @click="btnClicka">按钮</button> <h2>{{namea}}</h2> </div> </temp...
react高阶组件
qq_35757537的博客
09-15 396
react高阶实质上就是一个函数，接收一个组件，返回一个新组件 作用就是实现组件的代码复用 实现一个能获取到当前组件加载耗时的功能 class BoxComp extends PureComponent { componentWillMount() { this.start = Date.now(); } componentDidMount() { console.log((Date.now() - this.start) + 'ms') } render()
Vue 组件开发的几种方式
绿足 博客
12-15 960
aa
Vue入门之组件化开发
大灰狼的小绵羊哥哥的博客
03-20 1433
Vue入门之组件化开发 http://www.jianshu.com/p/6718ab1caa81 组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。前端组件化确实让大的前端团队更高效的开发前端项目。而作为前端比较流行的框架之一，Vue的组件和也做的非常彻底，而且有自己的特色。尤其是她单文件组件开发的方式更是非常方便，而且第三方工具支持也非常丰富，社区也非常活跃，第三方组件也呈井
Vue.js的组件化开发
无笙的博客
04-21 1万+
web中的组件其实就是页面组成的一部分， 好比是电脑中的每一个元件（如硬盘、键盘、鼠标）， 它是一个具有独立的逻辑和功能或界面， 同时又能根据规定的接口规则进行相互融化， 变成一个完整的应用。
如何在vue中实现组件化开发
zayyo的博客
07-29 315
Document </div> <!-- 模板分离 方法一、 --> <script type="text/x-template" id="cpn5"> <div> <h1>标题5</h1> ...
vue组件化开发步骤
m0_67296095的博客
05-06 259
1,建两个vue文件,一个为父组件App.vue , 一个为子组件,子组件用文件夹归类 2.在父组件中通过import引入 import Dog1 from "./components/Dog1.vue"; 3.在vue实例中components配置项注册启用 export default { components: { Dog1, }, }; 4.在template中使用 <template> <div class="my_div">
Vue基础入门到组件开发全指南
- **声明式渲染和组件化**：强调Vue通过模板语言表达状态变化，实现高效且易于维护的组件化开发。 - **开发模式**：包括了本地开发环境的配置和调试工具，如vuedevtools的安装和使用。 2. **Vue入门**： - 比较...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值