vue之获取原生的dom的方式
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的方式的更多相关文章
- Vue 4 -- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用
一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...
- Vue（4）- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用
一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...
- 获取原生的DOM方式,DIY脚手架,vue-cli的使用
一 . 获取原生的DOM的方式 在js中,我们可以通过id, class 或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加 ref 属性,通过 this.$r ...
- vue如何获取并操作DOM元素
原文地址 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加re ...
- [前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
- 获取原生DOM,diy脚手架,vue-clide使用,element-ui的使用
一.获取原生DOM的方式 给标签或者属性添加ref属性 //1.添加属性 <div ref='shy'><div> <Home ref='home'></Ho ...
- JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
- vue 改变数据DOM不更新，获取不到DOM的解决方法
1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...
- Vue源码探究-虚拟DOM的渲染
Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue ...
随机推荐
- consul reconnect_timeout
reconnect_timeout这将控制从集群中彻底删除发生故障的节点需要多长时间.默认值为72小时,建议将其设置为至少为节点或网络分区的预期可恢复的最大停机时间的两倍.警告:将此时间设置得太低可能 ...
- win10安装网络适配器
上面这个有些叫Microsoft Loopback Adapter
- Postman 使用方法详细介绍
1,下载安装: https://www.getpostman.com/apps 2,打开Postman,如图所示: 3,创建一个接口项目 4,新增接口文件 5,下面以登录接口login为例,介绍如何做 ...
- FDD与TDD的区别
LTE通常分为FDD LTE和TDD LTEFDD,频分双工(Frequency Division Duplexing)我和你通信,像广播一样,只能我说你听,是单工:像对讲机一样,同一时间只能一方说, ...
- SQL——AS别名
一.SQL别名的基本用法 SQL可以为表或者列指定别名. 语法格式如下(表): SELECT 列名1,列名2... FROM 表名 AS 别名; 语法格式如下(列): SELECT 列名1 AS 别名 ...
- Python简介及开发环境搭建
Python简介 Python是一门动态解释性的强类型定义的计算机程序设计语言,是一种完全面向对象的语言,由荷兰人"龟叔"-Guido van Rossum于1989年开发,于19 ...
- 【LEETCODE】45、766. Toeplitz Matrix
package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array * ...
- Shiro集成SSM基于动态URL权限管理(二)
这个案例基于上一个demo扩展而来.所以数据库表,在Shiro集成SSM基于URL权限管理(一)开篇的一致.如果上个demo操作的建议重新导入一次,避免出现问题. 而这次都不是通过固定写在方法上的注解 ...
- vue+element树组件 实现树懒加载
本文连接https://www.cnblogs.com/aknife/p/11709255.html 一.页面样式 二.数据库 三.前端页面代码 <template> <el-tre ...
- quartz2.3.0（四）JobDataMap—带状态集合的定时器内置集合
任务类 package org.quartz.examples.example4; import java.util.Date; import org.quartz.DisallowConcurren ...