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

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

使用uniapp注册全局组件
首先我们要在全局注册全局组件创建一个组件后在main.js文件下当然注册组件首先要新建一个组件目录然后引入. //注册全局组件 //首先在文件下创建一个组件 import global fr ...
uni-app注册全局组件 - 符合easycom
通知本文已过时,HBuilderX已发布新的自定义组件方法:uni_modules 本文的/components/xx/xx.vue会在新版uni-app中与原生ui组件冲突. 新方法详见: [we ...
vue出现您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。或者you register the component correctly? For recursive components
XXX - did you register the component correctly? For recursive components, make sure to provide the & ...
uni-app注册全局组件
有一些组件可能会被很多个页面使用到,比如说,自定义的导航栏,如果在每一个页面都引用一次就很麻烦了,这个时候可以将该组件注册为全局组件了有两种方法可以注册为全局组件第一种是 easycom组件模式 ...
Vue(三)：vue基础入门
目录一.侦听器 1.1 什么是watch侦听器 1.2 方法格式的侦听器的应用--判断用户名是否被占用 1.3 immediate属性-对象格式的侦听器 1.4 deep属性-对象格式的侦听器二 ...
Vue3（撩课学院）笔记02-创建组件，全局组件，局部组件，父子组件，组件标签化，组件的data数据共享，组件间通讯，props，父传子$ref，子传父$parent
1.创建一个组件首先要创建一个根组件进行挂载再创建一个子组件,完成子组件的逻辑子组件主要使用template模板来完成布局和逻辑把子组件通过根组件.component的方法挂载到根组件上 &l ...
三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
vue 循环递归组件_全局组件实现递归树，避免循环引用
概述目录分类展示会通常要用到树形结构.本例结合vue的父子组件,采用递归渲染,实现一个基于树的curd小demo 知识点父子组件递归渲染 class 样式对象写法,CSS伪元素 ::before ...
Vue组件之全局组件与局部组件
组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...
vue之组件注册，组件切换，组件传值
组件注册全局组件: 全局组件创建第一种方法: js: // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', {data: fun ...

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

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

最新文章

热门文章