我需要将 webkitSpeechRecognition 连接到我的 Vue.js 项目（适用于 Chrome）。
我正在尝试将代码插入到组件中
<template>
<div class="voice">
<h1>{{ msg }}</h1>
<button v-on:click="greet">Speak</button>
</template>
<script>
export default {
name: 'voice',
data () {
return {
msg: 'Speak',
}
},
methods: {
greet: function (event) {
}
}
}
</script>
这段代码
var recognition = new (SpeechRecognition || webkitSpeechRecognition || mozSpeechRecognition || msSpeechRecognition)();
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 5;
recognition.start();
recognition.onresult = function(event) {
console.log('You said: ', event.results[0][0].transcript);
};
但我有错误“未定义 webkitSpeechRecognition”
完整代码：https : //github.com/kenpeter/test_vue_simple_audio_1
我附加@onmouseup到input range. 当我拖动滑块时，progressChange似乎没有被调用。
<input
type="range"
:min="0"
:step="1"
v-model="current"
:value="current"
:max="duration"
@onmouseup="progressChange()"
/>
这里是 methods
methods: {
timeChange: function () {
this.current = this.$refs.player.currentTime;
},
getDuration: function () {
this.duration = this.$refs.player.duration;
},
toggleStatus: function () {
var player = this.$refs.player;
this.isPause ? player.play() : player.pause();
this.isPause = !this.isPause;
},
next: function () {
if (this.audioIndex == this.songs.length - 1) {
if (this.repeat) {
this.audioIndex = 0;
}
} else { …我正在尝试创建一个 Leaflet 地图作为 Vue 组件，但我有一些困难的开始。我通过 npm 安装了 Leaflet
我哪里错了？console.log(Leaflet) 正在返回一个 Leaflet 对象，但我无法让地图展开和渲染。
一些方向将不胜感激
<template>
<div id="map"></div>
</template>
<script>
// import leaflet here?
import Leaflet from 'leaflet';
export default {
components: {
Leaflet
},
created() {
console.log(this);
console.log(Leaflet);
},
ready() {
this.map = L.map('map').setView([51.959, -8.623], 14);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
}
}
</script>
<style>
#map {
height: 100%;
width: 100%;
margin-top: -24px;
}
/* default legend, layer styling from leaflet template */
.info {
padding: 6px 8px; …在 Vue 中处理“未编译内容的闪现”时，在页面加载的瞬间（或更多）你看到{{ Mustache }}，我见过有人同时使用v-text和v-cloak。
使用 v-text，文档说：
更新元素的
textContent. 如果需要更新 的部分textContent，则应使用{{ Mustache }}插值。
使用 v 斗篷：
该指令将保留在元素上，直到关联的 Vue 实例完成编译。结合 CSS 规则，例如
[v-cloak] { display: none }，此指令可用于隐藏未编译的 mustache 绑定，直到 Vue 实例准备就绪。
所以听起来如果我不需要更新textContent，我可以使用两者来实现相同的结果。除此之外，v-text和之间有什么区别v-cloak？在隐藏方面，一种比另一种更好{{ Mustache }}吗？
我有 ：
<span class="badge" id="total">10</span>
如果我使用 jquery ：
$('#total').text()
如果使用 vue.js 2 如何获得它？
我正在尝试使用 Vue.js 构建热图表。
我一直在关注为 jquery 制作的这个很棒的教程。
我想避免使用 jquery，并且一切正常，但是我在最后一步遇到了麻烦 $(this).css({backgroundColor:clr});
如何:style为每个单元格只更改一次？现在，一旦它处于循环的最后一个循环，它显然会更改每个单元格的值v-for。
我想创建一个watcher每次更改颜色数据属性时都会看到并运行一个单独的函数，例如changeColour: function(color) {// change css}但我不知道将它应用于哪个单元格。
到目前为止，我有：
一个基本的 html 表：
<tbody v-for="page in json">
<tr>
<td style = 'background-color: #e5e5ff'>
{{page.page_path}} </td>
<td :style="{ 'background-color': sessionColor }">
{{page.sessions}} </td>
<td :style="{ 'background-color': exitColor }">
{{page.exit_rate}} </td>
<td :style="{ 'background-color': bounceClr }">
{{page.bounce_rate}} </td>
<td :style="{ 'background-color': timeClr }">
{{page.avg_time_on_page}} </td>
</tr>
一个具有 4 个颜色属性的 Vue 实例，以及一个负责生成 RGB 值的方法。
在这里，我有完整的jsfiddle，唯一缺少的是V-结合 风格的 …
我怎样才能使用单个文件组件调用父级过滤器。下面是我的代码。
应用程序.js
import computed from '../vue/mixins/computed.js';
import filters from '../vue/mixins/filters.js';
import methods from '../vue/mixins/methods.js';
const app = new Vue({
el: '#app',
mixins:[
computed,
filters,
methods
],
mounted: function() {
}
});
家.vue
<template>
<div class="home-content">
<h3>{{home | uppercase}}</h3>
</div>
</template>
<script type="text/javascript">
export default {
data: function() {
return {
home: 'home'
}
},
mounted: function() {
this.$parent.$options.methods.makeConsole();
}
}
</script>
它在控制台中给我这个警告“无法解析过滤器：大写”
在我的小型 Vue 应用程序中，我试图从另一个方法 (buttonClick) 中使用不同的参数调用相同的方法 (emptyDivision)。我为该方法的第一次调用设置了 5 秒超时，但是当我通过执行 buttonClick 触发这两个函数时，无法识别此延迟。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="buttonClick">Simulate Placement</button>
<h1>Random Division 1</h1>
<p>{{A.One}}</p>
<p>{{A.Two}}</p>
<h1>Random Division 2</h1>
<p>{{B.One}}</P>
<p>{{B.Two}}</p>
</div>
<script type="text/javascript">
new Vue({
'el': '#app',
'data': {
'A': {'One': "", 'Two': "" },
'B': {'One': "", 'Two': "" },
'Division1': ["Steelers", "Ravens"],
'Division2': ["Broncos", "Raiders"],
},
'methods': {
'emptyDivision': function(division){
this.A[division] = this.popTeam(division)[0];
this.B[division] = this.popTeam(division)[0];
},
'popTeam': function(division) {
if (division === "One"){
return …我有一个 Vue 实例。
var myApp = new Vue({
el: '#my-App',
data: {
user: sessionStorage.getItem('user')
},
components: {
'header-component': httpVueLoader('./components/header-component.vue'),
'footer-component': httpVueLoader('./components/footer-component.vue')
}
});
和单个文件组件 header-component
<template>
<li v-if="user !== ''" class="nav-item">
<a class="nav-link" v-on:click="openProfilePage" href="#">{{user}}</a>
</li>
</template>
<script>
module.exports = {
data: function () {
return {}
},
props: ['user'],
methods:
{
openProfilePage: function () {
if (userName !== '') {
myApp.page = 'profile';
sessionStorage.setItem('page', 'profile');
page = 'profile';
}
else {
myApp.page = 'login';
sessionStorage.setItem('page', 'login');
page = 'login'; …我在将.scss新页面模板 vue导入到与主 scss 文件不同的全新页面模板时遇到了问题。我找到了这个链接，但我的新样式仍然不起作用。顺便说一句，我使用的是laravel 5.4。
新的 vue 组件：
<style lang="scss" scoped>
@import "~sass/new"; //new scss file from resources/sass directory
</style>
我想我想念要安装的库或什么。任何帮助将非常感激。