js打印插件_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，原因是ShadowDOM
        data () {
            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官方文档。