码迷,mamicode.com
首页 > 其他好文 > 详细

Vue的基本使用(四)

时间:2018-12-02 20:06:22      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:ajax   child   nbsp   doc   console   component   new   引入   element   

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的基本使用(四)

标签:ajax   child   nbsp   doc   console   component   new   引入   element   

原文地址:https://www.cnblogs.com/s593941/p/10054329.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!