1.获取原生的DOM的方式

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"> </div>
<script src="vue.js"></script>
<script> Vue.component("Test",{
data(){
return {}
},
template:`<div>我是测试组件</div>`
});
Vue.component("Test2",{
data(){
return {}
},
template:`<div>我是测试组件2</div>`
}); let App = {
data(){
return {}
},
template:`
<div>
<input type="text" ref="input">
<Test ref="abc"></Test>
<Test2 ref="abc2"></Test2>
</div> `,
mounted(){
console.log(this.$refs.input);//获取原始DOM
this.$refs.input.focus();
console.log(this.$refs.abc);//获取组件实例对象
console.log(this.$refs.abc2);
console.log(this.$refs.abc.$parent);//获取父组件
console.log(this.$refs.abc.$root);//获取根组件 Vue实例
console.log(this.$children);
console.log(this.$refs);
for (let key in this.$refs){
// console.log(this.$refs[key])
}
}
}; new Vue({
el:"#app",
data(){
return { }
},
template:`<App />`,
components:{
App
}
})
</script>
</body>
</html>

2.webpack模块的使用

  1.nodejs安装

  2.npm init --yes(管理包)

  

  3. vue init webpack 项目名

  

  4.ele-ui使用

    npm i element-ui -S

    在main.js中

      import ElementUI from 'element-ui';

      import 'element-ui/lib/theme-chalk/index.css';   

      Vue.use(ElementUI);
5.jquery的使用
  npm install jquery
  在webpack.base.conf.js中修改
    var webpack = require('webpack');
    
plugins:[
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
})
],
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'$': 'jquery',
}
},
 

vue之获取原生的dom的方式的更多相关文章

  1. Vue 4 -- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用

    一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...

  2. Vue(4)- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用

    一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...

  3. 获取原生的DOM方式,DIY脚手架,vue-cli的使用

    一 . 获取原生的DOM的方式 在js中,我们可以通过id, class 或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加 ref 属性,通过 this.$r ...

  4. vue如何获取并操作DOM元素

    原文地址 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加re ...

  5. [前端] VUE基础 (6) (v-router插件、获取原生DOM)

    一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...

  6. 获取原生DOM,diy脚手架,vue-clide使用,element-ui的使用

    一.获取原生DOM的方式 给标签或者属性添加ref属性 //1.添加属性 <div ref='shy'><div> <Home ref='home'></Ho ...

  7. JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  8. vue 改变数据DOM不更新,获取不到DOM的解决方法

    1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...

  9. Vue源码探究-虚拟DOM的渲染

    Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue ...

随机推荐

  1. 客户端请求服务器端通信, Web 编程发展基础|乐字节

    乐字节的小伙伴们,好久不见,甚是想念啊! 前面我发布的文章算是把Java初级基础阶段讲完了,接下来小乐将会给大家接着讲Java中级阶段——Javaweb. 首先,我们要看看Javaweb阶段主要重点掌 ...

  2. Spring中的常用注解

    Spring中的常用注解 1.@Controller 标识一个该类是Spring MVC controller处理器,用来创建处理http请求的对象.

  3. K8S从入门到放弃系列-(15)Kubernetes集群Ingress部署

    Ingress是kubernetes集群对外提供服务的一种方式.ingress部署相对比较简单,官方把相关资源配置文件,都已经集合到一个yml文件中(mandatory.yaml),镜像地址也修改为q ...

  4. 解决dubbo注册zookeeper默认内网ip注册

    前端时间做新项目的时候遇到一个dubbo的一个问题,在我们项目搭建好后使用了其他同事的支付服务,支付服务架构的方式使用了dubbo服务的方式,使用zookeeper作为注册中心,我们新项目使用dubb ...

  5. Hbase面试题

    hbase的特点 )hbase适合存储海量数据,是一个分布式的,基于列式存储的数据库,基于hadoop的hdfs存储,zookeeper进行管理. )hbase 适合存储半结构化或非结构化的数据,对于 ...

  6. python实战项目 — 使用bs4 爬取猫眼电影热榜(存入本地txt、以及存储数据库列表)

    案例一: 重点: 1. 使用bs4 爬取 2. 数据写入本地 txt from bs4 import BeautifulSoup import requests url = "http:// ...

  7. 29 匿名内部类、函数型接口、lamda表达式的引入

    匿名内部类 参考:https://www.runoob.com/w3cnote/java-inner-class-intro.html 进入后搜索匿名内部类. 函数型接口 函数式接口(Function ...

  8. Golang 实现单例模式

    目录 只适用于单线程环境 支持并发版本 优化并发版本 sync.Once版本 只适用于单线程环境 package main import "fmt" type Single str ...

  9. Fanuc Cnc 数控系统,PC端下发NC程序到CNC端,现场测试通过。

    1.这几天把FANUC 数据采集(产量,状态,轴负载等),以及NC程序下发封装成独立的dll,方便其它项目调用,自己顺便写了下demo测试,在车间测试了几天,效果很好,完善了许多细节. 2.大概的界面 ...

  10. COCOeval接口使用

    COCOeval类简介 class COCOeval: # Interface for evaluating detection on the Microsoft COCO dataset. # # ...