大佬教程收集整理的这篇文章主要介绍了提前输入 VueJS 的完整经验，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我希望创建一个输入字段，提供关于完成的建议@H_403_2@，例如 VScode“Intellisense”（我认为）或 dmenu 所做的。
我一直在使用 Vue Js 和如下代码：
其中 然而，用户体验 (UX) 并不直观。键入三个字符（如“for”）后，您必须退格才能看到补全。我有 tried a couple of browsers 并且 VueJs 体验很差。然而它works ok without VueJS。 有什么我遗漏的吗？演示：https://dfts.dabase.com/ 也许我需要在 VueJs 中创建自己的下拉 HTML，就像 https://dl.dabase.com/?polyfill=true 中发生的那样？ 此处报告了 Chrome 的性能问题：Is this a Chrome UI perfoRMANce bug related to input + datalist? 将解决方案应用于您的 Vue 代码对于 Chrome 来说效果很好：
Firefox 仍然无法正常工作，因此请参阅下面关于此的原始答案： 我注意到在运行您的代码时出现了很大的延迟，所以我开始稍微摆弄一下，似乎问题出在为大量项目生成数据列表选项。 由于无论如何您只会显示一些结果，因此可以做的是限制渲染选项的数量，然后在添加更多字符时使用过滤器显示更多结果。 这在 Chrome 上运行良好，但在 Firefox 上仍然失败（尽管 Firefox 中存在一个已知问题：https://bugzilla.mozilla.org/show_bug.cgi?id=1474137） 检查一下：
我在纯 JS+HTML 中创建了一个等效的实现。
使用了一种高性能的方式来最小化 DOM 创建时间（创建一个片段，并且只按照 How to populate a large datalist (~2000 items) from a Dictionary 将它附加到 DOM 一次），但它仍然需要很长时间才能响应。一旦它运行良好，但在我的机器上输入“是”后几乎需要一分钟才能响应。 这里是纯 JS+HTML 的实现：
因此，考虑到这一点以及由于错误而导致的 Firefox 经验有限，您应该在没有数据列表的情况下实现自定义自动完成。 为了获得良好的性能，如果列表非常大，您可能无论如何都希望将整个列表保留在 DOM 之外，并在用户更改输入或在列表中滚动时更新它。 以下是使用来自 OP 示例的 API 的现有自定义自动完成示例：https://jsfiddle.net/ywrvhLa8/4/
<script src="https://cdnjs.cloudFlare.com/AJAX/libs/vue/2.5.17/vue.Js"></script>
<div ID="app">
<label>Lookup GeRMAN word:
<input type="text" v-model.trim="word" v-on:keyup="signalChange" v-on:change="signalChange" List="words" autofocus>
</label>
<dataList ID="words">
<option v-for="w in words">${w}</option>
</dataList>
query: ${query} Results: ${words.length} Time taken: ${fetchtimE} ms
</div>
<script>
const app = new Vue({
el:'#app',delimiters: ['${','}'],data() {
return {
ListID:'words',word:'',query:'',words:[],fetchtime: 0
}
},methods: {
async signalChange(){
console.log(this.word)
if (this.word.length > 2 && this.word.slice(0,3).tolowerCase() != this.query) {
this.query = this.word.slice(0,3).tolowerCase()
let time1 = perfoRMANce.Now()
let response = await fetch('https://dfts.dabase.com/?q=' + this.query)
const words = await response.Json()
let time2 = perfoRMANce.Now()
this.fetchtime = time2 - time1
this.ListID="";
this.words = words
setTimeout(()=>this.ListID="words");
}
}
}
})
</script>signalChange 会获取一些完成结果。解决方法
Chrome 上的性能问题
<script src="https://cdnjs.cloudFlare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label>Lookup GeRMAN word:
<input type="text" v-model.trim="word" v-on:keyup="signalChange" v-on:change="signalChange" list="words" autofocus>
</label>
<datalist v-bind:id="listId">
<option v-for="w in words">${w}</option>
</datalist>
Query: ${query} Results: ${words.length} Time taken: ${fetchtimE} ms
</div>
<script>
const app = new Vue({
el:'#app',delimiters: ['${','}'],data() {
return {
listId:'words',word:'',query:'',words:[],fetchtime: 0
}
},methods: {
async signalChange(){
console.log(this.word)
if (this.word.length > 2 && this.word.slice(0,3).toLowerCase() != this.query) {
this.query = this.word.slice(0,3).toLowerCase()
let time1 = perfoRMANce.now()
let response = await fetch('https://dfts.dabase.com/?q=' + this.query)
const words = await response.json()
let time2 = perfoRMANce.now()
this.fetchtime = time2 - time1
this.listId="";
this.words = words
setTimeout(()=>this.listId="words");
}
}
}
})
</script>原答案：
<script src="https://cdnjs.cloudFlare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label>Lookup GeRMAN word:
<input type="text" v-model="word" v-on:keyup="signalChange" list="words" autofocus>
</label>
<datalist id="words">
<option v-for="w in words">${w}</option>
</datalist> Query: ${query} Results: ${fetchedWords.length} Time taken: ${fetchtimE} ms
</div>
<script>
new Vue({
el: '#app',data() {
return {
word: '',query: '',words: [],fetchedWords: [],fetchtime: 0
}
},methods: {
async signalChange() {
if (this.word.length > 2 && this.word.slice(0,3).toLowerCase() != this.query) {
this.query = this.word.slice(0,3).toLowerCase();
let response = await fetch('https://dfts.dabase.com/?q=' + this.query);
this.fetchedWords = (await response.json());
this.words = this.fetchedWords.slice(0,10);
} else if (this.word.includes(this.query)) {
this.words = this.fetchedWords.filter(w => w.startsWith(this.word)).slice(0,10);
} else {
this.words = [];
}
}
}
})
</script>编辑：这只是与 Vue 相关的问题吗？号
let word = '';
let query = '';
const input = document.querySELEctor('input');
const combo = document.getElementById('words');
input.onkeyup = function signalChange(E) {
word = e.target.value;
console.log(word)
if (word.length > 2 && word.slice(0,3).toLowerCase() != query) {
query = word.slice(0,3).toLowerCase();
fetch('https://dfts.dabase.com/?q=' + query)
.then(response => response.json())
.then(words => {
const frag = document.createDocumentFragment();
words.forEach(w => {
var option = document.createElement("OPTION");
option.textContent = w;
option.value = w;
frag.appendChild(option);
})
combo.appendChild(frag);
});
}
}<div id="app">
<label>Lookup GeRMAN word:
<input type="text" list="words" autofocus>
</label>
<datalist id="words"></datalist>
</div>
以上是大佬教程为你收集整理的提前输入 VueJS 的完整经验全部内容，希望文章能够帮你解决提前输入 VueJS 的完整经验所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。