vuejs点滴

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

博客0.没事的时候可以看的一些博客：https://segmentfault.com/a/1190000005832164

http://www.tuicool.com/articles/vQBbiiQ

博客1.vuex应该去看的东西：

http://blog.csdn.net/github_26672553/article/details/53176778

博客2：vue.use 详解。http://www.cnblogs.com/dupd/p/6716386.html

博客3：Vue与jquery项目的对比：http://blog.csdn.net/violetjack0808/article/details/51451672

博客4：vue的生命周期 https://segmentfault.com/a/1190000008010666

博客5：vue的面试题http://www.cnblogs.com/coding4/p/7953417.html

1.vuejs简介 vue到底是什么?

一个mvvm框架(库)、和angular类似比较容易上手、小巧官网:http://cn.vuejs.org/

手册： http://cn.vuejs.org/api/

2.vuejs与angular的区别。

vue：

简单、易学，指令以 v-xxx，一片html代码配合上json，在new出来vue实例，个人维护项目，适合: 移动端项目,小巧

vue的发展势头很猛，github上start数量已经超越angular，

angular: 指令以 ng-xxx,所有属性和方法都挂到$scope身上,angular由google维护 ,,合适: pc端项目

angular展示一条基本数据:
var app=angular.module('app',[]); app.controller('xxx',function($scope){ //C
$scope.msg='welcome'
}) html:
div ng-controller="xxx"
{{msg}}

共同点: 不兼容低版本IE

3.简单的代码。

<div id="box">
{{msg}}
</div>var c=new Vue({
el:'#box',//选择器 class tagName
data:{
msg:'welcome vue'
}
});

4.常用指令：

angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show

5.vue常用指令

v-model 一般表单元素(input) 双向数据绑定

6.循环:
v-for="name in arr"
{{$index}}

v-for="name in json"
{{$index}}{{$key}}

v-for="(k,v) in json"

7.事件:
v-on:click="函数"

v-on:click/mouseout/mouseover/dblclick/mousedown.....

new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){//方法
alert(1);
}
}
});

显示隐藏:
v-show=“true/false”
bootstrap+vue简易留言板(todolist):

bootstrap: css框架跟jqueryMobile一样
只需要给标签赋予class，角色
依赖jquery

事件:
v-on:click/mouseover......

简写的:
@click=""推荐

事件对象:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop推荐
默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent推荐
键盘:
@keydown$eventev.keyCode
@keyup

常用键:
回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....

10.

属性:
v-bind:src=""
width/height/title....

:width :height :title

简写:
:src=""推荐

<img src="{{url}}" alt="">效果能出来，但是会报一个404错误
<img v-bind:src="url" alt="">效果可以出来，不会发404请求这里没有{{}}

11.class最终都要联系到class中，而style则不需要。

class和style:
:class=""v-bind:class=""
:style=""v-bind:style=""

:class="[red]"

当:class后边数数组的是数组

-----------------------------------------------

class第一种：

:class="[classa,classb,classc,classd]"

data{

classa:"red",

classb:"blue",

classc:"pink"

}

<style>

.red{background:red;}

.blue{background:blue;}

.pink{backround:pink;}

</style>

==================

class第二种

:class后边是Json
:class="{red:a, blue:false}"//data中只有a没有red之类的。而red是样式中的class.

-----------------------------------------------------

class第三种

:class="json"

data:{
json:{red:a, blue:false}//推荐 red是样式，而 a是true后者false。
}
-------------------------------------------------------------------
style:

第一种：(:style后边的属性必须加{}，并且变量名必须为red否则不行，这个不通用)

第二种：
:style="[c]"
:style="[c,d]"

data:{
c:{color:'red'},
b:{backgroundColor:'blue'}
}

第三种：

data:{
a:{
color:'red',//这里这里的red虽然不是样式，但是必须加引号
backgroundColor:'gray'
}
}

注意: 复合样式，采用驼峰命名法
:style="json"

----------------------------------------------

12.

模板:
{{msg}}数据更新模板变化
{{*msg}}数据只绑定一次

{{{msg}}}HTML转意输出

13.

过滤器:-> 过滤模板数据
系统提供一些过滤器:

uppercaseeg:{{'welcome'| uppercase}}
lowercase
capitalize

