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 防止闪烁, 比较大段落
----------------------------------
<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上的开元项目的想法思考或者启示。
33.用了vue-cli的webpack配置后要怎么debug
34.eslint 和 jslint: 检查的太严格了,没太大意义.
35.
vuex的学习和使用。
http://vuex.vuejs.org/zh-cn/modules.html
http://www.shouce.ren/api/view/a/11734
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的话，那么只有最后一个有效，会覆盖上边的。
---------------------------
以下是学习这个项目学到的东西。
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
到了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 路由: | |
基本使用: | |
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问题: | |
论坛 | |
------------------------------------------------ | |
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库 | |
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); | |
论坛: | |
------------------------------------------------------- | |
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>
//
View Code
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>
View Code
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
76.不知道为什么vuex中的store中的redcar.js会在main之前加载。
77.有时候可以在template中使用template
78.vue dom更新错位的问题。
79.我们需要注意属性,:label和label
:label后边可以绑定data中的数据，label中则不能绑了，纯属个人理解。
80.
今天遇到这个一个奇怪的问题，父页面初始化完成,我们必须触发一次请求,但是我们需要子页面某些操作完成完成后(当子页面mounted之后,这个操作还没完成),才调用我们父的请求,我的处理方法在created的时候，设置一个变量然后在mounted完成所有的之后把这个变量变为true,然后当这个true的时候，子页面调用父方法的时候才可以,
81.vue中的方法命名的时候要注意，自己内部调用的方法用_开头，外部调用的方法不用_开头。es6也是同样的。
82.vue中computed与watch的区别和联系
（1）大多数时候使用computed比watch要简单。
（2）可以在computed中写set 和get在设置和返回前触发,
（3）watch有时间是computed替代不了的。
83.
