CocosCreator3D插件教程(11)：在插件面板中使用Vue

到目前为止，我们已经知道，creator插件面板的编写，使用的是web前端技术。

在web领域Vue是最受欢迎的构建用户界面的框架之一。

creator2d插件中我们是可以直接使用vue，但是creator3d插件并没有提供。

那么在creator3d插件里面，我们如何使用Vue呢？

1. 下载vue

这里我们不使用npm的方式使用vue，我们直接下载vue的构建文件：

我下载的是vue.js，当然你也可以下载压缩版本vue.min.js。

下载后，放到我们的插件项目里面：

2.插件里面使用Vue

vue的本质还是一个js library，所以，我们直接require即可使用。

我们在panel.js中添加如下代码：

exports.ready = function () {// ...let Vue = require('./vue');
}

那么我们该如何将Vue绑定到UI上呢？web老司机肯定对下面的代码非常熟悉：

panel.html

<div id="app"><button @click="onBtnClick">按钮button>
div>

panel.js

// ...
exports.$ = {app: '#app'
}
exports.ready = function () {let Vue = require('./vue');new Vue({el: this.$.app, // 注意这里，没有不能使用#app，原因是ShadowDOMdata () {return {}},created () {console.log('created');},methods: {onBtnClick () {console.log('点击按钮')}}});
}

以上代码，和之前教程给按钮绑定点击事件，效果一样。

我们重新加载下插件，点击按钮，同样的会在编辑器控制台打印点击按钮的log。

3.Vue的数据绑定

数据绑定，让我们更专注逻辑开发，vue会自动根据数据，同步视图。

这里总结了一些常用的小知识点，web老司机可以直接忽略：

• 给元素绑定数据：v-bind:可以简写为:

  <input v-bind:value="name"/>
  

  <input :value="name"/>
  

  new Vue({// ...data(){return {name:'hello'};}
  })
  

  当然我们还可以给界面这样绑定文本数据

  <div>{{name}}div>
  

• 给元素绑定事件：v-on:可以简写为@

  <button @click="onBtnClcik">button>
  

  <button v-on:click="onBtnClcik">button>
  

  new Vue({// ...methods:{onBtnClcik(){// todo }}
  });
  

以上的小总结，足够让你编写一个功能复杂的小插件，vue还有更多简单易学的特性等待着你学习，更多vue的使用请参考vue官方文档。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！