vue-$mount实验

最新推荐文章于 2024-07-05 09:48:05 发布

科学的发展-只不过是读大自然写的代码

最新推荐文章于 2024-07-05 09:48:05 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/xie__jin__cheng/article/details/109100628

vue 专栏收录该内容

33 篇文章

订阅专栏

本文通过一个简单的示例展示了Vue中$mount方法的使用，该方法用于将Vue实例挂载到DOM元素上，例如`vm.$mount('#app')`，将Vue对象绑定到id为'app'的HTML元素。在提供的代码中，创建了一个Vue实例并将其挂载到页面的<div id=app>{{viewData}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述：$mount

作用：把 html控件和vue对象绑定。

举例：vm.$mount('#app');

解释：vue对象.$mount('#html的id');

1.代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vue-$mount实验</title>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="app">{{viewData}}</div>
<script>
	var vm = new Vue({
        data: {
            viewData: "测试数据"
        } 
    });
	vm.$mount('#app');
</script>
</body>
</html>