来自Vue Docs:
在 Vue.js 中,每个 Vue 实例都是一个 ViewModel。
在阅读了很多关于 MVC、MVP 和 MVVM 等设计模式的文章后,我对此有点困惑。
我们都知道,在 Vue 实例或 Vue 组件(也是 Vue 实例)中,我们有<template>, 使用基于 HTML 的语法。这部分不是 MVVM 中的视图吗?
并且有data(),computed在 Vue 组件中。它们不是 MVVM 中的模型吗?
下面是一个Vue SFC的结构,我把它分为Model、View和ViewModel。如果它有什么问题。请帮助我纠正这个问题,并帮助我在使用基于 MVVM 的 JavaScript 框架时更多地理解 MVVM。
<template>
<!-- the template part should be the View in MVVM since they don't contain any business logic but only the UI components. Which perfectly match the description of the View in MVVM.--> …Run Code Online (Sandbox Code Playgroud) 我是 VueJS 的新手,现在想用 Vue JS 重写我的纯 Javascript SPA 的一部分(仅用于培训和学习)。我使用 Vue-CLI 创建了我的项目。现在这是我的文件结构的一部分:
---src
|---assets
|---logo.png
|---components
|---loadXML.vue
|---table01.vue
|---table02.vue
|---static
|---ABC.xml
|---app.vue
Run Code Online (Sandbox Code Playgroud)
我最近在这个问题上苦苦挣扎:
我想将本地存储的 xml 文件(在静态文件夹中)加载并读取到 Vue 实例中,然后解析它并对其进行一些编辑。
在我的普通 Javascript 中,通过使用以下方法可以非常简单地做到这一点:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
var xmlDoc = this.responseXML;
}
}
xhttp.open('GET', 'ABC.xml', true);
Run Code Online (Sandbox Code Playgroud)
我可以做我需要做的一切xmlDoc
但在 Vue JS 中,我发现加载和读取(解析)xml 文件非常困难,即使我搜索了很多,我也找不到正确的方法来清理它。我已经尝试过以下方法:
(1)通过使用import直接将本地xml文件导入到Vue中:
import xmlFile from '../static/ABC.xml'
Run Code Online (Sandbox Code Playgroud)
因为我可以使用以下命令直接导入本地json文件:
import jsonFile from '../static/XYZ.json'
Run Code Online (Sandbox Code Playgroud)
但 …
我正在尝试将 Vuetify 实施到现有项目的一部分。但是在我将 Vuetify 添加到项目之后。我发现类似输入字段的“默认”CSS 样式,选择已更改。它使那些输入字段和选择看起来像纯文本而不是输入字段和选择。
因为我只想为项目的一部分实现Vuetify,所以Vuetify覆盖“默认”CSS规则是不好的。
我正在寻找一种方法来为现有项目的一部分实现 Vuetify。但是项目的其余部分应该正常呈现(仅使用默认 CSS,而不是我自己的 CSS)。
为了使 Qustion 更加清晰,我将举一个例子来显示两个选择。第一个是用 Vuetify 制作的,<v-select>第二个是用普通的 HTML 代码制作的<select>
我已经尝试为输入字段设置自定义 CSS 规则,并在 Vuetify Script 和 Vuetify CSS 链接之后选择。但是 Vuetify 仍然覆盖我的自定义 CSS 样式。
HTML 部分:
<div id="app">
<div>Vuetify select:</div>
<v-select
:items="items"
>
</v-select>
<hr/>
<div>
<div>Normal select:</div>
<select>
<option value="0">test1</option>
<option value="1">test2</option>
<option value="2">test3</option>
</select>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
JS部分:
new Vue({
el: '#app',
data() {
return {
item: null,
items: [
{
text: "a"
},
{
text: …Run Code Online (Sandbox Code Playgroud)