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. VS2019/VS2017怎么更改visual studio新建项目的默认路径

    1.点击“工具” 2.选择“选项” 3.点击左边的“项目和解决方案”展开选择“常规” 4.在右边- ”项目位置“来自定义默认路径 5.“确定”保存后下次新建项目就是此默认路径

  2. 如何立即回收内存C#

    C#如何立即回收内存 1.把对象赋值为null 2.立即调用GC.Collect();   注意:这个也只是强制垃圾回收器去回收,但具体什么时候执行不确定.    代码:   [System.Runt ...

  3. spring security的BCryptPasswordEncoder加密和对密码验证的原理

    目录 BCryptPasswordEncoder加密和对密码验证的原理 一.加密算法和hash算法的区别 二.源码解析 1. encode方法 2. BCrypt.hashpw方法 3. matche ...

  4. LeetCode 84. 柱状图中最大的矩形(Largest Rectangle in Histogram)

    84. 柱状图中最大的矩形 84. Largest Rectangle in Histogram

  5. xshell和Xftp连接虚拟机

    首先连接虚拟机之前,先配置自己的IP地址,见博客https://www.cnblogs.com/xuzhaoyang/p/11264573.html xshell和Xftp下载请到官网http://w ...

  6. Java开发笔记（一百三十四）Swing的基本对话框

    桌面程序在运行过程中,时常需要在主界面之上弹出小窗,把某种消息告知用户,以便用户及时知晓并对症处理.这类小窗口通常称作对话框,依据消息交互的过程,可将对话框分为三类:消息对话框.确认对话框.输入对话框 ...

  7. 数据结构-二叉树的遍历实现笔记C++

    二叉树的遍历实现,可以用递归的方法也可以用非递归的方法.非递归的方法可以借助栈(前序遍历,中序遍历,后序遍历),也可以借助队列(层次遍历).本次笔记只使用了递归的方法来进行前序遍历,中序遍历,后序遍历 ...

  8. Modelsim——显示状态机名称的方法

    方法在本人博客<状态机的Verilog写法>已经写明,为了方便查看,特意拎出来. 方法1: Testbench 设计文件含有状态机时,对应的仿真文件testbench里增加一段参数转ASC ...

  9. robotFramework_Jquery语法

    向您的页面添加 jQuery 库 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数.那么我们怎么判断页面中是否使用了Jquery库呢? 如下图,当页面中引入 ...

  10. [SOJ #112]Dirichlet 前缀和

    题目大意:给定一个长度为$n$的序列$a_n$,需要求出一个序列$b_n$,满足:$$b_k=\sum\limits_{i|k}a_i$$$n\leqslant10^7$ 题解:$\mathrm{Di ...