currency钱

下面有讲的自定义过滤器

14.

get:
获取一个普通文本数据:
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
给服务发送数据:√
this.$http.get('get.php',{
a:,
b:
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
post:
this.$http.post('post.php',{
a:,
b:
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp:
https://sug.so.360.cn/suggest?callback=suggest_so&word=a https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' //callback名字，默认名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});

15.

this.$http({
url:地址
data:给后台提交数据,
method:'get'/post/jsonp
jsonp:'cb' //cbName
});

16.

vue生命周期:
钩子函数:

created-> 实例已经创建√
beforeCompile-> 编译之前
compiled-> 编译之后
ready-> 插入到文档中√

beforeDestroy-> 销毁之前
destroyed-> 销毁之后 (vm.$destroy()调用的时候)

17.

用户会看到花括号标记:

v-cloak防止闪烁, 比较大段落
看这篇博客：http://www.cnblogs.com/cjlll/p/6077430.html
----------------------------------
<span>{{msg}}</span>-> v-text
{{{msg}}}-> v-html

18.

计算属性的使用:
computed:{
b:function(){//默认调用get
return 值
}
}

--------------------------
computed:{
b:{
get:
set:
}
}

* computed里面可以放置一些业务逻辑代码，一定记得return

19.

vue实例简单方法:
vm.$el-> 就是元素
vm.$data -> 就是data
vm.$mount -> 手动挂在vue程序

vm.$options-> 获取自定义属性
vm.$destroy-> 销毁对象

vm.$log();-> 查看现在数据的状态

20.

循环：
v-for="value in data" 这样子的话，不能添加重复的数据的。2.0以上的版本默认是可以添加数据的。

会有重复数据
track-by='索引'提高循环性能

track-by='$index/uid'

21.

过滤器:
vue提供过滤器:
下边三个对于字符串的时候
capitalize uppercase currency....debounce 配合事件，延迟执行
数组配合使用过滤器:
limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个从哪开始filterBy 过滤数据
filterBy ‘谁’orderBy 排序
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序自定义过滤器: model ->过滤 -> view
Vue.filter(name,function(input){});

debounce的用法

自定义过滤器：

双向绑定过滤器

22.

@keydown.up
@keydown.enter

@keydown.a/b/c....

自定义键盘信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;

23. 自定义指令指的是自定义的属性，和组件没有关系的。Vue.directive和Vue.filter这两个函数都必须写在new Vue之前才行。

自定义元素指令:元素指令（用处不大）

v-这种表达形式。

其实本事也是bind函数：

在自定义指令中使用的是this.el不是this.$el

24.

监听数据变化:
vm.$el/$mount/$options/....

vm.$watch(name,fnCb); //浅度
vm.$watch(name,fnCb,{deep:true}); //深度监视

25.vue组件：避免缓存重复造轮子。

html:

全局的组件：

另一种书写方式：

局部含参数的：

注意上边的components中的my-aaa必须有引号。

带方法，带事件产生。

注意：data必须用方法的形式，vue中还有一个是computed这个后边也必须是方法（如果你写set,get就另说了）。

父子组件：

简单的：

父向子传数据

注意：一般情况下下属性中不会用{{}}都是""

属性绑定的时候:mmm:msgparent 后边的是父类的数据，前面的子的数据，绑定在bbb上边。

子向父传数据

<bbb @child-msg="get"></bbb>记住这个child-msg这个绑定在bbb中，get是父的方法。必须注意get后边不能写(),否则传的是参数是空

<div id="box">
<aaa>
</aaa>
</div> <template id="aaa">
<span>我是父级 -> {{msg}}</span>
<bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
<h3>子组件-</h3>
<input type="button" value="send" @click="send">
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
methods:{
get(msg){
// alert(msg);
this.msg=msg;
}
},
components:{
'bbb':{
data(){
return {
a:'我是子组件的数据'
}
},
template:'#bbb',
methods:{
send(){
this.$emit('child-msg',this.a);
}
}
}
}
}
}
});

26.如何解决

这种原来就有元素呢，用到slot。

name=是定义， slot=使用。

27.多层路由：

28.手动配置自己的webpack+vue-loader

