Vue-组件化开发

VUE vue
创建时间:
字数:1.8k 阅读:
  1. 组件化开发
    1. 概念

组件化开发

概念

  • 组件化开发就是将视图进行抽取,封装为一个可以重复使用的模块,提高了代码效率,增强可维护性.

举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<body>
    <div id="app">
        <conponet-b></conponet-b>
        <conponet-a></conponet-a>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        <!--组件名
            1, 驼峰,横线分隔符命名方式
            2, 使用组件时必须采用横线分割方式引用
        组件可以理解为特殊的Vue实例, 不需要手动实例化   
        -->
        Vue.component('conponet-a',{
            template: '<p>我是全局组件-->{{name}}</p>',
            data:function () {
                return {
                    name: "Xiaox"
                }
            }
        })
        var vm = new Vue({
            el: "#app",
            components:{
                // key:value key是组件名称value是组件对象
                'conponet-b': {
                    template: "<p>我是局部标签-->{{name}}</p>",
                    data: function () {
                        return {
                            name: 'Sron'
                        }
                    }
                }
            }
        })
    </script>
</body>

多组件示例

header.js

1
2
3
Vue.component('app-header',
    { template: "<div class=\"header\">头部</div>" }
    )

footer.js

1
2
3
Vue.component('app-footer', {
            template: '<div class="footer">尾部部</div>'
        })

content.js

1
2
3
Vue.component('app-content',
    { template: '<div class="content"> <ul> <li>菜单1</li> <li>菜单2</li> <li>菜单3</li> </ul> </div>' }
    )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <div id="app">
        <app-header></app-header>
        <app-content></app-content>
        <app-footer></app-footer>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="componet/header.js"></script>
    <script src="componet/content.js"></script>
    <script src="componet/footer.js"></script>
    <script>
        var vm = new Vue({
            el: '#app'
        })
    </script>
</body>

