vuejs2 相关问题

我们如何将 Vue JS 与 ASP.NET MVC 和 nuget 包集成

我们如何将 Vue JS 与现有的并与 Nuget Package 一起使用的 MVC 项目集成。 尝试使用以下方法。 ASP.NET MVC 5 中的 VueJS 2 ... 我们如何将 Vue JS 与现有的并与 Nuget Package 一起使用的 MVC 项目集成。 尝试过以下方法。 <h3>VueJS 2 in ASP.NET MVC 5</h3> <div id="aboutPage"> { { message }} </div> <script> var aboutPage = new Vue({ el: '#aboutPage', data: { message: 'Hello Vue! in About Page' } }); </script> 问题： 是否需要任何额外的包，例如 - webpack 或 gulp，我们已经有了 MVC 的捆绑配置？ 2. 我们如何为每个视图创建单独的文件或设计，例如： 分离服务调用（从客户端调用Web api） 分离出模板文件。 用JS编写的方法或逻辑。 任何带有 VueJS 的 MVC 示例 - 控制器、视图、服务、vue JS 文件都很棒.. 非常感谢！ 您可以使用 vuejs 购买并将其添加到您的布局中。 @Scripts.Render("~/node_modules/vue/dist/vue.min.js") 您需要在计算机上安装 Nodejs 才能使用 NPM 和 ES6 功能。 要将 Vue.js 集成到 ASP.NET MVC 中，您需要模块捆绑器（webpack、gulp），可以选择以下选项之一，流行的是 webpack： （Gulp、Browserify），它有一些限制，例如仅支持需要语法处理的资产。而且设置有点复杂。 （Webpack），你可以用它做很多很酷的事情，Hot Reload。 使用 webpack 检查此 repo，您将其配置为仅处理 js 文件，并且它也会处理构建的 js 文件，构建时每个条目将被复制到 Scripts/bundle 中，还需要一些加载器，例如 s (vue、scss 、css 和 js）用于 webpack。 检查这个 Webpack 使用 webpack-dev-server 进行开发，它基本上是一个基于 Node.js 的服务器，它提供我们的浏览器可以解释的资产（javascript、css 等）。通常这些资产包括一些开发友好的功能，例如热重载。这些资产没有被缩小，并且与为生产而构建时生成的资产有很大不同。 devServer: { proxy: { '*': { target: 'http://localhost:5001', changeOrigin: true } } }, webpack-dev-server 有一项功能可以将请求从一个 url 代理到另一个。在这种情况下，来自“webpack dev server”的每个请求都将被代理到您的“ASP.NET MVC 服务器”。因此，如果我们在 http://localhost:5001 上运行 MVC 应用程序并在端口 8086 上运行 npm run dev ，您应该会看到与 ASP.NET MVC 应用程序相同的输出。 答案： 是的，你必须设置 Webpack 或 Gulp。 通过使用 webpack 你可以得到你想要的文件结构 检查这棵树 -应用程序 --库 ----实用程序 - - 成分 ---------公共空间 ---------...... -----页数 ---------..... 查看这些文章： https://medium.com/corebuild-software/vue-js-and-net-mvc-b5cede228626 http://www.lambdatwist.com/dot-net-vuejs/ 如果您想保留 .cshtml 文件并将 MVC 用作多页面应用程序，您可以查看此模板作为示例或起点。 https://github.com/danijeh/aspnetcore-vue-typescript-template 您可以创建要使用 Vue 增强的页面模块并导入该包。

如何将按钮放置在可滚动容器的右下角？ （不能使用包装div）

我有以下代码 我有以下代码 <v-card-text style="min-height: 700px" class="px-6 py-4" > <v-row no-gutters> <v-col> <div v-for="(log, i) in logs" :key="i" > {{ log }} </div> </v-col> <v-btn></v-btn> </v-row> </v-card-text> 我需要在上面的可滚动 div 的右下角放置一个按钮。我设法得到以下结果 我无法用 div 标签包裹它，因为我使用的是 v-dialog 可滚动属性，它不允许用其他标签包裹 v-card-text 。您可以在此处找到演示。 我认为这可以通过使用css位置来实现，也许是粘性的或固定的，但我不太知道该怎么做。 请注意，我使用的是 Vuetify 2，但演示是在 Vuetify 3 游乐场中完成的。 那么，我该怎么做呢？ 按钮是否应该在弹出窗口中滚动？或者它们应该始终可见？ 如果它们总是可见，您可以添加另一个带有 id 或 class 的按钮，然后将其绝对放置在右下角。我已经更新了您的 demo，以便您可以了解如何添加定位。如果它们应该滚动到视图之外，那么您将需要使用 relative 定位。 <v-btn class="chevron-down" color="primary" icon="mdi-chevron-down"></v-btn> ... <style> .chevron-down { bottom: 50px; position: absolute; right: 25px; } </style>

旧版 JS API 已弃用，并将在 Dart Sass 2.0.0 中删除。与 Vue2

我意识到之前已经有人就这个警告提出过类似的问题，但是所提出的解决方案都没有为我解决这个问题，或者适用于我的场景。 我最近升级了...

Vue.js 3 - 没有组件的实例？

在 Vue.js 2 中，可以创建一个没有组件的响应式实例，如下所示： var vue = 新的 Vue({ el: '#root', 数据： { /*... */ }， 方法： { /* ... */ } }) 其实这是...

如何在v-html中运行脚本

我从数据库获取嵌入代码（Instagram、Twitter 等）。如何将它们绑定到 vue 组件？有没有办法在v-html中执行脚本标签？

更改默认根组件

使用cli，我手动创建了Vue 2项目，创建后，我开始进行测试。 我创建了一个简单的组件 testMe，并在 main.js 中更改了默认代码，让该新组件被读取为 root

[Vue warn]：挂载组件失败：模板或渲染函数未定义。发现于 ---> <App> 在 src/App.vue <Root>

我通过以下设置收到上述错误： 从“vue”导入 Vue； 从“./App.vue”导入应用程序； // 导入App组件 控制台.log(应用程序); 从 'vue-router' 导入 VueRouter； 导入我的...

V-选择设置不是来自 Items 标签的默认值

我有一个 V-select，我想使用不是来自 Items 标签的内容设置默认值。 我在某处读到所选值需要来自 Items 标签，因此我尝试推送 defa...

为VUE-JS SPA设置.htaccess重写规则

我有一个 VUE 应用程序在历史模式下使用 VUE 路由器，但似乎无法在我的生产服务器上运行。我已经使用

vee-validate（Vue 2）不验证子组件

我在使用 vee-validation 包的 Vue2.js 上运行的应用程序遇到问题。 这是该应用程序的链接：https://codepen.io/EnjoyMachine/pen/ogvbZgO // 在codepen链接中找到代码 ...

vuejs2 vee-validate 的验证问题

我在使用 vee-validation 包的 Vue2.js 上运行的应用程序遇到问题。 这是该应用程序的链接：https://codepen.io/EnjoyMachine/pen/ogvbZgO // 在codepen链接中找到代码 ...

Workbox webpack 插件安装后未从缓存加载资源（.js）

我正在尝试使用 vuejs (2.5) 为 Laravel (5.8) 中的应用程序设置 PWA。 这是我在 mix.js 中的配置： ... mix.js('resources/js/app.js', 'public/js') .generateSW({ // 定义...

如何使用vue-monaco？

我正在尝试实现 vue-monaco，但出现以下错误： 错误 编译失败，有 2 个错误...

在 Vue.js 中使用指令输入字段仅接受数字值

我是 Vue.js 新手。我想要一个仅接受数字的输入字段，如果用户输入任何其他值，它将被替换为空字符串。因此，我想添加一个自定义目录...

如何创建可重用的 Vuetify Snackbar？

我正在尝试创建一个可重用的警报/小吃栏组件。我这样声明它们： Snackbar.vue 我正在尝试创建一个可重用的警报/小吃栏组件。我这样声明它们： Snackbar.vue <template> <v-snackbar transition="true" timeout="2000" :show="`${show}`" :color="`${color}`" absolute top outlined right> <strong> {{ message }} </strong> </v-snackbar> </template> <script> export default { name: 'Snackbar', props: { show: String, color: String, message: String } } </script> <template> <v-snackbar transition="true" timeout="2000" :show="`${show}`" :color="`${color}`" absolute top outlined right> <strong> {{ message }} </strong> </v-snackbar> </template> <script> export default { name: 'Snackbar', props: { show: String, color: String, message: String } } </script> 我导入了，并将问题传递给他们，如下所示： import Snackbar from '../../../components/Snackbar' <Snackbar v-if="alert" color="alertColor" message="alertMessage" /> <Snackbar show="alert" color="alertColor" message="alertMessage" /> 我已经尝试了上面的 2 行，这些是这 3 个变量的值 警报=true 警报颜色=green 警报消息 = create.vue?f4fe:631 DB error - insert_marketing_campaign: Duplicate entry 'TEST' for key 'MARKETING_CAMPAIGN_AK' 结果 我在控制台中没有看到任何错误，但也没有看到小吃栏。请帮忙 8！ 您没有正确传递 props 值，您必须这样做： ps。为了说明，我添加了一个事件侦听器（更新）来处理关闭按钮（如果不想使用，请删除） <Snackbar :show="alert" :color="alertColor" :message="alertMessage" v-on:update="alert = $event" /> Snackbar.vue 我也在这里改变了一些东西： 在属性中使用 props 的方式是有效的，但如果不需要连接其他值，请保持简单 prop show 必须是布尔值 添加了一个美丽按钮，如果你想使用 v-model 控制小吃栏展示，但是你不能直接在 v-model 上使用 show 属性，这就是为什么我们有一个计算属性“show2”（非常有创意）来读取（get）值如果你想改变，道具 show 和 emit 自定义事件“update”它(设置) <template> <v-snackbar transition="true" timeout="2000" v-model="show2" :color="color" absolute top outlined right> <strong> {{ message }} </strong> <v-btn color="red" text @click="show2 = false">Close</v-btn> </v-snackbar> </template> <script> export default { props: { show: Boolean, color: String, message: String, }, computed: { show2: { get() { return this.show; }, set(value) { this.$emit("update", value); }, }, }, }; </script> 希望有帮助！ ;) 检查我制作的这个codesandbox：https://codesandbox.io/s/stack-71244492-vuex-snackbar-klfunf?file=/src/store/index.js 您可以在 App.vue 文件中设置全局小吃栏并使用 Vuex 进行更新。在您的 vuex 商店中，您设置了一个 Snackbar 对象并创建了一个简单的更新突变并显示操作。 // store/index.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { snackbar: { active: false, color: "", message: "", timer: 4000 } }, mutations: { UPDATE_SNACKBAR(state, snackbar) { state.snackbar = snackbar; } }, actions: { showSnack({ commit }, { message, color, timer }) { commit("UPDATE_SNACKBAR", { active: true, color: color, message: message, timer: timer }); } } }); 然后在你的App.vue中像这样设置 <v-snackbar v-model="snackbar.active" :color="snackbar.color" :right="true" :bottom="true" :timeout="snackbar.timer" > {{ snackbar.message }} <template #action="{ attrs }"> <v-btn color="white" text v-bind="attrs" @click="snackbar.active = false" > Close </v-btn> </template> </v-snackbar> <script> import { mapState } from "vuex"; export default { name: 'App', data: () => ({ drawer: false, }), computed: { ...mapState(["snackbar"]) } } </script> 然后您可以通过执行此操作从任何组件触发您的小吃栏 // views/Home.vue this.$store.dispatch('showSnack', { message: 'Testing, main page.', color: 'green darken-1' }) // views/About.vue this.$store.dispatch('showSnack', { message: 'Hello from about!', color: 'red darken-1', timer: 2000 }) <script setup> import { computed } from 'vue' const { notificationText, modelValue } = defineProps({ notificationText: { type: String, required: true }, modelValue: { type: Boolean, required: true } }) const isVisible = computed(() => modelValue) </script> <template> <v-snackbar v-model="isVisible" @update="$emit('update:modelValue', $event)"> {{ notificationText }} <template #actions> <v-btn @click="$emit('update:modelValue', false)"> Close </v-btn> </template> </v-snackbar> </template>

Vue 计算属性的“效果”是什么

如果我检查 Vue 2.7 中的计算属性，我可以看到，除了众所周知的 .value 属性之外，还有 .effect。我找不到任何有关它的信息，除了它已被弃用......

如何在 Vue3 中根据此关键字加载路由器、cookie 等插件

我想将我的整个 Vue2 应用程序迁移到 Vue3，但我在这个关键字上遇到了太多错误。 现在的问题是 this.$router.push({}); this.$route.params 手表：{ “$route.path”：函数（

从vue2迁移到vue3时如何删除this.$set

我正在从 vue2 迁移到 vue3，我需要根据需要删除 $set。 例如，在我的应用程序中，我的代码在 vue2 中是这样的： this.$set(..., ..., null); 所以要删除它我应该使用

错误：请求的模块“vue”未提供名为“default”的导出

观看价值：{{ WatchValue }} ... <template> <div id="app"> <p>Watched Value: {{ watchedValue }}</p> <input v-model="inputValue" placeholder="Enter a value" /> </div> </template> <script> import Vue from 'vue'; const app = new Vue({ el: '#app', data() { return { inputValue: '', watchedValue: '' }; }, watch: { inputValue(newValue) { this.watchedValue = `You entered: ${newValue}`; } } }); </script> 在 setup 函数中，我们创建一个具有 inputValue 和 WatchdValue 属性的响应式对象状态。 我们使用 watch 函数来监视 inputValue 的变化。每当 inputValue 发生变化时，就会触发回调函数。在本例中，我们通过将您输入的字符串指定为 ${newValue} 来更新 WatchedValue 以包含输入的值。 在模板中，我们使用Vue的数据绑定语法（{{variable}}）显示watchedValue，并使用v-model将输入字段绑定到inputValue。 当用户在输入字段中键入内容时，inputValue 会进行反应式更新，从而触发手表效果。然后，watchedValue 会更新以显示输入的值，前缀为“您输入：”。 先看一下这个问题： Vue“导出默认值”与“新 Vue” 我认为你尝试导入你的“组件”，所以你需要提供： export default { components: { myComponent } data () { return {} } ... } 您的语法适用于根组件，不能像那样使用 <my-component></my-component> 在父组件中 要解决此问题，请确保导出您的操作，如下所示 // Import Axios instance with base configuration // Vuex module for authentication and permissions const state = { // }; const mutations = { // }; // Individual actions exported as named exports export async function registerUser(_, { name, email, password, password_confirmation }) { // } // Export the module as a default export export default { namespaced: true, state, mutations, getters, };

在Vuejs模板中使用时前端不会出现Bootstrap图标

我正在尝试使用 Vue.JS 构建 Web 应用程序，并且在我的应用程序中，我正在尝试使用 [Bootstrap Icons][1]。但由于某种原因，即使添加了图标后，它们也没有出现......