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 ...
随机推荐
- [LeetCode] 774. Minimize Max Distance to Gas Station 最小化加油站间的最大距离
On a horizontal number line, we have gas stations at positions stations[0], stations[1], ..., statio ...
- 采用socket传输文件
采用socket传输文件 客户端输入文件的地址,服务端判断文件存在,就将文件传输到客户端 package com.fly.socket; import java.io.BufferedInputStr ...
- Appium移动端自动化测试--录制测试用例并运行
目录 文章目录如下 录制用例并执行 1.使用Appium desktop录制用例 2.安装Pythony依赖Appium-Python-Client 3.增加隐式等待增强稳定性 4.重新运行 文章目录 ...
- Python3定时器任务代码
使用threading写的一个定时器任务demo: import time import sys import signal import datetime import threading #定时器 ...
- xorm-创建时间created
package main import ( "fmt" _ "github.com/go-sql-driver/mysql" "github.com/ ...
- 协议——SPI
SPI(Serial Peripheral interface)是由摩托罗拉公司定义的一种串行外围设备接口,是一种高速.全双工.同步的通信总线,只需要四根信号线即可,节约引脚,同时有利于PCB的布局. ...
- html input复选框的checked属性
input --checked: 只要复选框有checked属性,不管属性值为空或者为true or false或任意值,复选框都会被选中.切忌:checked属性值不要带引号 <input t ...
- shiro源码解析
一.web.xml 文件中配置的 DelegatingFilterProxy 的 <filter-name>为啥与Spring文件中配置的ShiroFilterFactoryBean的Be ...
- TypeScript之枚举
什么是枚举类型,有什么作用? 枚举类型就是一个用来组织一些有相似之处的常量的对象,作用就是管理常量,让常量更规范,统一.例: enum Direction { Up = 1, Down, Left, ...
- go 学习笔记（1）go command
常用命令 go command [arguments] 1) go build 跨平台编译: env GOOS=linux GOARCH=amd64 go build 2) go install : ...