项目实例

  • 目录结构
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     $ tree .
    .
    ├── components
    │   ├── app.js
    │   ├── appLeft.js
    │   ├── appNavBarr.js
    │   └── home
    │       ├── AppHome.js
    │       ├── dashboard.js
    │       └── homeList.js
    ├── index.html
    ├── main.js
    ├── news.html
    └── style
        ├── bootstrap.min.css
        └── dashboard.css

    3 directories, 11 files
  • 详细代码展示
    • AppHome.js
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      ;(function () {
          const template = `        
              <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
      			
      			<!--右边上半区域-->
                <h1 class="page-header">Dashboard</h1>
                  <dashboard></dashboard>
      			<!--右边下半区域-->
                <h2 class="sub-header">Section title</h2>
                  <home-list></home-list>
                
              </div>`
          window.AppHome = {
              template,
              components: {
                  Dashboard,
                  homeList
              }
          }
      })()
    • dashboar.js
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      ;(function () {
          window.Dashboard = {
              template: ` <div class="row placeholders">
                  <div class="col-xs-6 col-sm-3 placeholder">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Label</h4>
                    <span class="text-muted">Something else</span>
                  </div>
                  <div class="col-xs-6 col-sm-3 placeholder">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Label</h4>
                    <span class="text-muted">Something else</span>
                  </div>
                  <div class="col-xs-6 col-sm-3 placeholder">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Label</h4>
                    <span class="text-muted">Something else</span>
                  </div>
                  <div class="col-xs-6 col-sm-3 placeholder">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Label</h4>
                    <span class="text-muted">Something else</span>
                  </div>
                </div>`
          }
      })()
    • HomeList.js
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      ;(function () {
          window.Dashboard = {
              template: ` <div class="row placeholders">
                  <div class="col-xs-6 col-sm-3 placeholder">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Label</h4>
                    <span class="text-muted">Something else</span>
                  </div>
                  <div class="col-xs-6 col-sm-3 placeholder">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Label</h4>
                    <span class="text-muted">Something else</span>
                  </div>
                  <div class="col-xs-6 col-sm-3 placeholder">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Label</h4>
                    <span class="text-muted">Something else</span>
                  </div>
                  <div class="col-xs-6 col-sm-3 placeholder">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                    <h4>Label</h4>
                    <span class="text-muted">Something else</span>
                  </div>
                </div>`
          }
      })()
    • app.js
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      ;(function () {
          const template = `	<!--头部导航区域-->
      	<!--必须要有一个根元素, 有且仅有一个，下面添加div标签-->
      	<div>
             <app-navbar></app-navbar>
      	
      	<!--核心区域:分左右两边-->
              <div class="container-fluid">
            <div class="row">
      		
      		<!--左边菜单栏区域-->
              <app-left></app-left>
      			
      		<!--右边主页面区域: 分上下两个区域-->
                <app-home></app-home>
                </div>
                </div>
          </div>`
          window.App = {
              template,
              components: {
                  AppNavbar, //等价于AppNavbar:AppNavbar ,AppNavbar在appNavBarr.js中引入
                  appLeft,
                  AppHome,
              }
          }
      })()
    • appLeft.js
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      ;(function () {
          window.appLeft = {
              template: `<div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                  <!--<li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>-->
                  <li @click="currentActive(item)" :class="{active: current === item}" v-for="item in top"><a :href="item.url">{{item.name}}</a></li>
                </ul>
                <ul class="nav nav-sidebar">
                  <li @click="currentActive(item)" :class="{active: current === item}" v-for="item in middle"><a :href="item.url">{{item.name}}</a></li>
                </ul>
                <ul class="nav nav-sidebar">
                  <li @click="currentActive(item)" :class="{active: current === item}" v-for="item in bottom"><a :href="item.url">{{item.name}}</a></li>
                </ul>
              </div>`,
              data(){
                  return {
                      top:[
                          {name:'Overview',url:'#'},
                          {name:'Reports',url:'#'},
                          {name:'Analytics',url:'#'},
                          {name:'Export',url:'#'},
                      ],
                      middle:[
                          {name:'Nav item',url:'#'},
                          {name:'Nav item again',url:'#'},
                          {name:'RepOne more navorts',url:'#'},
                          {name:'Another nav item',url:'#'},
                          {name:'More navigation',url:'#'},
                      ],
                      bottom: [
                          {name:'Nav item again',url:'#'},
                          {name:'One more nav',url:'#'},
                          {name:'Another nav item',url:'#'},
                      ],
                      current: top[1]
                  }
              },
              methods:{
                  currentActive(item){
                      this.current = item
                  }
              }
          }
      })()
    • appNavBar.js
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      // 自执行函数
      ;(function () {
          window.AppNavbar = { // template: 为反单引号' ` ',用于杜航引入
              template: ` <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">{{ProjectName}}</a>
              </div>
              <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                  <li><a href="#">Dashboard</a></li>
                  <li><a href="#">Settings</a></li>
                  <li><a href="#">Profile</a></li>
                  <li><a href="#">Help</a></li>
                </ul>
                <form class="navbar-form navbar-right">
                  <input type="text" v-on:blur="searchFun" class="form-control" placeholder="Search...">
                </form>
              </div>
            </div>
          </nav>`,
                        data(){
                            return {
                                ProjectName:"XiaoXin"
                            }
                        },
                        methods: {
                            searchFun() {
                                alert('For search')
                            }
                        }
                  }
      })()
    • main.js
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      var vm = new Vue({
                el: '#app',
                // Vue的实例中引用了组件后, 会将这个组件的渲染结果替换掉"#app"中的元素
                // <app></app>模板中已经存在一个根元素div标签，为了不会和入口处div标签重复
                // 就可以通过template属性后面的值代替
                template: '<app></app>',
                components: {
                    App
                }
            })
    • index.html
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
       $ tree .
      .
      ├── components
      │   ├── app.js
      │   ├── appLeft.js
      │   ├── appNavBarr.js
      │   └── home
      │       ├── AppHome.js
      │       ├── dashboard.js
      │       └── homeList.js
      ├── index.html
      ├── main.js
      ├── news.html
      └── style
          ├── bootstrap.min.css
          └── dashboard.css

      3 directories, 11 files
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com

赏

文章标题:Vue-组件化开发

文章字数:1.8k

本文作者:Aaron

发布时间:2019-12-08, 23:42:05

最后更新:2019-12-14, 10:10:04

原始链接:http://blog.linuxerbulo.com/2019/12/08/Vue-%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

©2019-2020 Aaron

Built with Hexo and 3-hexo theme

目录
×

喜欢就点赞,疼爱就打赏