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");
    },

原文地址:https://www.cnblogs.com/ssszjh/p/9716398.html

时间: 2024-09-29 07:39:52

vue里操作DOM的相关文章

vue.js 2.x 版本script里面的dom被过滤,从而获取不到dom字符串的解决方案

做项目中 vue.js 在1.x版本切换的到2.x版本的时候遇到了一个问题就是说,1.x版本实例化之后 script 里面的dom 字符串不会被过滤掉,但是2.x版本之后就会被过滤例如: 1.x 版本被实例化之后的script 内容 2.x 版本被实例化之后的script 内容 这样我们在获取 id="sh" 内容的时候就无法获取到dom结构,很多时候我们想使用这些dom结构,怎么办呢? 于是乎,经过测试及文档的查看,考虑到了,那么如果还没被完全实例化之后,我们就去获取它,这样我们就能

vue中关于dom的操作

mounted 个人理解为DOM结构准备就绪了,可以开始加载vue数据了, 挂载点,配合使用 mounted:function(){ this.$nextTick(function(){ //this.$nextTick是在下次DOM更新循环结束时调用延迟回调函数.异步函数 this.loadData(); //DOM加载就绪,后调用loadData方法进行数据更新 //想要更新后的获取dom //此时若获取更新后dom数据将会报错,数据为undefined: }) } 此时,若想要获取更新后的

vue里面的v-for列表循环

列表渲染 v-for v-for可以把数据中的一个数组对应为一组元素v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. <li v-for="item in items">{{item.text}}</li> data:{ items:[ {text:"第一组"}, {text:"第二组"}, {text:"第三组"},

mui项目中如何使用原生JavaScript代替jquery来操作dom

转载于:http://www.bcty365.com/content-146-3661-1.html 最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能.但jq根本就不是为手机设计的.手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom

javascript操作dom对象

什么叫DOM? DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近. DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容. 查找元素 1.直接查找 方法名 描述 getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素 getElementsByTagNam

Ext JS学习第十二天 Ext基础之操作dom ; get与fly 方法

此文用来记录学习笔记 •嗯!首先,什么是DOM(Document Object Model) –W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并更改文档的内容.结构和样式. –其实DOM是一种通用的模型.不止在我们的HTML中存在,也可以在其他文件中存在,相信你最熟悉的就是XML了吧,其实还有很多... –DOM的发展也非常的漫长,版本延续,产生了0级DOM.1级DOM.2级DOM和最新的3级DOM,那么相对成熟的就是从2级DOM以后了.每

读Zepto源码之操作DOM

这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 .remove() remove: function() { return this.each(function() { if (this.parentNode != null) this.parentNode.removeChild(this) }) }, 删除当前集合中的元素. 如果父

JavaScript操作DOM与jQuyer操作DOM的对比

1.通过jQuery方法包装后的对象,是一个类数组对象.它与DOM对象完全不同,唯一相似的是它们都能操作DOM. 2.通过jQuery方法包装后的对象,是一个类数组对象.它与DOM对象完全不同,唯一相似的是它们都能操作DOM.通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短. 3.jQuery是一个类数组对象,而DOM对象就是一个单独的D

Python javascript操作DOM

文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容.这里我们主要是讲用javascript操作DOM. 1. 查找元素 1.1 直接查找 document.getElementById 根据ID获取一个标签 document.getElem