1.refs属性的使用

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</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'>

                <Test2 ref = 'efg'/>

                <Test ref = 'abc'/>

            </div>

        `,

        mounted(){

//            console.log(this.$refs.input);//获取原始DOM

            this.$refs.input.focus();

            console.log(this.$refs.abc); //获取组件实例对象

            console.log(this.$refs.abc.$parent); //获取父组件

            console.log(this.$refs.abc.$root);

            console.log(this.$children);

//            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.axios(相当于jquery中的ajax)

将axios挂载到vue的原型上,那么在各个组件中都能使用,因为面向对象

下载axios

npm install axios

在vue中的使用

main.js中:

import Axios fomr 'axios'

Vue.prototype.$https = Axios

3.ElementUI的使用

下载element-ui

npm install element-ui -S

在Vue中引入element-ui

在main.js中写入以下内容:

import Vue from 'vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';//样式文件需要单独引入

import App from './App.vue';

Vue.use(ElementUI);

new Vue({

    el: '#app',

    render: h =>(App)

});

Vue的基本使用(四)的更多相关文章

  1. Vue基础系列（四）——Vue中的指令（上）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  2. 详解vue 路由跳转四种方式 (带参数)

    详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 ...

  3. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  4. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

  5. vue实战记录（四）- vue实现购物车功能之过滤器的使用

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...

  6. Vue入门系列（四）之Vue事件处理

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  7. Vue 简单的总结四(项目流程,DIY脚手架、vue-cli的使用)

    项目流程 1.下载 cdn 2.引包 vue-router依赖vue vue-router.js 3.如果是模块化机制 Vue.use(vue-router) 4.创建示例 let Home = {/ ...

  8. 从无到有构建vue实战项目（四）

    六.webpack的安装和配置 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本 ...

  9. Vue 学习笔记（四）

    一.路由简单示例 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <sc ...

  10. webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

随机推荐

  1. T4随记

    关于T4模板的信息我就不赘述了,百度一大堆 MSDN的介绍 https://msdn.microsoft.com/zh-cn/library/bb126478.aspx 下面是简单的一个示例,从类中获 ...

  2. qtchooser - a wrapper used to select between Qt development binary（2种方法）

    ---------------------------------------------------------------------------------------------------- ...

  3. Realm_King 之 .NET操作XML完整类

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Xml;u ...

  4. Silverlight Virtualization Overview

    当ListBox使用StackPanel作为容器时,如果数据源包含大量数据时,每一条数据都要创建可视化的Item来承载数据,创建这些容器就需要消耗很多时间和内存,另外滚动也非常慢,因为需要计算所有这些 ...

  5. Spring中如何获取request的方法汇总及其线程安全性分析

    前言 本文将介绍在Spring MVC开发的web系统中,获取request对象的几种方法,并讨论其线程安全性.下面话不多说了,来一起看看详细的介绍吧. 概述 在使用Spring MVC开发Web系统 ...

  6. Varnish动静分离配置示例

    动静分离 [root@varnish ~]# vim /etc/varnish/default.vclvcl 4.0;backend web { .host = "192.168.30.15 ...

  7. JavaScript 操作 DOM 总结

    基本概念 DOM 是 JavaScript 操作网页的接口,全称为"文档对象模型"(Document Object Model).它的作用是将网页转为一个 JavaScript 对 ...

  8. spring boot 2.x 系列 —— actuator 服务监控与管理

    文章目录 一.概念综述 1.1 端点 1.2 启用端点 1.3 暴露端点 1.4 健康检查信息 二.项目说明 1.1 项目结构说明 1.2 主要依赖 1.3 项目配置 1.4 查看监控状态 三.自定义 ...

  9. .NET Core IdentityServer4实战 第Ⅴ章-单点登录

    OiDc可以说是OAuth的改造版,在最初的OAuth中,我们需要先请求一下认证服务器获取下Access_token,然后根据Access_token去Get资源服务器, 况且OAuth1 和 2 完 ...

  10. HDU 3938：Portal（并查集+离线处理）

    http://acm.hdu.edu.cn/showproblem.php?pid=3938 Portal Problem Description   ZLGG found a magic theor ...