基本功学习,页面包车型客车区域化与组件封装的贯彻

基本功学习,页面包车型客车区域化与组件封装的贯彻

零件的补益

零件简要介绍

壹、模版指令

透过沙盘指令(写在html中的),就是html和vue对象的粘合剂。

  • 数码渲染 v-text、v-html、{{}}

  <div id="app">
    {{ message }}
  </div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

v-text立异成分的 textContentv-html更新成分的
innerHTML,内容按一般 HTML 插入,不会作为 Vue
模板进行编写翻译。假使想要title: 'TOMVC <sub>2.0</sub>'不以字符串方式显示,就足以使用v-html,
<h2 v-html='title'></h2>

  • 决定模块呈现隐藏 v-if、v-show

  <div id="view">
    <p v-if='isShow'></p>
    <p v-show='isShow'></p>
</div>

new Vue({
    el: '#view',
    data: {
      isShow: true
    }
 });

v-if是直接不渲染该因素; v-show是经过display: none进行隐蔽;

  • 渲染循环列表 v-for
    模板引擎都会提供循环的支持。Vue也不例外,Vue是提供了多少个v-for指令。基本的用法类似于foreach的用法。

    <ul class="view">
        // 遍历数组,取出每个元素
        <li v-for='item in list'>
            {{item.text}}
        </li>
    </ul>

<script>
    var app = new Vue({
        el: '.view',
        data: {
            list: [  // 数组
                {text: '01、HTML'},
                {text: '02、CSS'},
                {text: '03、JavaScript'}
            ]
        }
    });
</script>
  • 事件绑定 v-on

<div id="view4">
    <input type="button" value="按钮" v-on:click='doThis' />
    // 简写
    <input type="button" value="按钮" @click='doThis' />
</div>

<script>
  new Vue({
    el: '#view4',
    methods: {
      doThis: function(){
        alert('hello');
      }
    }
});
</script>
  • 质量绑定 v-bind
    Vue中无法直接行使{{ expression}}
    语法进行绑定html的标签,而是用它特有的v-bind指令,语法<标签 v-bind:属性名="要绑定的Vue对象的data里的属性名"></标签>
    是因为v-bind
    使用特别频仍,所以Vue提供了简要的写法,能够去掉v-bind直接动用:就能够。

<div id="view">
    ![](imgSrc)
    ![](imgSrc)
    <p :class='InfoClass'></p>
</div>

<script>
new Vue({
  el: '#view',
  data: {
    imgSrc: 'm_3_100.png',
    InfoClass: 'infoRed'
  }
});
</script>
  • 体制绑定 v-bind
    对于一般的性质的绑定,只可以用地点的讲的绑定属性的方法。而Vue特意抓好了class和style的性子的绑定。能够有千头万绪的目的绑定、数组绑定样式和类。
    时临时我们须求对体制实行切换,例如:div的来得和隐身,有些标签active等。Vue提供的目的绑定样式的艺术就很容做这一个事情。

  <style>
      .view{
          width: 300px;
          height: 30px;
          border: 1px solid gray;
          line-height: 30px;
          text-align: center;
        }
       .active{  // 使能样式
          color: red;
        }
</style>

// 当isActive为true时,这个div就会添加类名active;当isActive为false时,这个div就会移出类名active;
<div class="view" :class='{active:isActive}'>
    {{message}}
</div>

   var app = new Vue({
      el: '.view', 
      data: {     
           message: 'hello Vue.',
           isActive: false 
       }
   });
  • 双向数据绑定 v-model
    上边的事例基本都是单向的js对象向
    HTML数据开展绑定,那HTML怎么着向js举行汇报数据吧?
    Vue提供了3个新的通令:v-model进行双向数据的绑定,注意不是v-bind。

<div id="app">
    <p>{{ message }}</p>
     // 双向数据绑定
    <input v-model="message">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

当自家用vue写页面包车型客车时候,多量的多少页面渲染,引进组件简化主页面包车型地铁代码量,今世码区域块代码差不离同样期,组件封装会越发简化代码。组件是Vue.js最强劲的功能之一。

组件系统是Vue.js在那之中七个至关心珍视要的定义,它提供了壹种浮泛,让大家得以采取独立可复用的小组件来创设大型应用,大4档期的顺序的施用分界面都得以抽象为多个组件树:

2、Vue组件中首要选拔

Vue的实例是Vue框架的输入,其实也正是前者的ViewModel,它包含了页面中的业务逻辑管理、数据模型等,当然它也许有自个儿的1类别的生命周期的事件钩子,协理大家进行对总体Vue实例生成、编写翻译、挂载、销毁等进度进展js调整。

  • data数据选项,代表vue对象的数额
    创设的Vue对象中的data属性便是用来绑定数据到HTML的,Vue框架会活动监视data里面包车型客车多寡变动,自动更新数据到HTML标签上去。本质原理是:Vue会自动将data里面包车型地铁数目开始展览递归抓换成getter和setter,然后就可以自动更新HTML标签了,当然用getter和setter所以老的浏览器Vue援救的远远不足好。

<div id="app">
    {{ message }}
</div>

var app = new Vue({
    el: '#app',
    data: {  // data数据选项
      message: 'Hello Vue!'
    }
 })
  • methods方法选项,代表vue对象的秘诀
    办法中的 this 自动绑定为 Vue 实例。

<div id="view">
  <input type="button" value="按钮" @click='doThis' />
</div>

<script>
new Vue({
  el: '#view',
  methods: {  // methods方法选项
    doThis: function(){
      alert('hello');
    }
  }
});
</script>
  • computed总计属性
    在做多少的绑定的时候,数据要拓展拍卖现在技巧呈现到html页面上,尽管vue提供了相当好的表明式绑定的秘诀,可是只好应对低强度的须求,此外放入太多的逻辑会让模板过重且难以保证。而测算属性,即属性能够是贰个措施。
    富有 getter 和 setter 的 this 上下文自动地绑定为 Vue
    实例。那就很强劲了,在测算属性中定义的函数里面能够一贯运用指向了vue实例的this。

<div class="view">
   // 计算属性,好处在于会自动根据totalPrice显示不同内容
   {{showStr}}
</div>

var app = new Vue({
  el: '.view', 
  data: {
    totalPrice: 18
  },
  computed: {  // Vue对象的computed属性
    // 计算属性,但该属性是一个方法
    showStr: function(){  
       // this指向vue实例 
      if(this.totalPrice < 20){
        return '金额小于20,没有优惠喔!'
      } else {
        return '金额大于20,免配送费!'
      }
    }
  }
 });
  • watch监听选项,设置了对象的监听方法
    2个目的,键是需求调查的表明式,值是对应回调函数。值也得以是措施名,也许隐含选项的靶子。

  var view2 = new Vue({
    el: '#view2',
    data: {
      a: 1
    },
    methods: {
      doSomething: function(){
        this.a++;
      }
    },
    watch: {
      a: function(newvalue, oldvalue){
        console.log(newvalue, oldvalue);
      }
    }
 });

组件能够增加HTML成分,封装可选拔的代码。在较高层面上,组件是自定义的成分,Vue.js的编写翻译器为它丰盛特殊意义。在稍微境况下,组件也得以是原生HTML成分的样式,以is性子增添。

图片 1

三、Vue实例的生命周期

Vue实例有五个完好的生命周期,相当于从初步创设、开首化数据、编写翻译模板、挂载Dom、渲染→更新→渲染、卸载等一文山会海进度,我们称这是Vue的生命周期。通俗说正是Vue实例从创制到销毁的进度,正是生命周期。

图片 2

Vue实例生命周期.png

