1、目标：
1、了解组件
2、vue-resource
3、axios
4、路由
5、vuex
**********************************************************
views:页面。同时也是你的一个组件。路由相关的组件
components:普通组件。
************************
style:
1、放到style标签当中
2、通过import引入样式（引入外部样式）
**************************
局部组件：
<script>
import commentOn from '@/components/commentOn';
import takeComment from '@/components/takeComment';
export default {
components:{
commentOn,
takeComment
}
}
</script>
全局：main.js
import commentOn from "@/components/commentOn";
import takeComment from "@/components/takeComment";
Vue.component("commentOn",commentOn);
Vue.component("takeComment",takeComment);
************************************************************
//index.js 是默认的，可以省略
1、不推荐写法。
* main.js:
import components from "./components/index.js"
components.bind(Vue);
* compnents/index.js:
import commentOn from "./commentOn";
import takeComment from "./takeComment";
export default {
bind(Vue){
Vue.component("commentOn",commentOn);
Vue.component("takeComment",takeComment);
}
}
2、推荐写法：
* main.js:
import components from "./components/index.js"
// 安装指定的插件。
// *components是一个对象。
// 会调用components下的install方法，并会将Vue构造器进行传递。
Vue.use(components);
* compnents/index.js:
1、
import commentOn from "./commentOn";
import takeComment from "./takeComment";
export default {
install(Vue){
Vue.component("commentOn",commentOn);
Vue.component("takeComment",takeComment);
console.log("您好呀")
}
}
2、
import commentOn from "./commentOn";
import takeComment from "./takeComment";
export default {
comList:{
commentOn,
takeComment
},
install(Vue){
for(let key in this.comList){
Vue.component(key,this.comList[key]);
}
}
}
3、
export default {
comList:{
commentOn:()=>import("./commentOn"),
takeComment:()=>import("./takeComment"),
// commentOn:function(){ return import("./commentOn")},
// takeComment:function(){return import("./takeComment")},
},
install(Vue){
for(let key in this.comList){
Vue.component(key,this.comList[key]);
}
}
}
*********************************************************************************
Vue.use();// 使用你的插件。use方法传递的是一个对象。该方法会自行调用对象下的install方法。并将VUE构造器传递过去。
// 并且也可以额外传值。
例：
import components from "./components/index.js"
// 安装指定的插件。
// *components是一个对象。
// 会调用components下的install方法，并会将Vue构造器进行传递。
Vue.use(components,1,2,3);
components:
{
install(Vue,a,b,c){
console.log(a,b,c)// 1,2,3
}
}
*********************************vue-resource***********************************************************
1、安装
cnpm install vue-resource -S
2、main.js引入
import vueResource from "vue-resource"
3、安装
Vue.use(vueResource);
4、使用
post:
this.$http.post("http://127.0.0.1/weibo",{
context:this.$refs.context.value
}).then(({body})=>{
this.$bus.$emit("getweibo");
})
get:
this.$http.get("http://127.0.0.1/weibo",{
params:{
pageIndex:1
}
}).then(({body})=>{
this.contextList = body.contextList;
})
*****************************************bus********************************************************************
1、创建一个文件夹bus,在文件夹内创建一个index.js文件
import Vue from "vue";
export default new Vue();
2、在main.js
import bus from "./bus";
Vue.prototype.$bus = bus;
**********************Vue.use****************
1、创建一个文件夹bus,在文件夹内创建一个index.js文件
import MyBus from "vue";
export default {
install(Vue){
Vue.prototype.$bus = new MyBus();
}
};
2、在main.js
import bus from "./bus";
Vue.use(bus);
**********************************axios**************************************************
1、安装
cnpm install axios -S;
2、引入
import axios from "axios";
3、设置
Vue.prototype.$axios = axios;// 安可瘦死。
*************************************************************
1、
#nav a.router-link-exact-active {
// 精确匹配
color: #42b983;
}
#nav a.router-link-active {
// 匹配
color: #42b983;
}
2、 active-class :该路由被选中时的样式。
exact：精确匹配
<router-link active-class="is-active" to="/" exact>Home</router-link> |
3、在router->index.js
linkActiveClass:'is-active',
*************************vuex*****************************************
vuex:vue项目当中数据状态的集中式管理器。可以实现项目当中的数据集中式管理。
：有利于后期的数据维护，解决组件传值繁琐问题。
state:存储的是你的数据状态。
mutations:修改状态（同步操作）
getters:相当于之前学过的计算属性（computed）
actions:异步的方法
modules:模块化
***********************************************************
1、下载
cnpm install vuex -S;
2、引入
import vuex from "vuex";
3、安装
Vue.use(vuex);
4、生成仓库（store）:存放你的状态。
const store = new vuex.Store({
state,
mutations,
getters,
actions,
modules
})
5、将store放置VUe实例中：
new Vue({
store
})
*********************
