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. Spring boot后台搭建二集成Shiro实现用户验证

    上一篇文章中介绍了Shiro 查看 将Shiro集成到spring boot的步骤: (1)定义一个ShiroConfig,配置SecurityManager Bean,SecurityManager ...

  2. H5混合开发中android终端和ios终端常见的兼容问题2

    转自 https://www.cnblogs.com/stoneniqiu/p/6077112.html 1.ios键盘挡住输入框. setInterval(function () { if (doc ...

  3. K8S+GitLab+.net core-自动化分布式部署-2

    K8S+GitLab-自动化分布式部署ASP.NET Core(二) ASP.NET Core DevOps K8S+GitLab-自动化分布式部署ASP.NET Core(二) ASP.NET Co ...

  4. svn 版本控制搭建

    1.安装SVN yum install subversion 2.开启服务 systemctl start svnserve.service 3.创建仓库 svnadmin create /opt/s ...

  5. idea打开Run Dashboard

    在springcloud中,通常会开启多个微服务.单个一个个开就很麻烦 如果没有发现,可以在工程目录下找.idea文件夹下的workspace.xml,在其中增加如下组件 <component ...

  6. 微信小程序获取位置

    获取位置 getLocation wx.getLocation({ type: 'wgs84', success (res) { const latitude = res.latitude const ...

  7. LeetCode 150. 逆波兰表达式求值(Evaluate Reverse Polish Notation) 24

    150. 逆波兰表达式求值 150. Evaluate Reverse Polish Notation 题目描述 根据逆波兰表示法,求表达式的值. 有效的运算符包括 +, -, *, /.每个运算对象 ...

  8. DSL查询与过滤

    1. 什么是DSL查询 由ES提供丰富且灵活的查询语言叫做DSL查询(Query DSL),它允许你构建更加复杂.强大的查询. DSL(Domain Specific Language特定领域语言)以 ...

  9. python 之 Django框架(Django框架简介、视图装饰器、request对象、Response对象)

    12.33 Django框架简介: MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器( ...

  10. 气象netCDF数据可视化分析

    气象netCDF数据可视化分析 2019-09-19 15:34:22 自走棋 阅读数 162更多 分类专栏: web前端   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载 ...