一、多个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)
})
}
}
})