Vue-多个Vue实例、注册全局组件，Fetch、axios

最新推荐文章于 2024-05-05 15:15:00 发布

NeilNiu

最新推荐文章于 2024-05-05 15:15:00 发布

阅读量2.8k

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_30353203/article/details/121803152

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、多个Vue实例

vue同样可以初始化多个vue实例对象，然后里面的data、 methods、computed用法都是一样的

注意在不同的实例对象里，如果想使用别的实例对象里的data的某个属性，写法不用this. ，要用

某个对象.。

const one = new Vue({
    el: "#vue-app-one",
    data() {
        return {
            name: '',
            age: 31,
            a: 0,
            b: 0,
            title: 'vue-app-one!!!'
        }
    },
    methods: {
       
    },
    watch: {
       
    },
    computed: {
      
    }

});
const two = new Vue({
    el: "#vue-app-two",
    data() {
        return {
            title: 'vue-app-two'
        }
    },
    methods: {
        changeOneTitle() {
            one.title = "这是vue-app-one的title";
        }
    },
    watch: {

    },
    computed: {

    }
})

二、注册全局组件

使用V.component('',{})，第一个参数是自定义名字，第二个参数是一个对象，把vue实例里的属性

、方法都抽离出来。写法如下，template是固定写法，使用反引号，就不用拼接。点击修改按钮，只能修改一个实例里的值，如果想要点击一个修改按钮，修改两个实例里属性值，可以设置成全局变量。

Vue.component('Greeting', {
    //html模板
    template: `
    <p>这是一个全局的组件，可以在任意一个容器里显示
    我的名字是:{{name}}
    我的年龄是：{{age}}
    <button v-on:click='changeAge'>修改名字</button>
    
    </p>
  
    
    `,
    //属性
    data() {
        return {
            name: "testor",
            age: 12
        }

    },
    methods: {
        changeAge() {
            this.name = '我是dev'
        }
    }
});

const one = new Vue({
    el: "#vue-app-one",
    data() {
        return {
        
        }
    },
    methods: {
       
    },
    watch: {
      
    },
    computed: {
       
    }

});
const two = new Vue({
    el: "#vue-app-two",
    data() {
        return {
           
        }
    },
    methods: {
       
    },
    watch: {

    },
    computed: {

    }
})

使用let，定义一个变量data，然后return返回的时候返回这个data，就可以点击一个修改按钮，修改两个实例里的属性值

let data = {
    name: "testor",
    age: 12
}
Vue.component('Greeting', {
    //html模板
    template: `
    <p>这是一个全局的组件，可以在任意一个容器里显示
    我的名字是:{{name}}
    我的年龄是：{{age}}
    <button v-on:click='changeAge'>修改名字</button>

    </p>
  
    
    `,
    //属性
    data() {
        return data

    },
    methods: {
        changeAge() {
            this.name = '我是dev'
        }
    }
});

const one = new Vue({
    el: "#vue-app-one",
    data() {
        return {
       
        }
    },
    methods: {
       
    },
    watch: {
       
    },
    computed: {
       
    }

});
const two = new Vue({
    el: "#vue-app-two",
    data() {
        return {
        
        }
    },
    methods: {
       
    },
    watch: {

    },
    computed: {

    }
})

三、Fetch用法

fetch发送get请求和post请求

get请求，搜索jsonplaceholder 使用这里面的接口，mounted是一个钩子函数，它会自动执行这个函数，在页面没有渲染之前就会执行这个函数里面的方法，res是返回的一个Promise，

res.json()就是转换成json，然后使用return就是继续，最后把todos的值赋给this.todos，在html页面显示出来。

post请求，需要写method，body 固定写法，JSON.string(this.todo)，headers

同样使用.then继续，最后提交的值用unshift在html页面中打印

const one = new Vue({
    el: "#vue-app-one",
    data() {
        return {
            todos: [],
            todo: {
                title: '',
                completed: false
            }
        }
    },
    mounted() {
        fetch("http://jsonplaceholder.typicode.com/todos")
            .then(res => {
                // console.log(res.json())
                return res.json();

            }).then(todos => {
                this.todos = todos
            })

    },
    methods: {
        onSubmit() {
            fetch("http://jsonplaceholder.typicode.com/todos", {
                method: "POST",
                body: JSON.stringify(this.todo),
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(res => {
                return res.json()
            }).then(todo => {
                console.log(todo)
                this.todos.unshift(todo)

            })
        }
    }


});

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue CDN</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="vue-app-one">
        <h1>Fetch</h1>

        <form @submit.prevent="onSubmit">
            <input type="text" v-model="todo.title">
            <input type="checkbox" v-model="todo.completed">
            <input type="submit" value="提交">
        </form>
        <ul>
            <li v-for="todo in todos">
                <h1>{{todo.title}}</h1>
                <p v-if="todo.completed">{{todo.completed}}</p>

            </li>
        </ul>

    </div>


</body>

<script src="app.js"></script>

</html>

四、axios用法

百度axios，然后可以看到一个axios中文文档，引入方式有两种使用npm，npm install axios

或者用cdn的方式引入，axios 发get请求的时候，直接返回的是json，无需再转了，直接用res.data就可以取到里面的值。axios发post请求的时候，不用再传对象，直接传接收的值即可，也同样不用转json

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

//实例化Vue对象
new Vue({
    el: "#vue-app",//element 含义是vue实例要操作哪一个元素对象
    data() {
        return {
            todos: [],
            todo: {
                title: '',
                completed: false
            }
        }
    },
    mounted() {
        axios.get('http://jsonplaceholder.typicode.com/todos')
            .then(res => {
                this.todos = res.data
            })
        
    },
    methods: {
        onSubmit() {
            axios.post('http://jsonplaceholder.typicode.com/todos',
                this.todo
            ).then(res => {
                console.log(res.data)
                this.todos.unshift(res.data)
            })
          
        }



    }

})

NeilNiu

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue-多个Vue实例、注册全局组件，Fetch、axios

一、多个Vue实例vue同样可以初始化多个vue实例对象，然后里面的data、 methods、computed用法都是一样的注意在不同的实例对象里，如果想使用别的实例对象里的data的某个属性，写法不用用this. ，要用某个对象.。const one = new Vue({ el: "#vue-app-one", data() { return { name: '', age: 31,
复制链接

扫一扫