脚手架:
vue-cli——vue脚手架
帮你提供好基本项目结构

本身集成很多项目模板:
simple个人觉得一点用都没有
webpack可以使用(大型项目) Eslint 检查代码规范，单元测试
webpack-simple个人推荐使用, 没有代码检查√

browserify-> 自己看
browserify-simple

--------------------------------------------

基本使用流程:
1. npm install vue-cli -g安装 vue命令环境
验证安装ok?
vue --version
2. 生成项目模板
vue init <模板名> 本地文件夹名称
3. 进入到生成目录里面
cd xxx
npm install
4. npm run dev
--------------------------------------------

29.真实的开始自己的vue汤坑历程了。

vuex

http://vuex.vuejs.org/zh-cn/intro.html

30.公布一个全局的算法。

这个Vue.prototype.$http = Axios // 类似于vue-resource的调用方法，之后可以在实例里直接用this.$http.get()等

===============================

31.上面的属于基础的面试之前看的，下面的属于自己开发过程中或者自己查看git上的开元项目的想法思考或者启示。

32.vue devtools的安装和使用 http://blog.csdn.net/qq_24122593/article/details/53444777

33.用了vue-cli的webpack配置后要怎么debug

https://segmentfault.com/q/1010000008757714

34.eslint 和 jslint: 检查的太严格了,没太大意义.

http://www.tuicool.com/articles/NF3aqi

35.

vuex的学习和使用。

http://vuex.vuejs.org/zh-cn/modules.html

http://www.shouce.ren/api/view/a/11734

http://blog.csdn.net/sinat_17775997/article/details/54943797

36.vue中的断电问题：

devtool: 'eval-source-map',这里配置，#eval-source-map多一个#也行。
debug: true

37.vue中关于打断点debugger；的问题，不是哪里都可以打断点的。

这里是一种错误的做法。必须在对方方法执行中才可以打这样子打不住的。

这里用console.log 或者alert都是不行的。

38.vue2.0中，

1.0中 data：function(){

return {

}

2.0中data(){

return {

count:0

}

39. vue2.0的computed中不建议使用箭头函数。

如果一个box中有多个 computed的话，那么只有最后一个有效，会覆盖上边的。

---------------------------

以下是学习这个项目学到的东西。

https://github.com/lzxb/vue-cnode

40.vue-cnode中不使用用webpack-dev-server默认的热加载，而是使用webpack-dev-middleware这个插件（在webpack的博客中有详细说明），主要因为webpack-dev-middleware的扩展性更强点，并且为了更好的实现返回，进度条等操作。

41.vue-loader帮我们加载后，css放进了js中，

所以

42.babel-polyfill 这个需要依赖。

"eslint": "^3.17.0",
"eslint-config-standard": "^8.0.0-beta.0",
"eslint-loader": "^1.6.3",
"eslint-plugin-html": "^2.0.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-node": "^4.1.0",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^2.1.1",

43. No ESLint configuration found

缺少.eslint的配置文件。

44.如果.babelrc 中有的时候，latest需要去掉。

45.听说在操作vue的数组不能用=号，改天试试看。

46.vue2.0

vue2.0:
bower info vue

http://vuejs.org/
到了2.0以后，有哪些变化?

1. 在每个组件模板，不在支持片段代码
组件中模板:
之前:
<template>
<h3>我是组件</h3><strong>我是加粗标签</strong>
</template>
现在: 必须有根元素，包裹住所有的代码
<template id="aaa">
<div>
<h3>我是组件</h3>
<strong>我是加粗标签</strong>
</div>
</template>
2. 关于组件定义
Vue.extend这种方式，在2.0里面有，但是有一些改动，这种写法，即使能用，咱也不用——废弃

Vue.component(组件名称,{在2.0继续能用
data(){}
methods:{}
template:
});

2.0推出一个组件，简洁定义方式：
var Home={
template:''-> Vue.extend()
};
3. 生命周期
之前:
init
created
beforeCompile
compiled
ready√-> mounted
beforeDestroy
destroyed
现在:
beforeCreate组件实例刚刚被创建,属性都没有
created实例已经创建完成，属性已经绑定
beforeMount模板编译之前
mounted模板编译之后，代替之前ready *
beforeUpdate组件更新之前
updated组件更新完毕*
beforeDestroy组件销毁前
destroyed组件销毁后
3. 循环
2.0里面默认就可以添加重复数据

arr.forEach(function(item,index){

});

去掉了隐式一些变量
$index$key

之前:
v-for="(index,val) in array"
现在:
v-for="(val,index) in array"

4. track-by="id"
变成
<li v-for="(val,index) in list" :key="index">
5. 自定义键盘指令
之前：Vue.directive('on').keyCodes.f1=17;

现在: Vue.config.keyCodes.ctrl=17
6. 过滤器
之前:
系统就自带很多过滤
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些简单功能，自己通过js实现

到了2.0，内置过滤器，全部删除了

lodash工具库_.debounce(fn,200)

自定义过滤器——还有
但是,自定义过滤器传参

之前:{{msg | toDou '12' '5'}}
现在: {{msg | toDou('12','5')}}
------------------------------------------------------
组件通信:
vm.$emit()
vm.$on();

父组件和子组件:

子组件想要拿到父组件数据:
通过 props

之前，子组件可以更改父组件信息，可以是同步 sync
现在，不允许直接给父级的数据，做赋值操作

问题，就想更改：
a). 父组件每次传一个对象给子组件, 对象之间引用√
b). 只是不报错, mounted中转
------------------------------------------------------
可以单一事件管理组件通信:vuex
var Event=new Vue();

