vuejs点滴
Posted 飘然离去
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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组件 | |
| 别人提供好一堆东西 | |
| 目的: | |
| 为了提高开发效率 | |
| 功能 | |
| 原则: 拿过来直接使用 | |
| 如何在 Vs Code 中更改默认自动选择的用户片段行为 |