• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

第七十六篇:参考引用(在某视频剪辑软件中引用师的方法)


Recommended Posts

好家伙,

引子:

jQuery简化了程序员操作DOM的过程

vue 优势:MVVM 在vue中,程序员不需要操作DOM。程序员只需要把数据维护好即可!(数据驱动视图)

那么若要在vue中操作dom,这时就要用到"ref"了,

1.什么是ref引用,

ref用来辅助开发者在不依赖与jQuery的情况下,获取DOM元素或组件的引用

每个vue中的组件实例上,都包含一个$refs对象,里面存储着对应额DOM元素或组件的引用.

默认情况下,组件的$refs指向一个空对象.

好了,现在我又要开始给自己提需求了

假设:在vue中,需要操作DOM了,需要拿到页面上某个DOM元素的引用,此时怎么办?

用户需求:点击按钮,文本字体改色,

dom.style.color=''red"

现在问题来了:

如何拿到dom

先来试着看:

这里this指向vue实例,我们直接打印this来看看会出现什么:

App.vue组件代码如下:

模板

div id='应用程序'

h1App根组件

/h1

button @click='showthis '点我展示这个/按钮

/div

/模板

脚本

从'导入你好世界./components/HelloWorld.vue '

导出默认值{

名称: '应用程序:

方法:{

showthis(){

//当前应用组件的实例对象

控制台。日志(这个);

}

},

组件: {

编译

}

}

/脚本

我们来看看控制台:

zflljnnykeq4301.png

可以看见$refs指向一个空对象

接下来我们来为h1绑定一个ref元素:

h1 ref='h1style '应用程序根组件

/h1

再次来到控制台:

tfcv4gynyuc4302.png

可以看到h1style的值指向了h1

接下来,我们只要$refs.h1style就可以拿到h1的dom了(妙啊)

现在我们继续在代码中添加:

showthis(){

//当前应用组件的实例对象

控制台。日志(这个);

这个参考文献。h1风格。风格。color=' red

}

来看看效果:

0xuwnhbrbya4303.png

点击按钮成功变红,

成功解决了用户需求,(用户竟是我自己)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now