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 ...
随机推荐
- 阿里云盾AliYunDun服务IO超高
停止阿里云盾AliYunDun服务解决大量写磁盘问题-小内存ECS服务器 阿里云数据库在没备案,涉及大量IO操作时会自动启动阿里云盾这个服务,会导致服务器变得很卡,一直持续百分之99,一顿重启没有什么 ...
- kubernetes-subpath用法（把文件挂载在已存在的目录下，不覆盖原目录）
以ngxin的配置文件为例子: nginx-deployment.yaml : apiVersion: v1 kind: ConfigMap metadata: name: nginx-cm data ...
- layui父页面执行子页面方法
parent.window[layero.find('iframe')[0]['name']].子页面方法(); layero.find('iframe')[0].contentWindow.子页面方 ...
- 用vue实现列表分页和按钮操作
为中华之崛起而读书 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- Windows中使用 Python 调用 Matlab 程序
https://ww2.mathworks.cn/help/matlab/matlab_external/system-and-configuration-requirements.html http ...
- Scala 函数入门之过程、lazy值和异常
Scala 过程 在Scala中,定义函数时,如果函数体直接包裹在了花括号里面,而没有使用=连接,则函数的返回值类型就是Unit.这样的函数就被称之为过程.过程通常用于不需要返回值的函数. 过程还有 ...
- Spring Cloud Stream如何消费自己生产的消息
在上一篇<Spring Cloud Stream如何处理消息重复消费>中,我们通过消费组的配置解决了多实例部署情况下消息重复消费这一入门时的常见问题.本文将继续说说在另外一个被经常问到的问 ...
- promethus监控mysql
一.mysqld_exporter安装 下载页面 https://github.com/prometheus/mysqld_exporter/releases 下载最新版本 https://githu ...
- git 学习笔记 ---安装
Git是什么? Git是目前世界上最先进的分布式版本控制系统(没有之一). 安装Git 在Linux上安装Git 首先,你可以试着输入git,看看系统有没有安装Git: $ git The progr ...
- JavaScript是单线程还是多线程（转）
多线程要考虑线程之间的资源抢占,死锁,冲突之类一系列问题.JavaScript作为一门客户端脚本,貌似没有多线程的一些列问题.那么JavaScript是单线程还是多线程?通过查资料总结了JavaScr ...