Event.$emit(事件名称, 数据)

Event.$on(事件名称,function(data){
//data
}.bind(this));
------------------------------------------------------
debounce废弃
-> lodash
_.debounce(fn,时间)
------------------------------------------------------

vue动画
	vue路由
	--------------------------------------
	transition 之前属性
	<p transition="fade"></p>

	.fade-transition{}
	.fade-enter{}
	.fade-leave{}
	--------------------------------------

	到2.0以后 transition 组件

	<transition name="fade">
	运动东西(元素，属性、路由....)
	</transition>

	class定义:
	.fade-enter{} //初始状态
	.fade-enter-active{} //变化成什么样 -> 当元素出来(显示)

	.fade-leave{}
	.fade-leave-active{} //变成成什么样 -> 当元素离开(消失)

	如何animate.css配合用？
	<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
	<p v-show="show"></p>
	</transition>

	多个元素运动:
	<transition-group enter-active-class="" leave-active-class="">
	<p :key=""></p>
	<p :key=""></p>
	</transition-group>
	------------------------------------------
	vue2.0 路由:
	http://router.vuejs.org/zh-cn/index.html
	基本使用:
	1. 布局
	<router-link to="/home">主页</router-link>

	<router-view></router-view>
	2. 路由具体写法
	//组件
	var Home={
	template:'<h3>我是主页</h3>'
	};
	var News={
	template:'<h3>我是新闻</h3>'
	};

	//配置路由
	const routes=[
	{path:'/home', componet:Home},
	{path:'/news', componet:News},
	];

	//生成路由实例
	const router=new VueRouter({
	routes
	});

	//最后挂到vue上
	new Vue({
	router,
	el:'#box'
	});
	3. 重定向
	之前 router.rediect 废弃了
	{path:'*', redirect:'/home'}
	------------------------------------------
	路由嵌套:
	/user/username

	const routes=[
	{path:'/home', component:Home},
	{
	path:'/user',
	component:User,
	children:[ //核心
	{path:'username', component:UserDetail}
	]
	},
	{path:'*', redirect:'/home'} //404
	];
	------------------------------------------
	/user/strive/age/10

	:id
	:username
	:age
	------------------------------------------
	路由实例方法:
	router.push({path:'home'}); //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
	router.replace({path:'news'}) //替换路由，不会往历史记录里面添加
	------------------------------------------
	vue-cli
	------------------------------------------
	npm install
	------------------------------------------
	脚手架: vue-loader
	1.0 ->
	new Vue({
	el: '#app',
	components:{App}
	})
	2.0->
	new Vue({
	el: '#app',
	render: h => h(App)
	})
	------------------------------------------
	vue2.0
	vue-loader和vue-router配合
	------------------------------------------

	style-loader css-loader

	style!css
	------------------------------------------
	项目:
	------------------------------------------

