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.
