一般来说你要在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"); },
原文地址:https://www.cnblogs.com/ssszjh/p/9716398.html
时间: 2024-09-29 07:39:52