|
|
|
|
# 笔记
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
1. 问题：
|
|
|
|
|
|
|
|
|
|
```vue
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Title</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<counter :num="count" @incr="add" @decr="reduce"></counter>
|
|
|
|
|
</div>
|
|
|
|
|
<script src="node_modules/vue/dist/vue.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
//定义局部组件
|
|
|
|
|
const counter = {//声明自定义组件并设置其名称
|
|
|
|
|
template:`<div>
|
|
|
|
|
<button @click="handleAdd">+</button>
|
|
|
|
|
<button @click="handleReduce">-</button>
|
|
|
|
|
<h1>NUM:{{ num }}</h1>
|
|
|
|
|
</div>`,//自定义组件
|
|
|
|
|
props:['num'], //子组件接收title属性
|
|
|
|
|
methods: {
|
|
|
|
|
handleAdd(){
|
|
|
|
|
this.$emit('incr');
|
|
|
|
|
},
|
|
|
|
|
handleReduce(){
|
|
|
|
|
this.$emit("decr");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const app = new Vue({//(1)声明父级标签
|
|
|
|
|
el:"#app", //element ,vue 作用的标签
|
|
|
|
|
data:{
|
|
|
|
|
count: 0,//id为app的标签对应的数据
|
|
|
|
|
},
|
|
|
|
|
components:{//声明组件，在id为app的组件当中声明子组件，其子组件为introduce
|
|
|
|
|
counter
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
add(){
|
|
|
|
|
this.count++;
|
|
|
|
|
},
|
|
|
|
|
reduce(){
|
|
|
|
|
this.count--;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
在这个代码中的NUM：{{ num }} 所表达的意思是什么呢？
|
|
|
|
|
|
|
|
|
|
答：是prop动作的一个属性参数
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
路由：当我们想要实现一个跳转的功能，我们可以通过路由来实现。
|
|
|
|
|
|
|
|
|
|
路由的格式：
|
|
|
|
|
|
|
|
|
|
```vue
|
|
|
|
|
import * as VueRouter from 'vue-router'
|
|
|
|
|
|
|
|
|
|
//注释；通常路由的路径是以一个对象的形式来进行跳转的。所以我们先定义一个变量来存放路径的对象。
|
|
|
|
|
const RoutesList = [
|
|
|
|
|
{
|
|
|
|
|
path: '路径名',
|
|
|
|
|
component: () => import('项目目录的view下面的视图组件。'),
|
|
|
|
|
hidden: false //这是设置这个路径在项目初始化后的状态。是一个不可见的，只有访问后才可见。
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
path: '路径名',
|
|
|
|
|
component: () => import('项目目录的view下面的视图组件。'),
|
|
|
|
|
hidden: false //这是设置这个路径在项目初始化后的状态，是一个不可见的，只有访问后才可见。
|
|
|
|
|
},
|
|
|
|
|
…… 可以多个对象【路径】。
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
…… 同理，这里也是可以多个对象【路径】。
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
使用方法；
|
|
|
|
|
|
|
|
|
|
在定义好上面的路径后，就可以将它注入到vue-router中了，然后把router抛出去，让其他文件可以访问。
|
|
|
|
|
|
|
|
|
|
随后，我们可以在其他的vue文件中导入router了。
|
|
|
|
|
|
|
|
|
|
然后开发请求。
|
|
|
|
|
|
|
|
|
|
根据官方文档来开发。
|
|
|
|
|
|
|
|
|
|
记录：
|
|
|
|
|
|
|
|
|
|
路由一次会记录一次。再次点击时会在此基础上进入深层的地址
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 路由跳转的方式
|
|
|
|
|
|
|
|
|
|
1. 通过`this.store.**`方式来将后端返回的值传递到后台的首页。
|
|
|
|
|
2.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
Vue 插件：
|
|
|
|
|
|
|
|
|
|
Axios 、element-UI、js-cookie、normalize、vue-router、Vuex
|
