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

42次阅读

共计 1528 个字符,预计需要花费 4 分钟才能阅读完成。

一、步骤一:组件的构建(组件的命名用驼峰命名法,或者短横线分隔命名)

 办法一: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>

正文完
 0