我不认为这一定是基于Vue的问题,但我遇到了一些麻烦.

我想在画布上写一个Vue变量.如果删除vue,我的初始代码可以正常工作,但是如果添加vue,画布实际上不会启动.

这是我的密码

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "black";
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);

var v = new Vue({
  el: '#app',
  data: {
    'exampleContent': 'This is TEXT'
  },
  watch: {
    exampleContent: function(val, oldVal) {
      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.fillStyle = "black";
      ctx.font="20px Georgia";
      ctx.fillText(this.exampleContent,10,50);
    }
  }
});

如果我注释掉/* var v = new Vue({ ...,那么最初的一位是有效的.如果我在watcher中记录exampleContent的值,这也会起作用.但画布上有些东西不起作用.

要使用的演示:

推荐答案

请判断这个JSFIDLE:https://jsfiddle.net/mani04/r4mbh6nu/

EDIT:更新为动态文本:https://jsfiddle.net/mani04/r4mbh6nu/1/

我希望用Vue把所有的文字都写进上面的例子中.js

回到您的示例,HTML是:

<div id="app">
    <canvas id="canvas" width="800" height="600"></canvas>
    <input type="text" v-model="exampleContent" />
    <span>{{ exampleContent }}</span>
</div>

Vue.js读取#app中的元素,并将其作为Vue app的模板.因此,您的canvasinputspan元素现在将由Vue重新渲染.当它构造DOM时.

在此过程中,原始画布文本(启动Vue应用程序之前设置的文本)会丢失.

除了像我的JSFIDLE示例中那样使用directive之外,没有明确的方法来解决这个问题.Vue指令帮助您捕获DOM元素.

在我的示例中,我定义了一个名为insert-message的Vue指令,在画布上使用它作为v-insert-message.这允许我捕获DOM元素,然后执行其他步骤:getContextfillText.不需要id,也不需要getElementById的javascript代码.

还有一件事——你的画布太大了,因此你无法看到inputspan个元素.他们在你的例子中也正常工作!

EDIT: example for directive bindings

我刚刚找到了一种使用指令的方法,仍然可以将动态内容写入画布.

判断更新的JSFIDLE:https://jsfiddle.net/mani04/r4mbh6nu/1/

Vue.js相关问答推荐

将Vite Vuejs应用部署到Apache服务器

Vue.js 3 没有组件的实例?

Vuetify 复选框未正确显示值

作为props 传递的原始 ref 的 Vue 3 react 性

Vuetify/Nuxt 生产环境组件在开发环境中无法正常工作

如何在 A-La-Carte 系统中使用 vuetify 加载程序时导入 vuetify/lib

vue 模板中无法识别 pug 语言

在 vuejs 中显示两个组件,但只显示一个,为什么?

Vue Table 2 - 自定义过滤器

使用 Vue Js 运行 Jest 测试时出现语法错误:无法在模块外使用 import 语句

如何在不实例化根实例的情况下使用 vue 组件?

使用 Vue.js 的用户可切换自定义主题

如何禁用 nuxt 默认错误重定向

Vue路由安全

Vuetify Jest 未知自定义元素

使用 refs 聚焦元素目标

用于本地编辑的 Vuex 克隆对象

我应该将所有数据存储在 vuex 状态

Vue.js webpack:如何获取目录中的文件列表?

如何在 Promise 回调中更新 Vue 应用程序或组件的属性?