vue里操作DOM

一般來說你要在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");
    },