利用vm.$mount插入节点的方法

最新推荐文章于 2024-02-15 13:09:12 发布

352328759

最新推荐文章于 2024-02-15 13:09:12 发布

阅读量2.5k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/u013970232/article/details/89310626

版权

Vue 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

感觉这种做法跟插入组件很相似

原理:创建一个实例，并挂载到一个元素上

官网上也有相关的描述

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>利用$mount插入节点的方法</title>
	</head>

	<body>
		<div id="vueBox">
			<p>感觉这种做法跟插入组件很相似</p>
			<div id="here"> </div>
		</div>
		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
		<script type="text/javascript">
			"use strict";
			var vu = new Vue({
				el: "#vueBox",
				data: {
					//数据
				},
				methods: {
					//方法
					funA: function() {
						console.log("father funA")
					},
					addDom: function() {
						var _this = this;
						var Profile = Vue.extend({
							template: '<div class="btn" @click="funA(\'TB\')">{{name}}</div>',
							data: function() {
								return {
									name: "click me",
								}
							},
							methods: {
								funA: function(_who) {
									console.log("son funA")
									_this.funA(_who)
								}
							}
						})
						new Profile().$mount("#here")
					}
				},
				created: function() {
					//创建
				},
				mounted: function() {
					//安装
					var _this = this
					_this.addDom()
				},
			});
		</script>
	</body>

</html>

352328759

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用vm.$mount插入节点的方法

感觉这种做法跟插入组件很相似原理:创建一个实例，并挂载到一个元素上官网上也有相关的描述<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta char...
复制链接

扫一扫

专栏目录