vue 无法获取DOM的innerHtml_框架

使用场景，牌匾文字上的公司名要根据字数多少自动变大变小，要先拿到文字内容

html：

<div class="head-h1" ref="company_name" >{{datascompany_name}}</div>

js：当页面刚加载完，通过接口获取{{datascompany_name}}的值，要对里面的值编辑时

this$refscompany_name 拿不到值

解决办法：

接口响应完，this$nextTick()方法里面 *** 作DOM，它才能接收到DOM更新的值

官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

this$nextTick(_=>{

。。。。

this$refs company_name

})

在mounted写因为我是html标签可以不用加 el(如果是html标签就不用加)

offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）

offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）

clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）

clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）

stylewidth //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）

styleheight //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）

scrollWidth //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同

scrollHeigh //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同

感谢您的提问。根据您的问题，我了解到您想了解如何在el-button组件中添加原生方法。以下是我为您提供的解答：

在el-button组件中添加原生方法的方法与在普通HTML元素中添加原生方法类似。可以通过获取el-button组件的DOM元素，然后在其上添加事件监听器的方式来实现。具体步骤如下：

1 使用ref属性获取el-button组件的DOM元素，例如：

```

<el-button ref="myButton">按钮</el-button>

```

2 在Vue组件的mounted生命周期函数中获取DOM元素，并为其添加事件监听器，例如：

```

mounted() {

const buttonElement = this$refsmyButton$el; // 获取DOM元素

buttonElementaddEventListener('click', thishandleClick); // 添加事件监听器

methods: {

handleClick() {

// 在这里编写原生方法的代码逻辑

}

```

3 在Vue组件的beforeDestroy生命周期函数中移除事件监听器，以避免内存泄漏，例如：

```

beforeDestroy() {

const buttonElement = this$refsmyButton$el; // 获取DOM元素

buttonElementremoveEventListener('click', thishandleClick); // 移除事件监听器

}

```

以上就是在el-button组件中添加原生方法的方法。需要注意的是，在添加事件监听器时，需要使用addEventListener方法，并指定事件类型和事件处理函数。在移除事件监听器时，需要使用removeEventListener方法，并指定相同的事件类型和事件处理函数。希望我的回答能够对您有所帮助，如有其他问题，请随时向我提问。

vue生命周期的栗子

注意触发vue的created事件以后,this便指向vue实例,这点很重要

<!DOCTYPE html>

<html>

<head>

<title>vue生命周期</title>

</head>

<body>

</div>

我是内容二

</div>

