Vue()的Angular等价函数.$mount()
Vue()的Angular等价函数.$mount()是Vue.js框架中的一个方法，用于手动挂载Vue实例到一个DOM元素上。
概念： $mount()是Vue.js框架中的一个方法，用于将Vue实例与DOM元素进行关联，使Vue实例能够控制该DOM元素及其子元素。通过$mount()方法，可以手动将Vue实例挂载到指定的DOM元素上，实现数据的双向绑定和视图的更新。
分类： $mount()方法属于Vue.js框架的核心功能，用于实现Vue实例的挂载操作，属于Vue的实例方法。
优势：
- 灵活性：通过$mount()方法，可以手动选择将Vue实例挂载到任意的DOM元素上，提供了更大的灵活性和自由度。
- 控制粒度：$mount()方法可以精确控制Vue实例的挂载范围，可以选择挂载到整个页面、某个具体的DOM元素或者组件中。
- 动态挂载：$mount()方法可以在运行时动态地挂载Vue实例，实现动态组件的加载和卸载。
应用场景：
- 单页面应用（SPA）：在SPA中，可以使用$mount()方法将Vue实例挂载到根DOM元素上，实现整个应用的数据驱动和视图更新。
- 组件开发：在组件开发中，可以使用$mount()方法将Vue实例挂载到组件的根DOM元素上，实现组件的数据绑定和视图渲染。
- 动态组件加载：通过$mount()方法，可以在运行时动态地挂载Vue实例到指定的DOM元素上，实现动态组件的加载和卸载。
推荐的腾讯云相关产品： 腾讯云提供了丰富的云计算产品和服务，以下是一些与Vue.js相关的产品和服务：
- 云服务器（CVM）：提供了弹性的云服务器实例，可用于部署Vue.js应用程序。
- 云数据库MySQL版（CDB）：提供了高性能、可扩展的云数据库服务，可用于存储Vue.js应用程序的数据。
- 云存储（COS）：提供了安全可靠的对象存储服务，可用于存储Vue.js应用程序中的静态资源。
- 云监控（Cloud Monitor）：提供了全面的云资源监控和告警服务，可用于监控Vue.js应用程序的运行状态。
产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 云监控（Cloud Monitor）：https://cloud.tencent.com/product/monitor
相关·内容
我试图从我的列表中删除项目，我使用js删除操作符，但它不能，下面是代码
HTML：
<ol v-if="status">
<li v-for="(item, key) in items" :key="item.title">
{{ item.title }} - Type - {{ item.type }}
<input v-model="item.type" type="text" value="{{ item.type }
浏览 2提问于2021-12-09得票数 0
回答已采纳
1回答
我使用rollup创建了一个捆绑的myproject.min.js文件，现在我在其他框架中使用这个文件(aurelia和angular)。
现在，我关心的是如何将数据作为道具从其他框架传递给这个vue包：
在脚本文件中：
Vue.use(window.VueMainComponent);
new Vue({}).$mount('#app');
在HTML文件中：
<div id="app">
<vue-main-component :data="somedata"></vue-main-compone
浏览 4提问于2021-05-27得票数 0
在框架加载过程中，Im‘将Vue 3组件作为加载动画安装：
createApp(App).mount(e);
当框架加载时，该组件在html中被框架内容擦除(但我猜不会被Vue删除)。这种行为由Vue的外部系统管理。
当我试图用相同的命令重新加载组件时，将不会显示该组件。
如果我只再次挂载该组件，则控制台中有以下警告，组件将不会显示：
"[Vue warn]: App has already been mounted.
If you want to remount the same app, move your app creation logic into a factory fun
浏览 10提问于2021-12-12得票数 0
回答已采纳
2回答
我刚刚开始在Vue.js中使用Jest学习单元测试，我想知道什么时候使用describe，什么时候使用测试？
TodoApp.vue组件：
<template>
<div>
<h1>TodoApp Componenent</h1>
<div v-for="todo in todos" :key="todo.id" data-test="todo">
{{ todo.text }}
</div>
</div>
</t
浏览 4提问于2022-09-01得票数 2
回答已采纳
3回答
我正试图为我的应用程序创建一个基于Vue和vue-cli的webpack模板的单元测试。
我读过Vue文档，vue-加载程序，vue-cli和vue-模板/webpack(更多！)当我试图为我的组件进行单元测试时，我使用以下方法。
const Constructor = Vue.extend(MyComponent)
vm = new Constructor().$mount()
像和
这个很好用。但发音是当我的部件有一些道具的时候。我试着用这个算了
const Constructor = Vue.extend(MyComponent)
vm = new Constructor({
m
浏览 5提问于2017-04-24得票数 8
回答已采纳
2回答
我希望能够在我的vue项目中全局使用AOS库。 这是给Vue 2的。 new Vue({
created () {
AOS.init()
},
render: h => h(App),
}).$mount('#app'); Vue 3对应用的设置略有不同。 import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app') 我在Vue 3设置中没有那个creat
浏览 28提问于2021-07-11得票数 0
回答已采纳
1回答
我有一个类似于的设置，在该设置中，我的组合位于组件中的一个独立文件中，如下所示：
// composition.js
import { onMounted } from '@vue/composition-api';
export default function useComposition() {
onMounted(() => {
console.log('Hello, world!');
});
}
// component.vue
<template>...</template>
<script&
浏览 2提问于2020-01-28得票数 5
回答已采纳
我在试着理解用Vitest嘲弄Vue-Router的逻辑。
为此，我尝试在一个非常简单的项目上设置和模拟我的测试环境。当我试图按照进行操作时，总是会出现错误。我不知道是不是因为他们用的是小丑。
使用解决了我的问题，但我认为最好是模拟vue路由器。
下面，我首先传递项目的源代码，然后是我收到的错误。
Home.vue
<script setup lang="ts">
import {onMounted} from "vue";
import {useRoute} from "vue-router";
const route = use
浏览 17提问于2022-10-26得票数 0
2回答
在main.js中，我将axios设置为全局函数。
//main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';
const app = createApp(App);
app.config.globalProperties.$http = axios;
app.mount('#app');
问题是如何使用组合api在组件中调用此函数？
<script>
export default
浏览 0提问于2021-08-19得票数 2
回答已采纳
我正在创建一个基于JSON表单构建HTML DOM的应用程序。此窗体是可扩展的，并允许添加自定义控件。一个重要的事情是让它在不同的JavaScript框架下工作。 我正在尝试用Angular生成一个虚拟的DOM，但是我不想将它附加到document，而是希望将DOM元素放在一个变量中。 这是我用Vue做到这一点的方法： const app = new Vue({
render(createElement) {
return createElement(MyCustomControl, {}, this.$slots.default);
},
compo
浏览 19提问于2021-06-29得票数 0
我正在一个frontend项目中创建一个backend和一个Vue 3应用程序。所有操作都很好，除了app.js抛出以下错误外，这取决于浏览器中访问的组件。
我你去拜访app.vue
[Vue warn]: Failed to mount app: mount target selector "#cms" returned null.
如果你去拜访cms.vue
[Vue warn]: Failed to mount app: mount target selector "#app" returned null.
安装文件app.js如下所示：
require(
浏览 13提问于2022-03-07得票数 1
回答已采纳
如果我尝试运行下面的内容(使用yarn run jest)，就会得到TypeError：_vm.$t不是一个函数，因为SearchField使用的是一个转换("$t('search')")。
import { mount } from "@vue/test-utils";
import SearchField from "@/components/ui/SearchField";
describe("SearchField", () => {
const wrapper = mount(SearchFi
浏览 1提问于2019-02-01得票数 2
回答已采纳
2回答
我正在使用Vue.extend手动地将一个组件挂载到一个动态元素，如下所示：
import Vue from 'vue';
import MyComponent from 'MyComponent.vue';
const MyComponentConstructor = Vue.extend(MyComponent);
const MyComponent = new MyComponentConstructor({
propsData: {
foo: 123,
},
}).$mount('#mount-point'
浏览 1提问于2017-06-09得票数 11
回答已采纳
//编辑:我想我已经解决了这个问题。我需要从vue独立建造..。
我已经将我的vue.js 1.0应用程序迁移到vue.js 2.0 (使用迁移助手)。但是这个错误显示在控制台Failed to mount component: template or render function not defined. (found in root instance)中。
以下是我的简化main.js：
import Vue from 'vue';
import Router from 'vue-router';
import SiteHeader from '
浏览 3提问于2016-10-06得票数 3
回答已采纳
使用vue- test -utils来使用pinia测试组件，我需要修改存储在pinia中的状态值，但是我尝试了很多方法，但都没有效果。原始组件和存储文件如下所示。
// HelloWorld.vue
<template>
<h1>{{ title }}</h1>
</template>
<script>
import { useTestStore } from "@/stores/test";
import { mapState } from "pinia";
export default
浏览 22提问于2022-03-09得票数 3
1回答
我已经安装了Vue Test tools，安装了Jest，并有一个测试用例来验证vue实例是否正常工作。 我的测试如下所示 /* global describe, test, expect */
/* eslint no-undef: "error" */
import { mount } from '@vue/test-utils';
import Logo from '@/components/Logo';
describe('Logo', ()=> {
test('is a vue instance'
浏览 22提问于2021-08-25得票数 0
回答已采纳
2回答
是否有一种方法让.vue文件负责在单个文件组件模式中创建自己的Vue实例？
这是Vue文件。
// MyComponent.vue
<template><div>Hello {{ name }}!</div></template>
<script>
const Vue = require('vue');
// what would usually be exports default
const componentConfig = {
name: "my-component",
pr
浏览 4提问于2018-10-18得票数 9
回答已采纳
我不能为我的简单组件编写Jest测试，因为它只有一个v-data-table Vuetify组件。我试图安装组件，但得到了一些错误“Vue warn: Error in render："TypeError: Cannot read property 'width‘of undefined in ->”。我是一个Jest测试的新手，所以这个问题让我抓狂……
这是我的测试文件。测试组件取自Vuetify文档页面...
import { mount } from '@vue/test-utils';
import vuetify from 'vuetif
浏览 34提问于2019-08-20得票数 5
考虑下面这个基本示例，其中我们有一个input和一个显示输入值的p：
const App = {
data() {
return {
message: "hello world!"
};
}
};
Vue.createApp(App).mount('#root');
<script src="https://unpkg.com/vue@next"></script>
<div id="root">
<input v-model="me
浏览 2提问于2020-09-26得票数 5
问题：有任何方法来更新像这样创建的手动挂载的vue组件/实例的支持吗？我正在传入一个名为item的对象，作为组件的data支柱。
let ComponentClass = Vue.extend(MyComponent);
let instance = new ComponentClass({
propsData: { data: item }
});
// mount it
instance.$mount();
为什么
我有一个非vue第三方库，它在时间线(vis.js)上呈现内容。因为我的应用程序的其余部分是用vue编写的，所以我尝试使用vue组件来处理时间线本身上的内容。
通过
浏览 6提问于2018-12-14得票数 12
回答已采纳
1回答
Jest/Vue:注册组件
、、、、
为什么我不能在Jest规范中挂载我的组件(为了简洁起见，这里的大部分代码都被省略了)？
# Photos.vue
<script>
import Vue from 'vue'
export default {
name: 'photos'
data: function () {
...
}
}
</script>
这是我的规范：
# Photos.test.js
import Vue from 'vue'
import { mount } from '@vue/te
浏览 11提问于2018-02-19得票数 2
回答已采纳
我试图用Typescript专注于测试驱动开发，所以我用vue-cli构建了一个新的Vue项目(我选择使用Vue3、Typescript和Jest)。但是，当我在开箱即用的情况下运行单元测试时，它失败了。经过一些调查后，我发现@vue/test-utils中的mount命令不会呈现任何prop值：
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
{{ test }}
</div>
</template>
浏览 3提问于2020-10-20得票数 0
我在试着用vux和vuetify学习vue。我是通过vue cli安装的。 就像在文档中一样，我试图访问存储，但得到了一个未定义的.$storage。 src/components/HelloWorld.vue <script>
export default {
methods: {
onChangeTheme: () => {
console.log(this.$store)
}
}
};
</script> src/main.js import Vue from 'vue'
import App from
浏览 96提问于2019-08-24得票数 2
4回答
我有以下带有插槽的组件：
<template>
<div>
<h2>{{ someProp }}</h2>
<slot></slot>
</div>
</template>
出于某些原因，我必须手动实例化这个组件。我就是这样做的：
const Constr = Vue.extend(MyComponent);
const instance = new Constr({
propsData: { someProp: 'My Heading
浏览 2提问于2018-05-03得票数 20
回答已采纳
1回答
我想让一个axios实例在我的Vue 3应用程序中全局可用。
设置：
import { createApp } from 'vue'
import axios from 'axios'
const axiosInstance = axios.create({
withCredentials: true,
})
const app = createApp()
app.config.globalProperties.$axios = axiosInstance
app.mount(el)
用法：
let response = await this.$ax
浏览 8提问于2022-03-07得票数 3
回答已采纳
3回答
我有什么？
具有必需路由和公共路由的路由器
具有用户自主状态的vuex
我想要什么:使用axios向服务器发送请求，在加载应用程序之前(在路由器被解析之前)检查用户的auth状态。
router.js
import Vue from 'vue'
import Router from 'vue-router'
import store from './store'
Vue.use(Router)
const router = new Router({
...
routes: [
{
path:
浏览 2提问于2018-09-20得票数 7
回答已采纳
1回答
如何在Vue.js中加载应用程序时运行函数？我的代码如下所示
main.js
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-rout
浏览 5提问于2021-08-14得票数 0
回答已采纳
1回答
道具是初始化的，但是在.mount之后它们就消失了。如何使用动态加载的组件正确设置props？ import {createApp} from 'vue'
blockView = createApp(Block);
blockView.props = {
type: json['type'],
title: json['title'],
subtitle: json['subtitle']
}
blockView.mount(this.$refs.container)
浏览 8提问于2020-10-05得票数 0
本例中如何从ComponentA触发app2上的clicked方法。 const app = Vue.createApp({});
app.component('ComponentA', {
template: `<button @click="clicked" class='btn'>Click</button>`
});
const app2 = Vue.createApp({
methods: {
clicked() {
this.clickCount += 1;
浏览 72提问于2020-10-22得票数 1
回答已采纳
1回答
我使用vue-cli@4创建了一个项目，它运行得很好，但是我在main.js中做了一些更改，它已经不再工作了。
//main.js
import Vue from "vue";
import App from './App.vue'
//Vue.config.productionTip = false;
new Vue({
el: "#root-app",
//commented components property when using render and mount
components: {
App
},
浏览 2提问于2019-11-10得票数 2
1回答
我试图在Laravel惯性项目上通过Vue mixin创建一个全局助手函数，但没有用：
//app.js
Vue.mixin({
methods: {
myFunction() {
return 'Returnign from myFunction';
},
},
});
new Vue({
...
}).$mount(app);
。
//MyComponent.vue
console.log(myFunction()); // ReferenceError: myFunction is not defi
浏览 3提问于2021-01-31得票数 0
我创建了一个Vue项目，由Vue-Cli学习。当所有数据都存储在组件中时，它工作得很好。但我的问题是，为什么不能在根应用程序实例上呈现Root实例中的数据。当我使用webpack +vue-装载机的时候，问题也是一样的。
main.js
import Vue from 'vue'
//import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el: "#app",
data() {
return {
ms
浏览 3提问于2018-05-05得票数 0
回答已采纳
1回答
我使用以下方法添加了Vuetify：
vue add vuetify
生成的文件如下所示：
import Vue from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";
Vue.config.productionTip = false;
new Vue({
vuetify,
render: (h) => h(App)
}).$mount("#app");
我尝试添加RTL来完成这个休整：
import vu
浏览 6提问于2020-09-16得票数 1
回答已采纳
问题
我使用Vue 2.4与Mocha和柴一起进行单元测试。在执行组件测试时，每个测试的执行时间都比之前的测试长。
期望
shallow/shallowMount的每个调用不超过200 of。
文件
package.json
{
"name": "client",
"version": "1.0.0",
"description": "client",
"private": true,
"scripts": {
"dev":
浏览 0提问于2018-07-20得票数 2
3回答
这段代码来自Vue 3文档，并且正在运行。
const data = { a: 1 }
// The object is added to a component instance
const vm = Vue.createApp({
data() {
return data
}
}).mount('#app')
console.log(vm.a) // => 1
但是，如果我使用render()函数创建组件，我将无法访问数据对象。
let options = window[this.data.get('index')];
option
浏览 2提问于2020-10-21得票数 0
2回答
动态打印组件时未定义Vue属性
、、、、
我的问题是动态创建标签"galeriaimages“。Vue工作得很好，但属性总是未定义的 谢谢大家。 main.js import Vue from 'vue'
import Gi from './components/galeriaimages.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
document.addEventListener('DOMContentLoaded', function()
浏览 15提问于2020-04-17得票数 0
回答已采纳
我得到了错误：
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
在我和Vue的项目中，打字稿& Webpack和我没有找到任何解决办法来解决这个问题。到目前为止我尝试过的是：
将"vue": { "runtimeCompiler": tru
浏览 4提问于2020-01-19得票数 3
1回答
我使用Jasmine作为单元测试框架，我想知道如何才能知道是否正确地安装了vue。是否有一个函数，一个来自VueJS的API，一个知道视图状态的收据？
Actually..the单元测试正在通过，但在控制台(终端或浏览器下)，我得到了以下错误：错误日志：'Vue警告:挂载钩子中的错误：(在xxxx中找到)- ReferenceError：$没有定义‘
那么我希望我的单元测试在这种错误上失败，而不是通过.？
下面是代码的快速快照：
describe("location component tests suite", () => {
const getCom
浏览 3提问于2017-03-13得票数 4
1回答
在Vue包中，我想在index.html中导入css文件。 现在，'index.html‘> 'App.vue’mount by (#app) > 'Todo.vue‘mount by router。 请帮帮我，谢谢。:)
浏览 13提问于2020-01-08得票数 0
如何将Vue 2语法迁移到Vue 3，因为我收到以下错误：
TypeError: Vue不是构造函数。
现在我正在使用Vue 3：
let app;
firebase.auth().onAuthStateChanged(user => {
console.log("user", user);
if (!app) {
app = new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
}
});
至
import
浏览 4提问于2020-12-01得票数 2
回答已采纳
1回答
更好的堆栈跟踪
、、
我正在将一个应用程序从angular.js (版本1)迁移到Vue.js版本2.4。
我正在从以开发模式提供原始Javascript文件转向使用Webpack、巴别塔和.vue，后者服务于处理后的Javascript文件。Webpack和Vue.js对我来说都是新的。
当代码中发生异常时，Vue.js或Webpack会截获该错误，并打印一个无用的堆栈跟踪。下面是一个例子。
我猜如果Vue.js/Webpack没有拦截异常，我可以在浏览器中看到堆栈跟踪以及发生异常的代码。
有没有在Vue.js中有效使用浏览器调试器的指南？
我使用的是Firefox，使用的是vuedevtools 2.5.9。
浏览 6提问于2018-01-14得票数 1
回答已采纳
vue-test-utils提供了一个setComputed方法，允许您设置计算属性的状态。
import { mount } from '@vue/test-utils'
const wrapper = mount(Home)
wrapper.setComputed({loaded: true})
vue-test-utils版本1.1.0.beta为读取setComputed() has been deprecated and will be removed in version 1.0.0. You can overwrite computed properties by
浏览 6提问于2018-05-21得票数 20
2回答
我正在努力开发一个使用vuejs和vuex的项目，但它不能在组件中使用this.$store.state.count。为什么？
我的配置：
"vuex": "^2.0.0"
store.js：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 12
},
mutations: {
increment (state) {
sta
浏览 2提问于2016-12-09得票数 4
回答已采纳
我正在尝试创建一个组件实例：
App.vue
import MyComponent from './components/MyCompnent.vue';
export default {
mounted() {
// The following line fails.
const vm = new MyComponent();
vm.$mount('#some-place');
}
}
new行报告了一个错误：
Uncaught : MyComponent.default不是构造函数
那么
浏览 4提问于2016-12-01得票数 4
回答已采纳
我有一个用Vue js (v10)使用Sage (v3)的项目。
我成功地引入了Vue并将App.vue (单页组件)安装到app.blade.php文件侧的根元素上：
app.js
import App from './App.vue'
const app = createApp(App)
app
.use(router)
.mount('#wp-vue-app');
app.blade.php
<div id="wp-vue-app">
<!-- App.vue renders here -->
<
浏览 4提问于2022-09-09得票数 0
回答已采纳
2回答
我花了一整天的时间试图找出是什么让这个例子失败了：
Vue.use(VueRouter);
var PlayerDetail = {
template: '<div>FOO</div>'
};
var PlayerList = {
template: '<div>BAR</div>'
};
var routes = [{
path: '/player',
component: PlayerList
}, {
path: '/detail',
co
浏览 3提问于2017-05-19得票数 2
回答已采纳
我试图在我的一个单一文件组件中使用这个 / 。即使像示例中提到的那样导入它，我还是得到了以下错误：
21:27:20.553 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <CircularCountDownTimer>
<Visualization> at src/views/Visualization.vue
<App> at src/App.vue
浏览 1提问于2019-07-26得票数 4
回答已采纳
我有这样的组成部分：
export default class ModalDetails extends Vue {
mounted(): void {
(this.$refs.modal as any).open();
}
}
我试着去测试：
describe('ModalDetails', () => {
let wrapper: Wrapper<Vue>;
let store: Store<any>;
beforeEach(() => {
wrapper = mount(ModalDetai
浏览 2提问于2022-10-06得票数 0
回答已采纳
我有一个Vuejs应用程序，带有以下脚本( Typescript)：
import { Foo, FooRepository } from "./foo";
import Vue from 'vue';
import Component from 'vue-class-component';
import { Promise } from "bluebird";
@Component
export default class MyComponent extends Vue {
isLoading: boolean;
浏览 1提问于2017-11-21得票数 0
我正在使用Jest设置Vue3和单元测试。
我已经努力让它工作了，我已经尝试了很多不同的配置。
这是我最后一次“工作”的配置，我得到了这个错误：
ReferenceError: ShadowRoot is not defined
实际上我没有更多的想法了。
我的配置：
jest.config.js
module.exports = {
transform: {
"^.+\\.vue$": "vue-jest",
"^.+\\.js$": "babel-jest"
浏览 24提问于2021-02-16得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
