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. [LeetCode] 636. Exclusive Time of Functions 函数的独家时间

    Given the running logs of n functions that are executed in a nonpreemptive single threaded CPU, find ...

  2. [LeetCode] 774. Minimize Max Distance to Gas Station 最小化加油站间的最大距离

    On a horizontal number line, we have gas stations at positions stations[0], stations[1], ..., statio ...

  3. Jenkins - 插件管理

    1 - Jenkins插件 Jenkins通过插件来增强功能,可以集成不同的构建工具.云平台.分析和发布工具等,从而满足不同组织或用户的需求. Jenkins 提供了不同的的方法来安装插件(需要不同级 ...

  4. /x86_64-linux-gnu/libSM.so: undefined reference to `uuid_generate@UUID_1.0'错误

    在编译PCL的时候总是报错,其他人都没问题 后来发现是我cmakePCL的时候,QT引用的是anaconda里的qt,把这个一改果然没问题了,耽误了一天时间. 感谢stack上这位老铁

  5. 你应该掌握linux中Bash命令的一些快捷方式

    在本文中,我们将分享许多对任何Linux用户都有用的Bash命令行快捷方式.这些快捷方式可以快速地执行某些动作,例如访问和运行先前执行的命令,打开编辑器,在命令行上编辑/删除/更改文本,移动光标,控制 ...

  6. Python中的int函数

    python帮组文档 class int(x, base=10) Return an integer object constructed from a number or string x, or ...

  7. day34——僵尸进程和孤儿进程、互斥锁、进程之间的通信

    day34 僵尸进程和孤儿进程 基于unix环境(linux,macOS) 主进程需要等待子进程结束之后,主进程才结束 主进程时刻监测子进程的运行状态,当子进程结束之后,一段时间之内,将子进程进行回收 ...

  8. LeetCode第151场周赛（Java）

    这是我第一次写周赛的题目,而且还是虚拟的.从这次起,以后就将所有错过的题目都写到博客来.当然既然是我错的,那代码肯定不是我自己的.我会注明来源.并且我会自己敲一遍.多总结总是没坏处的. 另外比较糟糕的 ...

  9. Serializer组件

    Serializer组件 一 .序列化器-Serializer 作用: 序列化,序列化器会把模型对象转换成字典,经过response以后变成json字符串 反序列化,把客户端发送过来的数据,经过req ...

  10. 我的 VSCode 配置

    VSCode 配置 先安装 Settings Sync 插件,然后点击"download from github"之类的一个链接,弹出一个输入框,输入 a5922d436b82dd ...