六、Vue 2.0
1、基本结构
文件的相对位置:
一个基本的Vue文件分为三层:HTML模板层、组件层、渲染层
当然也可以省略之前所有的js渲染,用vue做渲染
新建一个Child.vue
然后将Child.vue渲染到cmp1.js上
在组件层,将child引入进来,并且注册,就可以渲染生效。
然后cmp作为child父级的身份,仅把cmp添加到Vue的入口ndex.js主模板内,由于绑定了div1,所以主页index.html就可以直接生效了,换句话说,也可以说是把cmp1当做了一个slot,层层堆叠,将页面画出来。
当然也可以稍微随便添加点css样式
开启热更新,会自动弹出对应的页面。
2、App.vue
App.vue作为一个主的组件可以配置路由等元素属性,像之前作为父级的cmp1,也可以写在app里,那么现在就创建一个app,然后将cmp1的内容放进去,再将原来的cmp1.js删除
新的文件的相对位置:
然后调整文件导入app的相对位置,避免报错,整理之后重新编译。
然后创建路由表./router/index.js
import Vue from 'vue';
import router from 'vue-router';
import Index from '@/index.vue';
import News from '@/news.vue';
Vue.use(router);
export default new router({
routes:[
{
path:'/',
name:'index',
component:Index
},
{
path:'/news',
name:'news',
component:News
}
]
});
不创建路由表挂载,元素就不会起作用,就像router-link router-view
切记一点!!!!import Vue-router进来的时候,一定要把参数名定义成router,Vue才能识别,不然就会报错说无法匹配src/app
创建路由表之后,将两个路由地址对应的网页进行简单设计。
最后来到app.vue内进行路由地址的跳跃行为,使用router-link+v-bind即可
最后热更新调试到页面就可以显示相应的页面。
3、Axios组件通信
首先引入Axios vue-Axios的第三方库,然后导入到Vue的入口处
然后就可以使用了
但是切记,一定要按照顺序use,不然会报错
为了验证我们的数据通信,所以在根目录创建一个data/1.json,并且做一个异步的访问
<template>
<div class="">
首页
</div>
</template>
<script>
export default {
name:'index',
data() {
return{}
},
async created() {
let {data} = await this.axios.get('http://localhost:8081/data/1.json');
console.log(data);
}
}
</script>
<style scoped>
</style>
运行成功之后,可以访问到数据。