关于html:Vue学习三游戏组件开发

一、步骤一：组件的构建（组件的命名用驼峰命名法，或者短横线分隔命名）

 办法一：extend构建

应用Vue结构器，创立一个“子类”，参数是一个蕴含组件选项的对象，其中,data选项中必须是函数

var author = Vue.extend({

   template: "<p><a :href='url'>{{author}}</a></p>",
  data : function() {
  return {
      author : 'vamous',
      


 办法二：template标签构建法

 template标签构建，需在标签上加id属性用以前期注册

<template id=”myCom”>

<div>这是template标签构建的组件</div>

</template>

办法三：template标签构建法(能够把组件作为独自的一个*.vue文件寄存，用时用import引入）

<template>

<div>这是template标签构建的组件</div>

</template>

<script>

import bus from '../common/bus';
export default {
    data() {
        return {
            collapse: false,
            fullscreen: false,
            name: 'linxin',
            message: 2
        }
    },
    computed:{
        username(){
            let username = localStorage.getItem('ms_username');
            return username ? username : this.name;
        }
    },
    methods:{
        // 用户名下拉菜单抉择事件
        handleCommand(command) {if(command == 'loginout'){
                www.pizei.comlocalStorage.removeItem('ms_username')
                this.$router.push('/login');
 </script>

二、步骤二：组件的注册

(1)全局注册

一次注册，可在多个vue实例中应用，需调用Vue.component()办法，这个办法需传2个参数，第一个参数为组件名称，第二个参数为组件结构时定义的变量。

咱们先用全局注册注册下面例子中创立的myCom组件

Vue.component(‘my-com’,myCom)

还有一种不需构建间接注册的写法——注册语法糖

Vue.component(‘my-com’,{

'template':'<div>这是我的组件</div>'

})

‘my-com’为给组件自定义的名字，在应用时会用到，前面myCom对应的就是下面构建的组件变量。

留神命名标准，个别组件名字以短横线分隔或一个小写单词。
例：footer-nav，footernav

如果是用template及script标签构建的组件，第二个参数就改为它们标签上的id值

Vue.component(‘my-com’,{

template: '#myCom'

})

(2)部分注册

只能在注册该组件的实例中应用

var app = new Vue({

el: '#app',
components: {
    'my-com': myCom
}

})

注册语法糖

var app = new Vue({

el: '#app',
components: {
    'my-com': {
       template: '<div>这是我的组件</div>'
    }
}

})

template及script构建的游戏组件

var app = new Vue({

el: '#app',
components: {
    'my-com': {
       template: '#myCom'
    }
}

})

三、步骤三：组件的应用

咱们只需在须要调用组件的中央写上组件名字的标签即可

<div>

/*调用组件*/
<my-com></my-com>

</div>