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. Elasticsearch ML

    Elastic公司在收购了Prelert半年之后,终于在Elasticsearch 5中推出了Machine Learning功能.Prelert本身就擅长做时序性数据的异常检测,从这点上讲也比较契合 ...

  2. C++ 王者归来：对编程语言的需求总结为四个：效率，灵活，抽象，生产率（C++玩的是前三个，Java和C#玩的是后两个）

    Why C++ ? 王者归来(转载) 因为又有人邀请我去Quora的C2C网站去回答问题去了,这回是 关于 @laiyonghao 的这篇有点争议的博文<2012 不宜进入的三个技术点>A ...

  3. 32个Python爬虫项目让你一次吃到撑

    整理了32个Python爬虫项目.整理的原因是,爬虫入门简单快速,也非常适合新入门的小伙伴培养信心.所有链接指向GitHub,祝大家玩的愉快~O(∩_∩)O WechatSogou [1]- 微信公众 ...

  4. Servlet 3.0异步特性初探

    Servlet 是 Java 为了编写服务端程序而定义的一个接口规范,在 Servlet 3.0 以后支持了异步的操作. 最近项目添加了一个代码热部署的功能,在客户端输入信号,信号到达 Web 服务器 ...

  5. node.js简单数据接口开发

    随着网络时代的快速发展,前端开发不仅仅是做出漂亮的页面就可以了,还要会一点后端语言,那么后端语言有Java,php,node.js最常见,那我们应该学哪一种呢,为了让我们自己更好的学习,我推荐选择no ...

  6. Spring 5.x 、Spring Boot 2.x 、Spring Cloud 与常用技术栈整合

    项目 GitHub 地址:https://github.com/heibaiying/spring-samples-for-all 版本说明: Spring: 5.1.3.RELEASE Spring ...

  7. 【python3两小时快速入门】入门笔记02：类库导入

    昨晚遇到了一个问题:pip下载了request类库,以及在pyCharm的setting中下载了request类库,项目左侧也能显示出requst文件夹,但是引入报错! 这里贴一下我的解决方案,在此记 ...

  8. 【粗略版】Linux deploy手机上创建自己的服务器

    偶尔看见了一篇安卓手机z安装linux的文章,正好自己有一个旧手机,心里有个大胆的想法. 简单来说,就是把旧手机安装linux然后装上容器,尝试部署一个简单项目,下面会记录下过程: 首先了解下这个软件 ...

  9. 新补充 JSSSS

    条件语句 补充: var a=“hello world” a这个变量是字符串了 对于里面每一个字母来说 他是字节 里面有11个字节 字节总数用length表示 如下: 根据上面的内容咱们又发现了一个运 ...

  10. 喵星人教你 HTTP 状态码

    在我们日常 Web 开发中,或多或少的都接触过 HTTP 状态码,那这些状态码代表什么意思呢?熟悉这些状态码又有什么好处呢?下面我就为大家一一道来,可以把本片文章'收藏'以备不时之需. HTTP 状态 ...