整理vue学习笔记
2017年09月04日 09:20:44 小飞侠-2 阅读数：3294
1.vue简介，vue是一个构建用户界面的框架。是一个轻量级mvv框架，和angular一样是所谓的双向数据绑定，数据驱动和组件化的前端开发，通过简单的api
实现响应式的数据绑定和组合试图组件，容易上手，小巧。
2.安装vue-devtools插件，便于在chrome中调试vue，配置是否允许vue-devtools检查代码，方便调试，生产环境设置为false，vue.config.devtools = false;
vue.config.productionTip=false;阻止启动生产消息。
3.常用指令。
v-model 双向数据绑定，一般用于表单元素。
v-for 对数组或对象进行循环操作，使用是v-for 不是v-repeat
v-on 用来绑定时间，用法：v-on :时间 = ‘函数’
v-show/v-if 用来显示或隐藏元素，v-show 是通过display实现，v-if 是每次删除后在创建
4.事件和属性
v-on:click = " 简写 @click=""
$event 事件对象，里面包括事件相关信息，如事件源，时间类型，偏移量等
事件冒泡，原生js方式，依赖于事件对象，vue方式，不依赖于事件对象，@click.stop 来阻止事件冒泡；
键盘事件：@keydown.13 或keydown.enter
事件修饰符 .stop 调用event.stopPropagation();
v-bind 用于属性绑定,用法 v-bind:属性=“” 举例 v-bind:src="" 简写 ：src=""
5。模板
vue.js 使用基于html的模板语法，将dom绑定到vue实例中的数据模板就是{{}} 用来进行绑定数据显示在页面中
双向绑定 v-model
单项绑定 {{}} 可能会出现闪烁问题， 也可以使用v-text v-html
其他指令 v-once 数据绑定一次 v-pre 不变异，直接原样显示
6.过滤器
用来过滤模型数据，在显示之前进行数据对的处理和筛选
语法： {{data | filter（参数） |filter（参数）}}
内置过滤器，2.0之后都删掉，如果使用可以借助第三方库 如lodash data-fns 日期格式化 accounting.js 货币格式化以及自定义
7.发送ajax请求
vue本身不支持发送ajax请求，需要使用vue-resourc axios等插件实现，建议使用axios
axios是一个基于promise的http请求客户端，用来发送请求
基本用法：
axios.get(url[,options]); 传参方式，url或者params传参
axios.post(url,data,[options]);
注意：axios默认发送数据时，数据格式是request payload，并非我们床用的form data格式，所以参数必须要以键值对像是传递
，不能以json形式传参
传参的方式： 自己拼接键值对，使用transformrequst 在请求发送前将请求数据进行转换，或者使用qs模块进行转换
axios不支持跨域请求，可以使用vue-resource 发送跨域请求。
跨域发送请求： this.$http.get(url,[options]); this.$http.post(url,[options]);
8.vue生命周期
vue实例从创建到销毁过程成为生命周期
9。计算属性
计算属性也是用来存储数据，具有这俩个特点：数据可以进行逻辑处理操作，对计算属性中的数据进行监视。
10.vue实例属性和方法
属性 vm.$el vm.$data vm.$options vm.$refs
方法 vm.$mount() vm.$destroy vm.$nextTick(callback) vm.$set(object,key,vlaue) vm.$delete(object,key) vm.$watch(data,callback)
11,自定义指令
自定义全局指令 vue.directive （指令id，定义对象）
12.过度（动画）
vue在插入更新或一处dom时，提供多种不同方式应用过程，本质还是使用css动画，
基本用法： 使用transition组件，将要执行动画的元素保函在改组件内
结合第三方动画库 animater.css 一起使用
<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
<p v-show="flag">显示内容</p>
</transition>
13.组件
组件是vue最强大的功能之一，组件可狂战html元素，封装重用代码，组件是自定义元素对象。
定义组件方式，a>先创建组件构造器，然后由组件构造器创建组件。b>直接创建
引用模板讲组件内容放在模板<template>中引用，组件中数据data;function 和vue实例存储数据不同
componect :is="" 组件，多个组件使用同一个挂的点，动态切换,
keep-alive 缓存组件，避免从新创建，效率比较高
使用方法 <keep-alive><componect :is="">
数据传递：父子组件，在一个组件内部又定义了另一个组件，称为父子组件。
子组件只能在付组件中使用，默认情况下，子组件不能访问付组件数据。每个组件的作用域是独立的。
组件间数据的通信：在调用组件时，绑定想要获取的付组件的数据，在子组件内部，使用props选项来生命获取
的数据，接收来自付组件的数据。例子：props:['msg'] props可以是数组，也可以是对象props:{} 允许配置高级设计比如类型判断
数据的校验，设置默认值 props:{messge:String,age:Number,name:{type:String,rquired:true,default:19,validator:function(){}}},对象做数组的默认值，
对象必须使用函数返回。
组件中的数据有三种形式：data props computed
付组件访问子组件数据方式：
a.在子组件中使用vm.$emit（事件名，数据） 出发一个自定义事件，事件名自定义
b.付组件在使用子组件的地方监听子组件出发事件，并在付组件中定义方法，用来获取数据
单项数据流：
props是单项绑定的，当付组件的属性变化时，将传导给子组件，但是不会反过来，而且不允许子组件直接
修改付组件中的数据
解决方案： a.如果子组件享把他作为局部数据来使用，可以将数据存入另一个变量在操作
b.如果子组件想修改数据并同步付组件，使用.sync 2.3开始支持，或者将付组件数据包装成udixiang，
然后在子组件中修改对象的属性。
非父子组件间通信：
可以通过一个空的vue实例来作为中央事件总线，用他来出发事件或监控事件
var Event = new Vue(); 空对象
Event.$emit(事件名，数据)； 发送数据
Event.$on(事件名，data=>{}) 监听接收数据
slot内容分发：
用来获取组件中的元内容，就是组件标签中的内容；
获得指定标签内容可以给标签定义 slot="s1" 获取 <slot name="s1"/>
14.vue-router 路由
使用vue.js 开发spa 单页面应用，根绝不同url地址，显示不同内容，但实现在统一页面红，称单页面应用。
bower info vue-router cnpm install vue-router -S
<div id="itany">
<div>
<!-- 使用router-link组件来定义导航，to属性指定链接url -->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<div>
<!-- router-view用来显示路由内容 -->
<router-view></router-view>
</div>
</div>
<script>
//1.定义组件
var Home={
template:'<h3>我是主页</h3>'
}
var News={
template:'<h3>我是新闻</h3>'
}
//2.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news/:username/:password'',component:News},
{path:'*',redirect:'/home'} //重定向
]
//3.创建路由实例
const router=new VueRouter({
routes, //简写，相当于routes:routes
// mode:'history', //更改模式
linkActiveClass:'active' //更新活动链接的class类名
});
//4.创建根实例并将路由挂载到Vue实例上
new Vue({
el:'#itany',
router //注入路由
});
</script>
知识点：<style scoped> /* scoped表示该样式只在当前组件中有效 */
路由嵌套和参数传递：
a.查询字符串 login?name=tome&pwd=123 显示 {{$route.query}}
b。rest风格url regist/alice/324 显示获取 {{$router.params}}
路由实例的方法：
router.push(); 添加路由，功能和<route-link> 相同，都是跳转页面
router.replace() 替换路由，和上功能一样，不产生历史记录
单文件组件：
.vue 文件称单文件组件，是vue.js 自定义的文件格式，一个.vue文件就是一个单独的毒箭，在文件内封装了
单独的js css html
.vue文件由三部分组成 template style script
vue-loader 浏览器本身不认识你.vue文件，所以必须对.vue文件加载解析，此时需要vue-loaderleisi 的loaderhaiyou
很多，html-loader css-loader style-loader babel-loader 需要注意vue-loader 是计划于webpack的
webpack 是一个前端资源模块化加载器和打包工具，
安装相关模板：
cnpm install vue-template-compiler -D //预编译模板
合并：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler
运行测试： npm run dev
15.脚手架 vue-cli
vue-cli是一个vue脚手架，可以快速构建项目结构，
常用项目模板： webpack 保函EsLint代码么规范检查和unit单元测试，
webpack-simple 没有代码检查和单元测试
browserify 使用的也比较多
browserigy-simple
安装vue-cli，配置vue命令环境
cnpm install vue-cli -g
vue --version
vue list
初始化项目，生成项目模板
语法：vue init 模板名 项目名
进入生成的项目目录，安装模块包
cd vue-cli-demo
cnpm install
运行
npm run dev //启动测试服务
npm run build //将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上
使用webpack模板
vue init webpack vue-cli-demo2
ESLint是用来统一代码规范和风格的工具，如缩进、空格、符号等，要求比较严格
16.模块化开发
首先在一个目录下 vue init webpack-simple vue-cli-demo 创建项目
进入目录 cd vue-cli-demo cmpn install 然后 npm run dev 运行测试
cmpn install vue-router -S -S是生产依赖的意思；
编辑main.js import VueRouter form ''vue-router' vue.use(Vue/router); 使用之后全局都可以用
编辑app.vue 编辑 router.config,js
cnpm install axios -S
使用axios俩种方式：
a.在使用axios的组件中，都要引入axios import axios from 'axios' axios.get('url').then(resp ->{resp.data});.catch(eorr->){}
b.在main.js 中全局引入 import axios from 'axios' 并添加到vue原型中 vue.prototype.$http=axios; 然后其他组件可以
vue.$http.get(); 或 this.$http.get();
为自定义组件添加事件：
比如自定一个button vue注册 默认不能绑定@click=send 这样写 @click.ntaive=send 就可以
17ui库 element ui
是一个ui的组件库，是饿了么提供的一套基于vue 2.0的组件库 可以快速开发网址，提高效率
element ui pc端 mintui 移动端 官网 element.eleme.io
cnpm install element-ui -S
npm run dev
在main.js 引入并使用这个组件 import ElementUI from 'elemtn-ui' import element-ui/lib/eheme=default/index.css
vue.use(ElementUI); 这种引入方式是引入全部的组件内容
在webpack.confgi.js 中添加loader test:/.css$/,loader:'style-loader!css-loader'
cnpm instal style-loader -D 字体字库loader配置
webpack配置更改要重启
动态样式 是使用less
使用less 安装loader less less-loader 配置 test:/.less$/,loader:less-loader 指定style l ang=less 必须指定样式
自定义全局组件：
全局组件：可以在main.js 中使用vue.use 进入全局引入，然后在其他组件中都可以使用
创建 。vue组件，创建index.js文件 import Login from './Login.vue'
export default {
install:function(Vue){
Vue.component('Login',Login);
}
}
普通组件：每次使用都要引入，如axios
18.vuex 状态管理模式，采用集中式存储，管理应用所有组件的状态，简单说集中管理数据，类似于react中的redux，基于flux
前段状态管理框架。
基本使用：nmp install vuex -S
创建store.js 文件，vuex相关配置。在main.js 中导入，import store fomr './store.js main.js 配置store选项，子组this.$store
import vue fomr vue import vuex from vuex vue.use(vuex);
vuex核心store 相当于一个容器，一个store实例中包含一下属性和方法：
getters 获取属性
actions 定义方法 动作，如流程判断 异步请求 const action={ 方法名（context){}）} context 对象有comit dispatch state
commit 提交的意思，修改数据唯一方式， conmit('add) 提交一个叫add的变化
mutations 定义变化
var state= { count:6} //创建store对象 const store=new Vuex.Strore{{state}}; vargetters ={count)(){return state.count}} export default store;
编辑 app。js 编辑store, 作为计算属性：computed:(){return this.$store.state.count};
方式一 this.#store访问 方式二 mapGetters mapActios访问
mapGetter 获取属性
mapActions 获取方法
导入辅助函数 import {mapGetter} from vuex
computed:mapGetters{('count')}