vue问题:
	论坛
	http://bbs.zhinengshe.com
	------------------------------------------------
	UI组件
	别人提供好一堆东西

	目的:
	为了提高开发效率
	功能

	原则: 拿过来直接使用

	vue-cli -> vue-loader

	bootstrap:
	twitter 开源
	简洁、大方
	官网文档

	基于 jquery

	栅格化系统+响应式工具 (移动端、pad、pc)
	按钮
	--------------------------------
	bower 前端包管理器 jquery#1.11.1
	自动解决依赖
	npm node包管理器 jquery@1.11.1
	--------------------------------

	饿了么团队开源一个基于vue 组件库
	elementUI PC
	MintUI 移动端
	--------------------------------
	elementUI:
	如何使用

	官网:http://element.eleme.io/
	使用:
	1. 安装 element-ui
	npm i element-ui -D

	npm install element-ui --save-dev

	// i -> install
	// D -> --save-dev
	// S -> --save
	2. 引入 main.js 入口文件
	import ElementUI from 'element-ui'
	import 'element-ui/lib/theme-default/index.css'

	全部引入
	3. 使用组件
	Vue.use(ElementUI)

	css-loader 引入css
	字体图标 file-loader


	less:
	less
	less-loader
	-------------------------------------------------
	按需加载相应组件: √
	就需要按钮
	1. babel-plugin-component
	cnpm install babel-plugin-component -D
	2. .babelrc文件里面新增一个配置
	"plugins": [["component", [
	{
	"libraryName": "element-ui",
	"styleLibraryName": "theme-default"
	}
	]]]
	3. 想用哪个组件就用哪个
	引入:
	import {Button,Radio} from 'element-ui'
	使用:
	a). Vue.component(Button.name, Button); 个人不太喜欢
	b). Vue.use(Button); √
	---------------------------------------------------
	发送请求:
	vue-resourse 交互

	axios
	---------------------------------------------------
	element-ui -> pc

	mint-ui
	移动端 ui库

	http://mint-ui.github.io/

	1. 下载
	npm install mint-ui -S

	-S
	--save
	2. 引入
	import Vue from 'vue';
	import Mint from 'mint-ui';
	import 'mint-ui/lib/style.css'
	Vue.use(Mint);

	按需引入:
	import { Cell, Checklist } from 'minu-ui';
	Vue.component(Cell.name, Cell);
	Vue.component(Checklist.name, Checklist);

	http://mint-ui.github.io/docs/#!/zh-cn2

	论坛:

	-------------------------------------------------------

	Mint-ui-demo: 看着手册走了一遍

	https://github.com/itstrive/striveCode/tree/js/vue2.0-Mint-ui-demo

47. vue2.0中定义全局变量。

global.COURSES = 'xxxxx';

在入口的main.js

import './a'
就可以，别的js不需要import也能用到COURSES

48.在vue2.0中，

我们需要明白，路由不同，比如说列表页和详情页本来就是不同的路由。

但是一个列表页中，显示的不同组件就是组件之间的数据传递，一般通过event.emit管理，或者通过vuex管理。

但是vuex不能管理不同路由之间的变量,我不太清楚，应该是可以的。

49.不同路由之间的传参方式。

传参方式一，

在一级路由中,name属性{二级路由不能直接name属性。}

不同路由之间的传参方式二：

不同路由之间的传参方式三：

50.有两个参数我们需要注意：1.routes 2.$route

51.components 这样子好像影响到了移入移除的动画了，

52.query传参，完全不用name，param才会和name有联系。

53.append exact

54.redirect

{
path:'/ccc/:id',
redirect:xxxx=>{
const {hash,params,query} = xxxx;
if(params.id == '001'){
return '/home'
}
}
}

55.路由别名。alias

{path:'/aaa/:id',component:html,alias:["/gogo:id","/papa:id"]},

56.router的一些后退，前进，返回home等操作了。

57.vue router的学习的代码：

