vue里操作DOM

Posted 2021-01-09 ssszjh

一般来说你要在vue里操作DOM，要先在标签里加上ref=“”，如下：

<h2 ref="s" @click="sss">Essential Links</h2>

然后在点击的事件sss写下你想要的效果代码：（注意的是上面的ref的s，要写在下面this.$refs，不要忘了）

methods: {
        sss() {
            this.$refs.s.style.color = "blue";
        }
    }

如果你想要弄更多的效果，特效就要引入Jquery

1.npm install jquery --save

2.在项目根目录下的build目录下找到webpack.base.conf.js文件，在开头使用以下代码引入webpack，因为该文件默认没有引用,如下：

var webpack = require(‘webpack‘)

3.还是该文件,在module.exports模块里写下这一段

plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            jquery: "jquery",
            "window.jQuery": "jquery"
        })
    ],

4.main.js里导入jQuery

import ‘jquery‘

5.若有.eslintrc.js文件，则在module.exports中，为env添加一个键值对 jquery: true 就可以了

若无这个文件，则不用管

这个时候我们可以来测试了

在created的生命周期里写下：console.log($(‘选择器‘));

浏览器显示：

就成功了

不过值得注意的是：

你要使用jQuery，要在vue渲染完成后，才使用

就是在mounted周期里用，如：

 mounted() {
        $(".hello").css("color", "red");
        $(".aaa").css("color", "red");
    },