vue知识梳理
vue
全局安装vue
npm install -g vue-cli
查看vue的模板
vue list
安装某个vue模板
vue init [模板名称 ] [项目名称]
启动项目
npm run dev
vue 中的相关文件介绍
.babelrc 是babel的一些配置。
babel这个工具将我们的es6的代码转译成浏览器能识别的代码
vue的基本语法
每一个.vue文件主要分为三大部分template script stytle即模板、脚本、样式
每个 Vue 应用都需要通过实例化 Vue 来实现。
Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入。
var vm = new Vue({
// 选项
})
export 和export default 的区别在于：export 可以导出多个命名模块，例如：
//demo1.js
export const str = 'hello world'
export function f(a){
return a+1
}
对应的引入方式：
//demo2.js
import { str, f } from 'demo1'
export default 只能导出一个默认模块，这个模块可以匿名，例如：
//demo1.js
export default {
a: 'hello',
b: 'world'
}
对应的引入方式：
//demo2.js
import obj from 'demo1'
绑定html：v-html
循环展示列表数据 :v-for
语法：
v-for:(item,key) in list
item:表示列表中的数据 key 表示检索位置
生命周期（钩子）函数：
组件挂载以及组件更新组件销毁的时候触发的一系列的方法，这些方法叫做生命周期函数。
vue的生命周期函数mounted
vue的生命周期函数即vue页面刷新就会触发的函数。
beforeMount 即dom渲染之前
mounted dom渲染完成。请求数据，操作dom，一般放在mounted中。
请求数据的模板
vue-resource 官方提供的vue的一个插件
axios
fetch-jsonp
vue 使用官方的插件的时候需要在main.js里面增加一些配置
例：使用vue官方的vue_reload_img的插件配置如下
import vue_reload_img from 'vue_reload_img'
Vue.use(vue_reload_img);
使用vue-resource请求数据
1.应该先安装此插件。
cnpm install vue-resource --save
2.在main.js中引入vue-resource
import vue-resource from 'vue-resource'
Vue.use(vue_reload_img)
3.在组件里面直接使用
this.$http.get(地址).then(function(){
})
this.$http.get('/someUrl').then(response => {
// success callback
}, response => {
// error callback
});
此处插放一个箭头函数的语法
x => x * x
上面的箭头函数相当于：
function (x) {
return x * x;
}
箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return：
x => {
if (x > 0) {
return x * x;
}
else {
return - x * x;
}
}
vue 中使用axios
1.首先安装axios
cnpm install axios --save
2哪里用哪里引用
import Axios from 'axios';
父子组件传值
- 父组件给子组件传值
可以看vue.js文档中props 的使用 - 父组件主动获取子组件的数据和方法
1）.调用子组件的时候定义一个ref
2).在父组件里面通过
this.$ref.header.属性
this.$refs.header.方法
- 非父子组件传值(即两个子组件或其他组件关系
- 新建一个VueEmint.js文件 然后引入vue 实例化vue 最后暴露这个实例
- 在要广播的地方引入刚才定义的实例
- 通过VueEmit.$emit(‘名称’，‘数据’)
- 在接受数据的地方通过$on接受广播的数据
VueEmit.$on(‘名称’,function(){
})
vue-router
1.安装
cnpm install vue-router --save
2.引入并 Vue.use(VueRouter)(在main.js中引用)
import VueRouter from 'vue-router'
Vue.use(VueRouter)
具体使用查看官网文档:vue router 官网中文文档
vue router 懒加载
- 什么是懒加载
懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。
2)为什么需要懒加载
在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
vue-router 中的编程式导航即使用javascript来跳转页面
vuex是什么？
解决不同组件之间的数据共享。
不同页面之间的传值，及不同组件之间的传值我们都可以使用localstrage实现和sessionStrage就可以实现。
小项目是我们可以使用localstrage和sessionStrage实现。大项目的时候我们可以使用Vuex去实现。
Vuex 是一个专为vue.js应用程序开发的状态管理模式
1.vuex解决了组件之间同一状态的共享问题（解决了不同组件之间的数据共享）。
2.组件里面数据的持久化。