我开始使用Vue.js. 我遇到的第一个问题是我的IDE(Atom)没有美化我的.vue文件.这只是白色文字.
如何正确地使Atom突出显示.vue文件？
我试图允许用户从应用程序重置或关闭给定的服务器.我现在在界面上工作,并希望向用户提供有关正在发生的事情的消息.我显示在我的数据对象中定义的消息,以指示所采取的操作.我使用setTimeout切换重置....消息与重置消息.请参阅以下方法.
systemReset: function(){
this.message = this.server + ': Resetting';
setTimeout(function(){
this.message = this.server + ': Reset';
}, 2000);
}
在我的浏览器中,我可以触发此消息,并显示"重置"消息,但不会输出以下"重置"消息.我有格式错误吗？
将此方法放在上下文中是我的整个组件.
<template>
<div>
<p>{{message}}</p>
<button @click="systemReset">Reset Server</button>
<button @click="systemPowerDown">Poweroff Server</button>
</div>
</template>
<script type="text/javascript">
export default{
data: function(){
return{
message: ''
}
},
methods: {
systemPowerDown: function(){
this.message = this.server + ': Server Down';
},
systemReset: function(){
this.message = this.server + ': Resetting';
setTimeout(function(){
this.message = this.server + ': Reset';
}, 2000);
}
},
props: ['server']
}
</script>
Am I …我正在尝试创建一种进度条来跟踪已完成任务的百分比.我想要v-bind:styles并传递它{width:dynamicWidth +'%'}以控制此栏的进度.到目前为止,我已经创建了一个计算变量,它将返回我想要显示的完成百分比,并且我已经在数据对象中设置了我的动态样式
export default{
data: function () {
return {
numQuotes: dataBus.numQuotes,
numberA: 30,
barWidth: {
width: this.barWidthCalculated +'%'
}
}
},
computed: {
barWidthCalculated: function(){
return this.numQuotes * 10;
}
}
}
我还在DOM中添加了一个元素来查看发生了什么.
<div id="trackerBar">
<div id="trackerBarActual" v-bind:style="barWidth">
<h2>{{numQuotes}}/10</h2>
<p>{{barWidthCalculated}}</p>
</div>
</div>
我的栏保持固定在100%,我没有在DOM上看到任何插值.我还在我的数据部分中建立了另一个NUMBER变量,并尝试将其传递给我的width属性,但仍然没有更改,并且没有在DOM上呈现.但是,如果我传递我的样式对象中的任何其他元素,如
color: 'red'
这些变化发生了.如果我直接传递我的样式对象数,即......
barWidth: {
width: 50 +'%'
}
它在DOM上正确显示.
我错过了什么/做错了什么？
使用以下方法“updateCoords”，需要提供“event”参数。下面的 div 跟踪 mousemove 事件并通过方法实时更新光标的 x 和 y 坐标。
<div id="content">
<div @mousemove="updateCoords($event)" style="height:400px;width:400px;border:2px solid black;">
{{x}} {{y}}
</div>
</div>
<script>
new Vue({
el: '#content',
data: {
x: 0,
y: 0
},
methods: {
updateCoords: function(event){
this.x = event.clientX;
this.y = event.clientY;
}
}
})
</script>
如果未传递事件，则此功能不起作用。对我来说，我们会在这里传递一些东西是有道理的，因为 X 和 Y 坐标取决于事件的最后一个位置。但是这些数据是如何存储的呢？事件是否在其自身内跟踪和存储数据？
此外，如果我将特殊的 $event 变量传递给我的方法，似乎也没有区别。打电话...
@mousemove="updateCoords($event)"
//is the same as
@mousemove="updateCoords()"
视图会自动知道传入的事件参数是 $event 吗？还是 $event 在其他特定情况下使用很重要？？