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);
   }
  }
});

 8.

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

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

9.

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

简写的:
@click="" 推荐

事件对象:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推荐
默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent 推荐
键盘:
@keydown $event ev.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否则不行，这个不通用)

  <strong :style="{color:'red'}">文字...</strong>  

<style>
.red{
     color: red;
}
</style>

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

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

第三种：

 <strong :style="a">文字...</strong>

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

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

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

12.

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

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

13.

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

{{msg| filterA}}
{{msg| filterA | filterB}}

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

currency 钱

{{msg| filterA 参数}}

下面有讲的自定义过滤器

14.

get:
        获取一个普通文本数据:
        this.$http.get('aa.txt').then(function(res){
            alert(res.data);
        },function(res){
            alert(res.status);
        });
        给服务发送数据:√
        this.$http.get('get.php',{
            a:1,
            b:2
        }).then(function(res){
            alert(res.data);
        },function(res){
            alert(res.status);
        });
    post:
        this.$http.post('post.php',{
            a:1,
            b:20
        },{
            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

// 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)
})

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.