axios
Vue 不像 jQuery 内置了 ajax 请求函数，在 Vue 中没有提供这样的功能。所以当我们需要在 Vue 中和服务端进行通信的时候可选择的方式会更灵活一些。
注意：Vue 不提供的原因是为了让 Vue 本身更专注于视图部分，保持其渐进灵活的特性
所以 Vue 给了我们更多的选择空间，例如我们可以使用下面的可选方案：
原生的 XMLHttpRequest
原生的 Fetch
也可以结合使用 jQuery 自带的 Ajax 请求函数
早期大家开发 Vue 应用喜欢使用一个第三方插件：Vue Resource
目前主流的方案是使用社区中知名的第三方库 axios
axios 是一个基于 Promise 的第三方 HTTP 客户端请求库，可以用于浏览器或者 Node.js。 axios 本身和 Vue 没有一毛钱关系，只是简单纯粹的封装了 HTTP 请求功能。可以运行在任何支持 JavaScript 环境的平台。
第一步：先子下载axios
命令为： npm i axios -S
第二步：导入 axios文件
所有我们下载的库都不需要我们去寻找他的路径，他会自动会去node_modules文件中查找
import axios from 'axios'
第三步：写一个函数，里面直接返回axios对象
import axios from 'axios'
export function myAxios(pageNum) { //向外导出我们的函数
return axios({ //返回的结果是promises对象
method: 'get',
url: 'http://132.232.94.151:3000/api/film/getList',
// data: {
// pageName
// }
params: { //get的方式需要改成params，如果是post就写成data
pageNum
}
})
}
第四步：在我们需要的组件中导入axios函数
import {myAxios} from './assets/axios'分析：
首先我们需要在methods对象中定义一个函数
methods: {
// sums(){
// // console.log( sum.sun(2,3))
// console.log( sun(2,3))
// }
getfilmsList(pageName){
myAxios(pageName).then(res=>{
this.films=res.data.films//这是我们需要把得到的axios返回的数据进行接收
console.log( this.films)
})
}
}
然后在钩子函数中调用我们定义好的函数
mounted() { //钩子函数
console.log('挂载之后')
this.getfilmsList(this.fimsName) //此时就拿到数据了
}
vue-resource的使用
路由
路由基础01
页面1
页面2
页面3
分析：
相当于a，因为解析完后，它会自动转换成a标签 。to后面接的是路由表里每个路由的地址
页面1
页面2
页面3 创建路由的容器
创建路由表
routes是路由的数组，里面存放的是每一个路由对象
path存放的是路由的地址
component是组件，组件对象里存放的是template标签，标签里有路由的内容
// 路由表的创建
let router = new VueRouter({
routes: [{
path: '/a',
component: {
template: 'aaaaa'
}
}, {
path: '/b',
component: {
template: 'bbbbbbb'
}
}, {
path: '/c',
component: {
template: 'cccccc'
}
}]
})
脚手架写路由
第一步：下载路由线上库
命令如下：npm i vue-router -S，全写命令为：npm i vue-router -S
第二步：在路由js文件中引入如下程序：
在package.json文件中，存在 "vue-router": "^3.1.3"，说明已经下载成功
import Vue from 'vue'
import Router from 'vue-router'
import HellowA from '../components/HollowA'
import HellowB from '../components/HollowB'
import HellowC from '../components/HellowC'
Vue.use(Router)
export default new Router({
routes: [{
path: '/HellowA',
name: 'HellowA',
component: HellowA
},
{
path: '/HellowC',
name: 'HellowC',
component: HellowC
},
{
path: '/HellowB',
name: 'HellowB',
component: HellowB
}
]
})
分析：
导入文件库
import Vue from 'vue'
import Router from 'vue-router'
导入我们需要的每一个路由
import HellowA from '../components/HollowA'
import HellowB from '../components/HollowB'
import HellowC from '../components/HellowC'
vue使用ues，并把我们的路由库做为参数，意为使用路由
Vue.use(Router) //此处的参数Router要与import Router from 'vue-router'中的名称Router一致创建路由对象
export default new Router({
routes: [{ //存放每一个路由元素
path: '/HellowA',//每一个路由的路径
name: 'HellowA',//每一个路由的名称
component: HellowA //每一个路由的组件
},
{
path: '/HellowC',
name: 'HellowC',
component: HellowC
},
{
path: '/HellowB',
name: 'HellowB',
component: HellowB
}
]
})
第三步：main.js的路由配置
import Vue from 'vue'
import App from './App.vue'
import router from './assets/index'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')
分析：
导入我们写好的路由js文件
import router from './assets/index'
注册 路由
new Vue({
render: h => h(App),
router //路由注册 ，名称要与import router from './assets/index' 中的名称一样
}).$mount('#app')
第四步：在需要添加路由的组件中添加路由，如下所示：
HellowA
HellowB
HellowC
分析：
HellowA
HellowB
HellowC
路由传参跳转
路由传参的文档
https://router.vuejs.org/zh/guide/essentials/navigation.html
父组件的设置
路由的设置
子组件的设置
返回上一级路由
路由重定向
父子组件通信
组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。然而，通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解，从而提高了其可维护性和复用性。 在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的。
父传子
我们可以用 v-bind 来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件：
父组件
子组件通过prop属性接受,prop中的变量名不能在data中定义
子传父
我们知道，父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了。
1、在子组件中调用 $emit() 方法发布一个事件
methods: {
incrementCounter: function () {
this.counter += 1
// 发布一个名字叫 increment 的事件
this.$emit('increment')
// this.$emit('update:foo', "传递过去的参数");
}
},
实例：
2、在父组件中提供一个子组件内部发布的事件处理函数
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
//这个函数是调用的
incrementTotal: function () {
this.total += 1
}
}
});
在使用子组件的模板的标签上订阅子组件内部发布的事件
{{ total }}
分析：
里面的 increment是子组件传来的内容名称，这里值得注意
incrementTotal是父组件定义的函数
注意：我们接收的参数必须是子组件的标签，否则不会得到我们想要的结果
实例：
同级组件的传值
一 .我们先来创建中央事件总线，在src/assets/下创建一个eventBus.js,内容如下
（eventBus中我们只创建了一个新的Vue实例，以后它就承担起了组件之间通信的桥梁了，也就是中央事件总线。）
二 . 创建一个firstChild组件，引入eventBus这个事件总线，接着添加一个按钮并绑定一个点击事件
bus.$emit("sendEvent",this.Fistmessage) //第一个参数：函数名，第二个参数：信息的内容
1、我们在响应点击事件的sendMsg函数中用emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。
三 . 我们再创建一个secondChild组件，引入eventBus事件总线，并用一个p标签来显示传递过来的值
mounted() {
var VueThis=this //保存vue的this指向Vue的实例
bus.$on("sendEvent",function(mesage){//第一个参数：函数名，第二个参数：信息的内容
VueThis.mesage=mesage
})
},
vant 的使用
安装
# 通过 npm 安装
npm i vant -S
# 通过 yarn 安装
yarn add vant导入所有组件
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
注意：配置 babel-plugin-import 插件后，将不允许以这种方式导入组件
git
关于Git推送error：failed to push some refs to '[email protected]:name/project.git'
项目推送时遇Git推送错误：
error: failed to push some refs to ‘[email protected]:name/project.git’
1、分析：
这个问题的产生是因为远程仓库与本地仓库并不一致所造成。
2、解决方案：
那么我们把远程库同步到本地库就可以了。
执行命令：
git pull --rebase origin master
将远程仓库中的更新合并到本地仓库，–rebase的作用是取消掉本地仓库中刚刚的commit 然而未果，出现错误：
error: src refspec master does not match any
分析：引起该错误的原因是，目录中没有文件，空目录不能提交。
依次执行：
git pull origin master
git push origin master
解决！
一般而言，正常的推送流程应为：
1、在github上创建项目
2、使用git clone https://github.com/name/project.git克隆到本地
3、编辑项目
4、git add . （将变更提交至缓存区）
5、git commit -am “提交说明（注释）”
6、git push origin master 将本地变更推送至远程仓库master分支
此时如果在github的remote上已经有了文件，会出现error。那么应当先pull一下，即： ———————————————— 版权声明：本文为CSDN博主「INTZhou」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/intzhou/article/details/81677009
git pull origin master随即push即可。
git push origin masterEs6的class
class Person {
constructor(name, age, action) {
this.name = name;
this.age = age;
this.action = action;
}
say() {
console.log(this.name + "今年" + this.age + "岁" + this.action)
return "结束了"
}
}
let person = new Person('老杨', 40, "抽烟喝酒样样精通")
console.log(person.say())
继承
例子：
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
say() {
console.log("我的人类")
}
}
class Man extends Person {
constructor(name, age, actions) {
super(name, age);
this.actions = actions;
}
run() {
console.log(this.actions)
}
}
var man = new Man("老杨", 23, "跑步")
man.say()
man.run()
vue导入less的方法