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 ...
随机推荐
- RSA 系统找不到指定的文件
未测试 System.Security.Cryptography.RSACryptoServiceProvider rsa = new RSACryptoServiceProvider(); 改为 C ...
- java里的 int vs Integer
int vs Integer 基本类型int的默认值为0;对应的封装类型Integer的默认值为null Integer对象会占用更多的内存.Integer是一个对象,需要存储对象的元数据.但是int ...
- Neo4j CQL基本使用
Neo4j用CQL作为查询语言 CQL Neo4j图形数据库的查询语言 是一种声明性模式匹配语言 遵循SQL语法 语法是非常简单且人性化.可读的格式 1.启动服务,打开浏览器 在数据浏览器中的美元提 ...
- 最新 大众书网java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.大众书网等10家互联网公司的校招Offer,因为某些自身原因最终选择了大众书网.6.7月主要是做系统复习.项目复盘.Leet ...
- SpringBoot2+Druid+MyBatis+MySql实现增删改查
1.配置pom.xml文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...
- Centos安装nodejs，并运行项目
不建议编译安装,对gcc要求比较高 安装nodejs yum install nodejs nodejs升级 npm i -g n --force n stable npm升级 npm install ...
- Kafka排队：Apache Kafka作为消息传递系统
1.目标 在这个Apache Kafka教程中,我们将学习Apache Kafka Queuing 的概念 .基本上,Kafka中的排队是传统消息传递的模型之一.所以,让我们首先简要介绍Kafka ...
- maven dependency中provided和compile的区别
重点:这个项目打成war包时,scope=provided的jar包,不会出现在WEB-INFO/lib目录下,而scope=compile的jar包,会放到WEB-INFO/lib目录 scope= ...
- 视图集ViewSet
一 .视图集ViewSet 使用视图集ViewSet,可以将一系列逻辑相关的动作放到一个类中: list() 提供一组数据 retrieve() 提供单个数据 create() 创建数据 update ...
- 【SQL Server数据迁移】64位的机器：SQL Server中查询ORACLE的数据
从SQL Server中查询ORACLE中的数据,可以在SQL Server中创建到ORACLE的链接服务器来实现的,但是根据32位 .64位的机器和软件, 需要用不同的驱动程序来实现. 在64位的机 ...