本文以一个后端开发人员的视角去总结
vue
的知识点。
新建一个 Vue 文件,它的结构如下:
第一部分
<template>
<table id="simple-table" class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>课程ID</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="chapter in chapters">
<td>{{chapter.id}}</td>
<td>{{chapter.name}}</td>
<td>{{chapter.courseId}}</td>
<td>操作</td>
</tr>
</tbody>
</table>
</template>
第二部分
<script>
import Pagination from '../../components/pagination'
export default {
name: "chapter",
components: {
Pagination,
},
data() {
return {
chapters: [],
}
},
created() {
let _this = this;
_this.getAll();
},
mounted() {
// 操作 DOM 节点
},
methods: {
getAll() {
let _this = this;
_this.$ajax.get('http://127.0.0.1:9000/business/admin/chapter/list').then(response => {
_this.chapters = response.data;
})
}
}
}
</script>
第三部分
<style scoped>
</style>
分为页面部分、JS部分、CSS 部分。
其中页面部分和CSS部分就和普通的网页一样,JS部分有详细划分:
import Pagination from '../../components/pagination'
export default {
name: "chapter",
data() {
return {
chapters: [],
}
},
components: {
Pagination,
},
created() {
let _this = this;
_this.getAll();
},
mounted() {
// 操作 DOM 节点
},
methods: {
getAll() {
let _this = this;
_this.$ajax.get('http://127.0.0.1:9000/business/admin/chapter/list').then(response => {
_this.chapters = response.data;
})
}
},
watch: {
$route: {
handler: function (val, oldVal) {
console.log("---->页面跳转: ", val, oldVal);
let _this = this;
_this.$nextTick(function () {
_this.activeSidebar(_this.$route.name.replace("/", "-") + "-sidebar");
})
}
}
},
}
name
:这个组件的名字,外界可以这样导入组件:
import Chapter from './views/admin/chapter'
data
:定义数据的地方,使用 return
返回,供其他地方使用;
在页面部分可以使用 for
循环遍历列表数据,其中 chapters
是在 data
中定义的数据,取值使用 双大括号 :
<tr v-for="chapter in chapters"> <td>{{chapter.id}}</td> <td>{{chapter.name}}</td> <td>{{chapter.courseId}}</td> <td>操作</td> </tr>
components
:引入子组件;
created
和 mounted
都是钩子函数,他们都可以完成一些初始化操作,两者的区别在后面会再讲。
methods
:定义自定的函数,在页面部分使用 @click="login()"
绑定要触发的函数。
关于 package.json
和 package-lock.json
,前者是定义组件的版本号的:
"vue-router": "^3.4.6"
上面的配置的意思是,你要下载的版本号主版本是 3 ,副版本不做限制,默认是最新版,这样就会带来一个问题就是可能每个人安装之后副版本都不一样,那么开发就会有问题,所以就有了 package-lock.json
,它的作用就是锁定组件的版本号为固定的版本,这样大家下载到的版本号都是一样的。
Vue 中的钩子函数有 created
和 mounted
:
二者的区别在于:
created
是在 html
页面渲染之前调用,通常用来初始化一些属性值;mounted
是在页面渲染之后调用,可以用来操作 DOM
节点。先安装:
cnpm install vue-router --save
然后在 main.js 中注册:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App),
}).$mount('#app');
可以通过下面的代码实现路由跳转:
this.$router.push("/welcome")
App.vue
的内容通常如下:
<template>
<div id="app">
<router-view/>
</div>
</template>
其中 <router-view/>
相当于是一个占位符,代表子组件,那么具体是哪一个子组件,需要在 router.js
中定义。
import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/login'
import Admin from './views/admin'
import Welcome from './views/admin/welcome'
import Chapter from './views/admin/chapter'
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [{
path: '*',
redirect: "/login",
}, {
path: '/login',
component: Login
}, {
path: '/',
name: "admin",
component: Admin,
children: [{
path: 'welcome',
name: "welcome",
component: Welcome,
}, {
path: 'business/chapter',
name: "business/chapter",
component: Chapter,
}]
}]
});
如上所示,默认的访问路径是:
routes: [{
path: '*',
redirect: "/login",
},
表示转发到 login
下,而 login 对应 Login
组件,所以最后会渲染 Login
组件。
在页面中,如果想达到超链接跳转的效果,我们可以使用下面的方式:
<router-link to="/welcome">
<span> 欢迎 </span>
</router-link>
使用 axios 发送请求,先安装:
cnpm install axios --save
然后在 main.js 中注册:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false;
// 以 Vue 属性的方式使用 axios
Vue.prototype.$ajax = axios;
new Vue({
router,
render: h => h(App),
}).$mount('#app');
使用也很方便:
对于 get
请求
let _this = this;
_this.$ajax.get('http://127.0.0.1:9000/business/admin/chapter/list').then(response => {
_this.chapters = response.data;
})
对于 post
请求
_this.$ajax.post('http://127.0.0.1:9000/business/admin/chapter/list', {
page: page,
size: _this.$refs.pagination.size,
}).then(response => {
_this.chapters = response.data.list;
_this.$refs.pagination.render(page, response.data.total);
})
就像 ajax
一样,直接调用具体的请求方法即可。
<!--
:list="getAll"
list: 是子组件暴露出来的一个回调方法;
getAll: 是父组件的 getAll 方法;
-->
<pagination ref="pagination" :list="getAll" :itemCount="8"/>
其中绑定的 list
和 itemCount
都需要定义在 子组件 的 props
中。
定义的时候需要注意 props
中的写法,如果绑定的子组件数据类型是:
函数
函数可以直接写 null
;
props: {
list: {
type: Function,
default: null
},
}
基本数据类型
props: {
itemCount: Number
},
对象或数组
如果是对象或数组需要定义为这种形式:
props: {
prolist: {
type: Array,
default() {
return [];
}
}
},
以上是子组件获取父组件的值或者调用父组件的函数,那么父组件怎样调用或者使用子组件的值呢?
我们可以使用
_this.$refs.pagination.size;
得到子组件在 data 中定义的值。
$refs
是 vue
的内置属性,pagination
是组件的 name
值,它也可以用来调用方法,如:
_this.$refs.pagination.render(page, response.data.total);
现在我们回过头来看一下执行流程:
程序的入口还是 index.html
,index 引用 main.js
,然后 main 引用 App.vue
,所以我们导入的全局 js
文件可以放在 index
中声明。