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] 377. Combination Sum IV 组合之和 IV

    Given an integer array with all positive numbers and no duplicates, find the number of possible comb ...

  2. VisualStudio开发UE4工程设置

    转自:http://wangjie.rocks/2016/06/24/ue4-vs-setup/ 推荐插件 Visual Assist X C++ 代码高亮 UnrealVS Extension UE ...

  3. GCC 基础知识

    目录 GCC 基础知识 一.GCC编译选项解析 二.多模块.多个文件一起编译 三.静态库与动态库 四.查看帮助文档 GCC 基础知识 一.GCC编译选项解析 1. 常用编译选项 命令格式:gcc [选 ...

  4. Linux 总结篇

    1. sudo -i update upgrade install 包名 (openjdk-8-jdk) autoremove 自动删除不需要的包(remove卸载) sudo apt-get 2. ...

  5. LeetCode977.Squares of a Sorted Array

    题目 977. Squares of a Sorted Array Given an array of integers A sorted in non-decreasing order, retur ...

  6. [洛谷P3966][TJOI2013]单词

    题目大意:有$n$个字符串,求每个字符串在所有字符串中出现的次数 题解:$AC$自动机,每个节点被经过时$sz$加一,每一个字符串出现次数为其$fail$树子树$sz$和 卡点:$AC$自动机根节点为 ...

  7. CF1090H Linearization 构造、位运算、前缀和

    传送门 有点神仙的题目 首先注意到对于串\(s\),\(b=s_0\)一定会比\(b = s_0 \bigoplus 1\)更优 考虑先分析linear串的性质.注意到位运算考虑按位处理.我们考虑\( ...

  8. Unity性能优化-音频设置

    没想到Unity的音频会成为内存杀手,在实际的商业项目中,音频的优化必不可少. 1. Unity支持许多不同的音频格式,但最终它将它们全部转换为首选格式.音频压缩格式有PCM.ADPCM.Vorbis ...

  9. java之struts2的执行流程讲解(1)

    1.struts2的执行流程 请求--->Tomcat(判读项目是否存在)--->项目的web.xml--->struts2的核心过滤器 --->判读请求的资源(hello.a ...

  10. ASP.NET Core在支付宝小程序中使用signalR

    Github有一个经过重写的微信小程序SignalR的js类库 https://github.com/liangshiw/SignalRMiniProgram-Client 于是我把他改成支付宝小程序 ...