Vue提供的可以登记的钩都在上航海用体育场面片的辛酉革命框标明:

  • beforeCreate: 在实例开端化之后,数据观测(data observer) 和
    event/watcher 事件配置此前被调用。
  • created:
    实例已经创办完结以往被调用。在这一步,实例已做到以下的配备:数据观测(data
    observer),属性和艺术的演算, watch/event
    事件回调。然则,挂载阶段还没伊始,$el 属性如今不可见。
  • beforeMount: 在挂载开头此前被调用:相关的 render 函数第1次被调用。
  • mounted: el 被新创立的 vm.$el
    替换,并挂载到实例上去然后调用该钩子。要是 root
    实例挂载了叁个文书档案内成分,当 mounted 被调用时 vm.$el 也在文书档案内。
  • beforeUpdate: 数据更新时调用,发生在编造 DOM
    重新渲染和打补丁从前。
    你能够在这些钩子中国和越南社会主义共和国来越地转移状态,这不会接触附加的重渲染过程。
  • updated: 由于数量变动导致的虚拟 DOM
    重新渲染和打补丁,在那事后会调用该钩子。当以此钩子被调用时,组件 DOM
    已经更新,所以您今后得以施行重视于 DOM
    的操作。可是在多数场馆下,你应有防止在此时期退换状态,因为那或然会招致立异Infiniti循环。
  • beforeDestroy: 实例销毁以前调用,在这一步,实例还是完全可用。
  • destroyed: Vue 实例销毁后调用。调用后,Vue
    实例提示的具有东西都会解绑定,全数的风云监听器会被移除,全数的种子例也会被灭绝。

自个儿用叁个观看软件的图书列表例子:

那正是说怎么着是组件呢?

四、Vue的全局API

  • Vue.nextTick
    在后一次 DOM
    更新循环结束未来实施延迟回调。在改变数据之后即刻利用这个办法,获取更新后的
    DOM。即确认保证操作的DOM已经渲染。

Vue.nextTick(function () {
    // DOM 更新完成,可以操作
})
  • Vue.set
    安装对象的属性。假若目的是响应式的,确认保障属性被创立后也是响应式的,同不时候触发视图更新。这几个办法首要用于避开
    Vue 不能检查评定属性被增多的限量。

  Vue.set( object, key, value )
  • Vue.use
    加载插件

// 导入VueRouter
import VueRouter from 'vue-router';
// 加载插件(全局注册一样)  
Vue.use(VueRouter);
  • Vue. mount
    一经 Vue 实例在实例化前卫未抽出 el
    选项,则它地处“未挂载”状态,未有涉嫌的 DOM
    元素。能够利用Vue. mount 手动地挂载1个未挂载的实例。

  var MyComponent = Vue.extend({
      template: '<div>Hello!</div>'
  });

  // 创建并挂载到 #app (会替换 #app)
  new MyComponent().$mount('#app')
  // 同上
  new MyComponent({ el: '#app' })

书籍显示页
大家能够惦记用vue怎么样落成那些页面包车型客车前端页面达成,再来达成逻辑效率;

零件能够扩充HTML成分,封装可选拔的HTML代码,大家得以将零件看作自定义的HTML成分。

五、组件

零件 (Component) 是 Vue.js 最有力的功用之一。组件能够扩张 HTML
成分,封装可采纳的代码。在较高层面上,组件是自定义成分,Vue.js
的编写翻译器为它丰裕特殊效果。组件其实正是二个持有样式、动画、js逻辑、HTML结构的综合块。

  • 怎么着划分组件

  - 功能模块: select、pagenation...
  - 页面区域划分: header、footer、sidebar...
  • 全局扩张方法Vue.extend
    Vue提供了一个大局的API,Vue.extend能够协理我们对Vue实例实行扩展,扩张完了之后,就可以用此扩充对象创建新的Vue实例了。
    类似于继续的主意。

<script>
// 创建构造器
var Profile = Vue.extend({
    // 新的对象的模板,所有子实例都会拥有此模板
    template: '<p>{{firstName}}  {{lastName}}</p>',
     // 创建的Vue实例时,data可以是Object 也可以是Function,但是在扩展的时候,data必须是一个函数,而且要返回值
    data: function () {  
        return {            
          firstName: '张三',
          lastName: '张二蛋',
       }  
    }
  });

  // 创建 Profile 实例,并挂载到一个元素上
  new Profile().$mount('#mount-point')
  // 或者下面这种写法
  new Profile({
    el: '#mount-point'
  });
