Vue的基本使用(四)

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)
});

 

posted @ 2018-12-02 19:29  小鸽鸽OvO  阅读(389)  评论(0)  编辑  收藏  举报