var myVue = new Vue({

el: "test",

data: {

a: "我是内容,在控制台输入myVuea=123456,可以改变我的值"

created: function () {

//在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。

//但是还没有开始 DOM 编译，$el 还不存在,但是实例存在,即thisa存在,可打印出来。

consolelog("建立");

beforeCompile: function () {

consolelog("未开始编译");

compiled: function () {

//在编译结束后调用。此时所有的指令已生效，因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。

consolelog("编译完成");

ready: function () {

//在编译结束和 $el 第一次插入文档之后调用，如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入（如 vm$appendTo() 等方法或指令更新）才触发 ready 钩子。

consolelog("一切准备好了");

attached :function () { //myVue$appendTo("test2")暂时触发不了,不知道怎么解决

//在 vm$el 插入 DOM 时调用。必须是由指令或实例方法（如 $appendTo()）插入，直接 *** 作 vm$el 不会触发这个钩子。

consolelog("插入DOM成功");

detached :function () { //触发事件 myVue$destroy(true),其中参数true控制是否删除DOM节点或者myVue$remove()

//在 vm$el 从 DOM 中删除时调用。必须是由指令或实例方法删除，直接 *** 作 vm$el 不会触发这个钩子。

consolelog("删除DOM成功");

beforeDestroy: function () { //触发方式,在console里面打myVue$destroy();

//在开始销毁实例时调用。此时实例仍然有功能。

consolelog("销毁前");

destroyed: function () { //触发方式,在console里面打myVue$destroy();其中myVue$destroy(true)是删除DOM节点,会触发detached函数,但是实例仍然存在

//在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，注意是解绑不是销毁,所有的子实例也已经被销毁。

consolelog("已销毁");

}

});

</script>

</body>

</html>

1创建一个Vue实例

通过vue函数创建一个新的vue实例

一个 Vue 应用由一个通过new Vue创建的根 Vue 实例，以及可嵌套的、可复用的组件树组成的。

我们先看看Vue基本的使用,至于组件我们后面详细的在来探讨

<divid="app">{{ msg }}</div><scriptsrc="/node_modules\vue\dist\vuejs"></script><script>// 引入vue后会白给你一个Vue构造函数letvm=newVue({// 配置对象el:'#app',// 告诉vue能管理那个部分,使用的是querySelectordata:{// data中的数据会被vm所代理msg:'hello world',// 可以通过vmmsg取到对应的内容 ,也可以赋值 }})</script>

2声明式渲染

Vuejs 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

21 关于{{}} 插值表达式

插值表达式,表达式,赋值运算,计算,三元表达式,但是尽量少在这里写逻辑计算

插值：

<divid="app">{{ message }}</div><script>newVue({el:'#app',data:{messgae:'hello Vue!'}})</script>

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？

如果需要确定现在的数据是否已经和DOM建立了关联,形成响应式

可以将js中的new Vue复制给一个全局变量vm此时vm就是Vue实例化对象,未来可能会用它来搞很多事情,但是最常用到它的时候,是通过this关键字来使用它

varvm=newVue({el:'#app',data:{messgae:'hello Vue!'}})

然后在浏览器的js控制台中修改vmmessage值，同时页面也会发生改变

在控制台中输入

vmmessge="你好,Vue"

22使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vuejs 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}{{ ok 'YES' : 'NO' }}{{ messagesplit('')reverse()join('') }}<divv-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。

示例:

<divid="app"><p>{{ number + 2 }}</p><p>{{ ok 'YES' : 'NO' }}</p><p>{{ messagesplit('')reverse()join('') }}</p></div><script>constvm=newVue({el:"#app",data:{message:'Hello World',number:10,ok:true,}})</script>

显示结果:

1png

但是有个限制就是，每个绑定双大括号(Mustache语法)里面都只能包含单个表达式

23 关于data数据

vue关注的是数据变化,不需要在像以前一样关注DOM的变化

比如我想在2秒之后让页面发生变化,我们只需要在2秒后更改数据就可以了

varvm=newVue({el:'#app',data:{msg:'hello world'}})setTimeout(function(){vm$datamsg="bye world"},2000)

关于实例介绍:

示例中vm是Vue的实例对象,

实例对象上有$data属性,其值就是选项对象中data属性值

选项对象就是在实例化Vue时传入的对象

data属性值是一个对象,因此$data也就是这个对象

当通过$data修改msg的值时,也就等于改data中的值, 对应是引用类型

因此示例的结果就是:

2秒后data数据中msg的值改变了, 又因为Vue是始终在关注着msg这个数据,一旦数据发生变化,就会触发Vue的响应式, 继而改变视图显示

24 再次理解MVVM模式

在上一节讲Vue的mvvm模式的时候就有提到,

Vue实例对象就是vm,data数据就是model, 页面显示的结果就是view

再来看一下mvvm的图

mvvmjpg

这张图在配合刚才的示例, 我们就能很好的理解,当数据Model发生变化以后, Vue就可以通过Data Bindings了解到,然后使用新的数据去改变页面显示

至于Vue如何通过DOM Listeners监听页面的改变,来改变数据,这个我们之后讲到在说

3实例上的方法

除了数据属性，Vue 选项对象中还暴露了一些有用的属性与方法。在通过实例对象使用选项对象的属性时,属性前面都需要带上前缀$，以便与用户定义的属性区分开来。例如：

vardata={a:1}varvm=newVue({el:'#example',data:data})vm$data===data// => truevm$el===documentgetElementById('example')// => true

31 实例上常用的属性和方法

vm$attrs// 用户获取父组件传递给子组件的属性,(除props,class,style外)vm$data// vm 上的数据vm$watch// 监听vm$el// 当前el元素vm$set// 后加的属性实现响应式vm$options// vm 配置上的所有属性vm$nextTick(()=>{})// 异步方法,等待渲染dom完成后来获取vmvm$refs// 获取dom元素或者组件实例的引用

其实我们可以创建一个Vue实例,然后在控制台上打印这个实例对象,你会看到很多的属性和方法

constvm=newVue({el:"#app",})

在控制台输入vm

显示结果:

实例属性png

这里面很多属性,我们暂时不用去关心他,因为随着学习的深入,慢慢都会学习到的

4实例化多个vue

我们可以在页面上同时实例化多个Vue, 不同的实例接管页面上不同的区域

看下如下的示例:

## <h1>实例化多个Vue对象</h1><divid="app-one"><h2>{{ title }}</h2><p>{{ greet }}</p></div><divid="app-two"><h2>{{ title }}</h2><p>{{ greet }}</p><buttonv-on:click="changeTitle">点击改变app-one的h2的内容</button></div><script>// Vue实例varone=newVue({el:'#app-one',data:{title:" vue-app-one的内容"},computed:{greet:function(){return"Hello App One"}}})// Vue实例vartwo=newVue({el:'#app-two',data:{title:" vue-app-two的内容"},methods:{changeTitle:function(){onetitle="app-one的内容发生改变了"}},computed:{greet:function(){return"Hello App two"}}})</script>

Vue事件和方法还没有讲到, 先做一个了解即可:

示例分析:

两个实例one和two接管了不同的DOM元素,

点击按钮是在two实例接管的DOM元素中,

所以,当你点击时,只会触发two实例中的方法, 也只会改变two实例中的数据

那么问题来了

能否在two实例中修改one实例中的数据呢,

答案当然是可以的啦, 因为变量one是全局变量,

在two实例化中,就可以通过one变量得到第一个Vue实例化对象,

然后就可以通过实例化对象修改数据,这个可以自己尝试写写

5 Vue *** 作DOM元素

虽然Vue是数据驱动的,但是有的时候我们就需要自己手动的获取到DOM元素,对DOM元素进行 *** 作,那么该如何处理呢,

*** 作DOM元素:

在需要 *** 作的DOM元素中使用ref属性,

ref属性的值是自己随便定义的名字

通过Vue实例的$refs属性获取 *** 作dom元素

<divid="app"><divref="wuwei">无为</div></div><script>varvm=newVue({// 根实例el:'#app',data:{},mounted(){//dom元素中有多个一样的ref,dom如果不是通过v-for循环出来的,只能获取一个// 如果是循环出来的,可以获取多个,获取的是一个数组consolelog(this$refswuwei)}});</script>

关于示例中$refs属性的解释:

因为可以在多个DOM元素上使用ref

所以$refs属性获取的是所有具有ref属性的DOM元素的集

因此要想 *** 作确定的DOM元素就需要在通过当初的ref值获取

简而言之: 就是ref在dom元素上通过this$refs自定义名字是获取dom元素

当获取到DOM元素后,然后就可以采用原生的JavaScript对DOM进行 *** 作

注意:

Vue 接管的DOM元素之外的元素使用ref是获取不了的,值是undefined

以上就是关于vue 无法获取DOM的innerHtml全部的内容，包括:vue 无法获取DOM的innerHtml、vue获取dom元素的宽高、el-button添加原生方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/9350608.html

vue 无法获取DOM的innerHtml

发表评论

评论列表（0条）