</script>
  • 成立贰个组件并登记使用
    Vue提供了贰个大局注册组件的方法:Vue.component。
    采取 Vue.component 来定义全局组件,紧接着用 new Vue({ el:
    ‘#container ‘}) 在种种页面内钦点3个容器成分

<div id="view">
    <!--组件直接跟普通的标签一样的使用-->
    <my-title></my-title>
</div>

// 注册一个组件
Vue.component('my-title', {
    // 模板选项设置当前组件,最终输出的html模板。注意:有且只有一个根元素。
    template: '<div>A custom component!</div>'
})

  // 创建根实例
  new Vue({
     el: '#view'
  })
  • 局地注册组件
    无需在大局注册每一个组件,一时要求登记多少个局地模块。

   <div class="view">
        // 组件在注册之后,便可以在父实例的模块中以自定义元素
       <my-components></my-components>
   </div>

<script>
    var Child = {
        template: '<div>A custom component!</div>'
    }

    //  创建一个Vue实例
    var app = new Vue({
        el: '.view',
        components: {  // 局部注册组件(如果没有局部注册是不能使用的)
            'my-components' : Child
        }
    });
</script>
  • data必须是函数
    经过 Vue 构造器传入的各个选项大许多都足以在组件里用。data
    是3个见仁见智,它必须是函数。

   <div class="view">
       <my-title></my-title>
   </div>

<script>
    // 注册一个全局组件
    Vue.component('my-title', {
        template: '<h1> {{title}} </h1>',
        data: function(){
            return {
                title: 'hello Vue!'
            }
        }
    });

    //  创建一个Vue实例
    var app = new Vue({
        el: '.view'
    });
</script>
  • 单文件组件的运用方法介绍 【项目开荒都会是八个文书对应一个零部件】
    透过地方大家定义组件的点子,就已经感到很伤心了,特别是模板的定义,而且样式怎么管理也未曾很好的进展重新整建。
    Vue能够透过Webpack等级3方工具达成单文件的支出的措施。

  // Hello.vue组件
    <template>
        <h3>
            标题: {{str}}
        </h3>
    </template>

    <script>
        export default {
            data: function(){
                return {
                    str: 'hello Vue!'
                }
            }
        }
    </script>

    <style>
        h3{
            text-align: center;
        }
    </style>

<script>
  // App.vue组件中使用Hello.vue组件
  // 导入Hello组件
  import Hello from './components/Hello';
  export default {
    // ...
    components: {  // 局部注册组件
      Hello
    }
  }
</script>

<template>
   // 使用自定义元素(Hello组件)
  <hello></hello>
</template>

经过vue-cli脚手架结构项目

  • 组件间调用 — components
    倘若要利用某些组件,单纯通过import导入是老大的,还索要通过components展开登记本事应用。

  // App.vue中

  // 导入组件
  import Header from './header'  
  import Footer from './footer'  

  new Vue({
    // 组件需要注册之后才能使用
    components:{
      Header, Footer
    }
  })

  // 在App.vue中
  <header></header>
  <footer></footer>
  • 零件间通讯 — props (父组件给子组件传参)
    零件实例的成效域是孤立的。这意味不可能 (也不应该)
    在子组件的模版内直接引用父组件的数码。要让子组件使用父组件的数额,大家要求通过子组件的
    props 选项。

  // header.vue 子组件
  new Vue({
    props: ['message'],  // 不同组件中的数据操作()
    methods: {
      doThis: function(){  // 子组件获取到父组件传递的参数this.message
        console.log(this.message);
      }
    }
  })

  // props可以其他写法
props:{
    seller:{  // 即是设置接收参数的数据类型
      type: Object,  // 参数的类型
      // default 是设置默认值的
    }
 }

  // app.vue 父组件
  // 将字符串内容'hello world!'传递给子组件
  <header message='hello world!'></header>

  // 绑定data属性值
  // <header :message='title'></header> 
  • 零件间通讯 — 自定义事件(子组件给父组件传参)

  // app.vue 父组件

  // 自定义事件v-on: child-tell-me, 事件名为'child-tell-me'
  <component-b v-on:child-tell-me='getMsg'></component-b>

  new Vue({
    // ...
    methods: {
      // 'child-tell-me'对应触发的方法,即父组件获取子组件传递的参数msg
      getMsg: function(msg){  
        console.log(msg)
      }
    }
})

  // footer.vue 子组件
    new Vue({
    // ...
    methods: {
      // 在sendMsg方法中,即触发'child-tell-me'方法,并传递参数
      sendMsg: function(msg){  
        this.$emit('child-tell-me', '你收到我发送的消息了吗?【componentB】')
      }
    }
})

图片展现的 ‘推荐图书’ 和 ‘最新图书’
的列表显示是同样的,早先能够用重新的代码把先写好的 ‘推荐图书’
的代码复制壹份就可以轻巧完毕 ‘最新图书’ 页面

出于组件的字数异常的大,笔者将会把组件的入门知识分为两篇来上课,那样也造福各位看官们火速消化摄取。

六、Vue路由

对于前端来讲,其实浏览器同盟超级连接就很好的兑现了路由功效。不过对于单页面应用来讲,浏览器和最好连接的跳转格局已经无法适用,
所以各大框架纷繁给出了单页面应用的消除路由跳转的方案。
Vue框架的包容性相当好,可以很好的跟别的第二方的路由框架实行整合。当然官方也付出了路由的方案:vue-router;
建议依然用官方的最棒,使用量也是最大,相对来讲Vue框架的升官路由组件进级也会立即跟上,所认为了将来的维护和提高有利于依然接纳Vue自家的事物最棒。

  • vue-router的安装使用
    一.CDN接二连三方式

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    

    2.npm 安装

    npm install vue-router
    
  • vue-router 入门
    壹.引进vue和vue-router(即使合作npm和webpack的话可以间接当做三个模块导入就可以)

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    

    2.定义路由跳转的零件(或导入组件)

    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    
  • 定义路由规则对象

  // 每个路由path应该映射一个组件
    const routes = [
        {path: '/foo', component: Foo},
        {path: '/Bar', component: Bar}
    ];
  • 成立路由器对象

    // 创建 router 实例,然后传 `routes` 配置
    const router = new VueRouter({  
        routes   // (缩写)相当于 routes: routes,es6的新语法
    });
  • 创造和挂载根实例

    const app = new Vue({
        router
    }).$mount('#app');
  • 模板中编辑路由跳转链接

<div id="app">
      <p>
          <!-- 使用 router-link 组件来导航. -->
          <!-- 通过传入 `to` 属性指定链接. -->
          <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
          <router-link to="/foo">Go to Foo</router-link>
          <router-link to="/bar">Go to Bar</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
</div>

只顾: vue-router@二.x 只适用于 Vue 贰.x 版本。 vue-router@一.x
对应于Vue壹.x版本。
用 Vue.js + vue-router 成立单页应用,是特别轻巧的。使用 Vue.js
,大家曾经能够经过整合组件来组成应用程序,当你要把 vue-router
增添进来,大家须求做的是,将零件(components)映射到路由(routes),然后告诉
vue-router 在哪个地方渲染它们。

图片 3

组件的创建和登记

七、录像学习

比如想要对Vue做进一步的求学,能够查阅摄像课程,后续还也可以有vue进级的实战摄像喔!
vue入门基础

如若其它页面也急需此人作品体现,或笔者想代码特别简洁一点,那么来组件怎样封装就派上台啦

着力步骤

大概页面:图书列表体现页 – 图书列表组件

Vue.js的零部件的选用有一个步骤:创制组件构造器、注册组件和使用组件。

|- book.vue // 图书展示页面
 |-- BookList.vue // 图书列列表组件

图片 4

基础部分相信使用过vue的一同都知道怎么行使,作者直接上代码:

上面包车型地铁代码演示了那一个步骤:

创制七个零件 – 注册组件 – 使用组件

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
      <my-component></my-component>
    </div>
  </body>
  <script src="js/vue.js"></script>
  <script>

    // 1.创建一个组件构造器
    var myComponent = Vue.extend({
      template: '<div>This is my first component!</div>'
    })

    // 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
    Vue.component('my-component', myComponent)

    new Vue({
      el: '#app'
    });

  </script>
</html>
// 引入组件
import BookList from '../../components/bookList/BookList.vue';

// 注册组件
components:{
 BookList,
},

// 使用组件
<book-list></book-list>

运作结果如下:

vue贰.0 规定引进组件提议采纳驼峰命名,使用时用 – 分开,vue才越来越好辨认

图片 5

在此以前没封封装组件的代码就不上传了,直接上代码:

能够看看,使用组件和行使普通的HTML成分都是一样。

书籍列表页 – book.vue

明白组件的创导和挂号

|- book.vue - html 页面
 <template> 
  <div>
  <h2>欢迎来到波波图书馆!</h2>

  <!-- 推荐读书 -->
  <section class="box recommend-book">
   <!-- 大家注意 :books 是BookList.vue组件里图书对象数组 heading 是传给组件的标题 -->
   <book-list :books="recommendArray" heading="推荐图书"></book-list>
  </section>

  <!-- 最新图书 -->
  <section class="box update-book">
   <!-- 大家注意 :books 是BookList.vue组件里图书对象数组 heading 是传给组件的标题 -->
   <book-list :books="updateBookArray" heading="最新图书"></book-list>
  </section>

  </div>
 </template>

大家用以下多少个步骤来驾驭组件的创始和挂号:

本身是仿照数据,开辟进度中是用api接口拿多少的,其实都一律,代码有一点点多,原理都壹致,大家看一下也足以精晓一下json的知识

一.
Vue.extend()是Vue构造器的扩张,调用Vue.extend()创制的是八个零部件构造器,而不是贰个切实可行的零件实例。

|- book.vue - js 
<script>
 import BookList from '../../components/bookList/BookList.vue';
 export default({
  data(){
    return {

    // 推荐图书
    recommendArray:[
     {
      id:1,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-1',
      book_author:'liangfengbo',
     },

     {
      id:2,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-2',
      book_author:'liangfengbo',

     },

     {
      id:3,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-3',
      book_author:'liangfengbo',

     },
    ],

    // 最新图书
    updateBookArray:[
     {
      id:5,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-5',
      book_author:'liangfengbo',

     },

     {
      id:6,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-6',
      book_author:'liangfengbo',

     },
     {
      id:7,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-7',
      book_author:'liangfengbo',

     },
    ],
   }
  },

  // 引入组件
  components:{
   BookList,
  },

  methods : {

  },
 })
</script>



|- book.vue - css
<style>
 *{
  margin: 0;
  padding: 0;
 }
 li{
  list-style:none;
 }
  .box{
  height: auto;
  border-bottom: 1px solid #efefef;
  margin: 10px 0;
  padding: 5px 0;
 }
</style> 

二.
Vue.extend()构造器有一个取舍对象,选项对象的template属性用于定义组件要渲染的HTML。

组件 – BookList.vue

3.
施用Vue.component()注册组件时,必要提供1个参数,第二个参数时组件的竹签,第贰个参数是组件构造器。

|- 组件 - BookList.vue - html
<template>
 <div>
  <!-- 头部 -->
  <!--这个是页面传来的标题 -->
  <h3 class="heading">{{heading}}</h3>
  <!-- 列表 -->
  <article class="book-list">
   <!-- 遍历图书数据 -->
   <li v-for="book in books">

    <router-link :to="{ name:'BookDetail',params:{ id: book.id }}">
     ![](book.img_url) <!-- 图书图片 -->
     {{book.book_name}} <!-- 图书名字 -->
    </router-link>

   </li>   
   </article>
 </div>
</template>
  1. Vue.component()方法内部会调用组件构造器,创制八个组件实例。

  2. 零件应该挂载到某些Vue实例下,不然它不会卓有功用。

|- 组件 – BookList.vue – html

请小心第5点,以下代码在二个地点使用了<my-component>标签,但只有#app1和#app2下的<my-component>标签才起到作用。

<script>
 export default({
  // props 数据传递的意思
  props:[
   'heading',//标题
   'books',//图书对象数组
  ],
  data(){
   return {

   }
  },
  methods : {

  },
 })
</script>
<!DOCTYPE html>
<html>
  <body>
    <div id="app1">
      <my-component></my-component>
    </div>

    <div id="app2">
      <my-component></my-component>
    </div>

    <!--该组件不会被渲染-->
    <my-component></my-component>
  </body>
  <script src="js/vue.js"></script>
  <script>
    var myComponent = Vue.extend({
      template: '<div>This is a component!</div>'
    })

    Vue.component('my-component', myComponent)

    var app1 = new Vue({
      el: '#app1'
    });

    var app2 = new Vue({
      el: '#app2'
    })
  </script>
</html>

|- 组件 – BookList.vue – css

图片 6

<style scoped>
  /*图书列表*/
 .book-list {
  width:100%;
  height:128px;
  display: flex;
  justify-content: space-around;
 }
 .heading {
  border-left: 4px solid #333;
  margin: 10px 0;
  padding-left: 4px;
 }
 .book-list li {
  width:80px;
  height: 100%;
  flex:1;
  margin:0 10px;

 }

 .book-list li img{
  height: 100px;
  width: 100%;
 }
 .book-list li a{
  text-align: center;
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
  width: 100%;
 }
</style>

全局注册和1部分注册

壹体的代码就在此地呀,大家能够细心开掘,组件封装,其实就向大家事先JavaScript函数封装同样,传递参数,接收参数,渲染数据,重复利用,大家能够直接复制代码运营看一下,注释有表明啊。

调用Vue.component()注册组件时,组件的登记是大局的,那象征该器件能够在任性Vue示例下使用。

小干货

比如没有要求全局注册,或然是让组件使用在其余组件内,能够用选项对象的components属性完成部分注册。

父组件 调用 子组件 方法为 :

上面包车型客车言传身教能够改为部分注册的办法:

在子组件上写上名字 如:

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <!-- 3. my-component只能在#app下使用-->
      <my-component></my-component>
    </div>
  </body>
  <script src="js/vue.js"></script>
  <script>
    // 1.创建一个组件构造器
    var myComponent = Vue.extend({
      template: '<div>This is my first component!</div>'
    })

    new Vue({
      el: '#app',
      components: {
        // 2. 将myComponent组件注册到Vue实例下
        'my-component' : myComponent
      }
    });
  </script>
</html>
<start-set-timeout seconds=60 ref="contTimer"></start-set-timeout>

是因为my-component组件是挂号在#app元素对应的Vue实例下的,所以它不可能在其余Vue实例下行使。

调用方法:this.$refs.contTimer.countTime(60)

<div id="app2">
  <!-- 不能使用my-component组件,因为my-component是一个局部组件,它属于#app-->
  <my-component></my-component>
</div>

<script>
  new Vue({
    el: '#app2'
  });
</script>

但是

比如你那样做了,浏览器会提醒一个不当:

因为有多少的延期 平常会油但是生调用子组件的风波出现undefined的职业:

图片 7

TypeError: Cannot read property ‘countTime’ of undefined

父组件和子组件

消除情势是

我们得以在组件中定义并应用别的零件,那就重组了老爹和儿子组件的涉嫌。

// 调用时加一个定时器
setTimeout(() => {
 this.$refs.contTimer.countTime(60)
}, 20)
<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <parent-component>
      </parent-component>
    </div>
  </body>
  <script src="js/vue.js"></script>
  <script>

    var Child = Vue.extend({
      template: '<p>This is a child component!</p>'
    })

    var Parent = Vue.extend({
      // 在Parent组件内使用<child-component>标签
      template :'<p>This is a Parent component</p><child-component></child-component>',
      components: {
        // 局部注册Child组件,该组件只能在Parent组件内使用
        'child-component': Child
      }
    })

    // 全局注册Parent组件
    Vue.component('parent-component', Parent)

    new Vue({
      el: '#app'
    })

  </script>
</html>

以上就是本文的全体内容,希望对我们的就学抱有帮忙,也期望我们多多帮忙脚本之家。

这段代码的运作结果如下:

你恐怕感兴趣的稿子:

  • vue
    封装自定义组件之tabal列表编辑单元格组件实例代码
  • vue
    二.0封装model组件的措施
  • Vue二.0 多
    Tab切换组件的包裹实例
  • vue.js移动端tab组件的卷入实施实例
  • bootstrap
    select插件封装成Vue贰.0组件
  • 依据Vue如何封装分页组件

图片 8

咱们分多少个步骤来精通这段代码:

1.var Child = Vue.extend(…)定义一了个Child组件构造器

二.var Parent = Vue.extend(…)定义一个Parent组件构造器

三.components: { ‘child-component’: Child
},将Child组件注册到Parent组件,并将Child组件的标签设置为child-component。

四.template :'<p>This is a Parent
component</p><child-component></child-component>’,在Parent组件内以标签的情势利用Child组件。

5.Vue.component(‘parent-component’, Parent) 全局注册Parent组件

陆.在页面中利用<parent-component>标签渲染Parent组件的剧情,同有时间Child组件的源委也被渲染出来

图片 9

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图