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. 【编程开发】x86,I386,i686, x86_64, x64,amd64、Windows Linux AIX下查看CPU位数和操作系统位数、rpm包名

    a2ps-4.13b-57.2.el5.i386.rpm 每一个rpm包的名称都由"-"和"."分成了若干部分.就拿 a2ps-4.13b-57.2.el5.i ...

  2. php_mvc实现步骤九（登录验证码，退出-登录标记）

    shop34-17-登录验证码 验证码的分析 登录:防止暴力破解 论坛:防止灌水水 展示类:被抓取. 需要技术: 图片处理技术. 会话session技术. PHP图片处理技术 – GD 具体操作步骤 ...

  3. Pytorch1.3源码解析-第一篇

    pytorch$ tree -L 1 . ├── android ├── aten ├── benchmarks ├── binaries ├── c10 ├── caffe2 ├── CITATIO ...

  4. Linux下zookeeper单机版详细安装

    Linux下zookeeper单机版详细安装 1.zookeeper简介 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop ...

  5. c++ 基础学习（二）—— IO 对象

    1. IO 类 c++ 语言不能直接处理输入输出,而是通过一族定义在标准库中的类型来处理 IO,这些类型支持设备读取数据,向设备写入数据的 IO 的数据操作. istream 输入流类型,提供输入操作 ...

  6. SAS学习笔记62 通过压缩变量长度来实现数据集压缩

    有时候从其他数据库过来的字符型变量Length很长,导致数据集文件很大,可以通过压缩变量长度来实现数据集压缩 具体思路: LENGTH语句设置所有变量真实长度 SET数据集的时候对原有变量进行RENA ...

  7. idea 代码热启动配置方法

    Restart Server:代码已更新重启tomcat服务器

  8. (转)AS3正则：元子符,元序列,标志,数量表达符

    (转)AS3正则:元子符,元序列,标志,数量表达符: AS3正则:元子符,元序列,标志,数量表达符 七月 4th, 2010 归类于 AS3前端技术 作者Linkjun 进行评论 as3正则:元子符, ...

  9. Gym102028G Shortest Paths on Random Forests 生成函数、多项式Exp

    传送门 神仙题-- 考虑计算三个部分:1.\(n\)个点的森林的数量,这个是期望的分母:2.\(n\)个点的所有森林中存在最短路的点对的最短路径长度之和:3.\(n\)个点的所有路径中存在最短路的点对 ...

  10. Layui + thymeleaf org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: " 错误解决

    解决方法: 1.将layui的代码移动到新的js文件当中,用template模板引擎的方式引入: <script th:src="@{/static/js/facility/mover ...