//main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
//import router from './router'
Vue.use(VueRouter)Vue.config.productionTip = false
//组件
var Home={
template:'<h3>我是主页</h3>'
};
var about={
template:'<h3>about</h3>'
};
var User={
template:`
<div>
<h3>我是用户信息</h3>
<ul>
<li><router-link :to="{path:'/user/wos',query:{age:90}}">Strive</router-link></li>
<li><router-link :to="{path:'/aaa/123',query:{n:'aa'}}">aaa</router-link></li>
<li><router-link :to="{path:'/bbb/456',query:{n:'bb'}}">bbb</router-link></li>
<li><router-link :to="{path:'/ccc/001',query:{n:'bb'}}">ccc</router-link></li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
`
};
var html = {
template:'<div>this is html!{{$route.query}}</div>'
}
var UserDetail={
template:'<div>{{$route.params}}</div>'
};
//配置路由
const routes=[
{path:'/home', component:Home},
{
path:'/user',component:User,children:[
{path:':username',component:html}
]
},
{path:'/aaa/:id',component:html,alias:["/gogo:id","/papa:id"]},
{path:'/bbb/:id',redirect:'/aaa/:id'},
{
path:'/ccc/:id',
redirect:xxxx=>{
const {hash,params,query} = xxxx;
if(params.id == '001'){
return '/home'
}
}
}
];//生成路由实例
const router=new VueRouter({
routes
});/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }，
methods:{
houtui:function(){
router.go(-1);
},
qianjin:function(){
router.go(1)
},
home:function(){
router.push("/");
},
query:function(){
//这个query可以通过$route.query.a读出来，但是这个是修改不了路由表的
router.push({path:"/",query:{a:1,b:1}});
}
}
})//App.vue
<template>
<div id="app">
<input type="button" value="添加一个路由" @click="push">
<input type="button" value="替换一个路由" @click="replace">
<div>{{ $route.name }}---</div>
<div>
<router-link to="/home">主页</router-link>
<router-link to="/user">用户</router-link>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template><script>
export default {
name: 'app',
methods:{
push(){
router.push({path:'home'});
},
replace(){
router.replace({path:'user'});
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
//

58.vuex的快速的入门看的博客：http://blog.csdn.net/teckeryu/article/details/54915207

59.最简单的vuex的用法。

//store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export const store = new Vuex.Store({
state: {
sideBarOpened: false,
count:40
//放置公用状态
},
mutations: { }
});

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Vuex from 'Vuex'
import { store } from './store'
//import router from './router'
/*var html ={
template:"<div>this is our world!</div>"
}*/
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
render:aa=>aa(App)
})

App.vue中

<template>
<div id="app">
<div>this is our world!</div>
<div>{{this.$store.state.count}}</div>
</div>
</template>

60.computed的简单使用。

61.我们之所以会用computed是因为我们不想在template中直接写变量（我们不可以把$store.state中的变量直接赋值给data中的变量，因为改变的话，你会发现没有效果，所以放computed），在computed中直接写mapState是因为这样写的少一些，但是还不是最简单的，用vuex中的getter最简单的。用mapstate只是可以简化写法。

<template>
<div id="app">
<div>this is our world!</div>
<div>{{this.$store.state.count}}</div>
<div>----</div>
<div>{{count}}</div>
</div>
</template><script>
import {mapState} from "vuex"
export default {
name: 'app',
/*computed:{
countA(){
return this.count+20
}
},*/
/*computed:{
count(){
return this.$store.state.count+1
}
},*/
/*computed:mapState({
count:state=>state.count+2
})*/
computed:mapState([
"count"
]),
methods:{
}
}
</script>

62.mapMutations

//store.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export const store = new Vuex.Store({
state: {
sideBarOpened: false,
count:40
//放置公用状态
},
mutations: {
jia(state,n){
state.count += n.a
},
jian(state){
state.count--
}
}
});
//App.vue
<template>
<div id="app">
<div>this is our world!</div>
<div>{{this.$store.state.count}}</div>
<div>----</div>
<div>{{count}}</div>
<div>
<button @click="$store.commit('jia',{a:10})">jia</button>
<button @click="$store.commit('jian',{a:10})">jia</button>
</div>
</div>
</template><script>
import {mapState,mapMutations} from "vuex"
export default {
name: 'app',
/*computed:{
countA(){
return this.count+20
}
},*/
/*computed:{
count(){
return this.$store.state.count+1
}
},*/
/*computed:mapState({
count:state=>state.count+2
})*/
computed:mapState([
"count"
]),
methods:mapMutations([
'jia','jian'
])
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
//main.js

63.vue2.0中computed和vuex中的getter函数都不建议使用=>函数，因为=>中的this是往上穿一层。

64.actions

//App.vue
<template>
<div id="app">
<div>this is our world!</div>
<div>{{this.$store.state.count}}</div>
<div>----</div>
<div>{{count}}</div>
<div>
<button @click="$store.commit('jia',{a:10})">jia</button>
<button @click="$store.commit('jian',{a:10})">jia</button>
<button @click="jiaplus">jiaplus</button>
<button @click="jianplus">jianplus</button>
</div>
</div>
</template><script>
import {mapState,mapMutations,mapGetters,mapActions} from "vuex"
export default {
name: 'app',
/*computed:{
countA(){
return this.count+20
}
},*/
/*computed:{
count(){
return this.$store.state.count+1
}
},*/
/*computed:mapState({
count:state=>state.count+2
})*/
/*computed:mapState([
"count"
])*/
computed:{
...mapState([
"count"
]),
...mapGetters([
"count"
])
},
/*methods:mapMutations([
'jia','jian'
])*/
methods:{
...mapMutations([
'jia',
'jian'
]),
...mapActions([
'jiaplus'
]),
...mapActions({
jianplus:'jianplus'
})
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

store.js

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export const store = new Vuex.Store({
state: {
sideBarOpened: false,
count:40
//放置公用状态
},
mutations: {
jia(state,n){
state.count += n.a
},
jian(state){
state.count--
}
},
/*getters:{
count:function(state){
return state.count +=100;
}
},*/
actions:{
jiaplus(content){
setTimeout(function(){
content.commit("jia",{a:50});
},5000);
console.log('先执行我哈哈');
},
jianplus({commit}){
commit('jian');
}
}});

65.

Less在项目中的使用

—————————

@black:#000000;

@white:#ffffff;

@gray-darker:lighten(@black,13.5%);//#222

@gray-dark:lighten(@black,20%);//#333

@gray:light(@black,33.5%)//#555

@gray-light:light(@black,33.5%)//#999

@gray:lighter(@black,33.5%)//#eee

@green:#49aa83

@turquoise:#399998;

@orange:#eb6419

@red:#361d39;

@font-size-lg:150%;

@font-size-md:100%;

@font-size-sm:75%;

66.computed在项目中的使用

67.有时候需要在点击时间的后边添加.native 成为@click.native

68.

事件的方法中的this.$parent表达的是父组件。

69.一类不常用的post提交方式。

70.子组件获取父组件的data直接用this.$parent.

71.这里少了一个，号一直报组件加载不成功，找了两个小时。

72.当图片水平居中使用。

vertical-align: middle;
display: table-cell;

之后我们发现，不能使用line-height:✘✘✘px因为这样子的话，垂直居中又失效了。这个table-cell和ling-height还是有点不同的。

73.这个名字和文件的名字无关。

74.这里也可以有两个class

75.vue render函数。

http://www.mamicode.com/info-detail-1906336.html

http://www.cnblogs.com/libin-1/p/6923221.html

76.不知道为什么vuex中的store中的redcar.js会在main之前加载。

77.有时候可以在template中使用template

78.vue dom更新错位的问题。

https://segmentfault.com/a/1190000007787941?_ea=1459649

79.我们需要注意属性,:label和label

:label后边可以绑定data中的数据，label中则不能绑了，纯属个人理解。

80.

今天遇到这个一个奇怪的问题，父页面初始化完成,我们必须触发一次请求,但是我们需要子页面某些操作完成完成后(当子页面mounted之后,这个操作还没完成),才调用我们父的请求,我的处理方法在created的时候，设置一个变量然后在mounted完成所有的之后把这个变量变为true,然后当这个true的时候，子页面调用父方法的时候才可以,

81.vue中的方法命名的时候要注意，自己内部调用的方法用_开头，外部调用的方法不用_开头。es6也是同样的。

82.vue中computed与watch的区别和联系

http://blog.csdn.net/webxiaoma/article/details/72626439

（1）大多数时候使用computed比watch要简单。

（2）可以在computed中写set 和get在设置和返回前触发,

（3）watch有时间是computed替代不了的。

83.