汤小洋Vue全家桶笔记-第一章 Vue.js2.0由浅入深:基本用法

作者: 小疯子 分类: Vue 发布时间: 2019-08-09 09:27

说明:蓝底的是自己加的方便自己理解的内容笔记,其他的应该就是原始的笔记,对应的代码在git地址:

一、 Vue.js简介

1. Vue.js是什么

Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0
  • 是一个构建用户界面的框架
  • 是一个轻量级MVVM(Model-View-ViewModel)框架,和angular、react类似,其实就是所谓的数据双向绑定
  • 数据驱动+组件化的前端开发(核心思想)
  • 通过简单的API实现响应式的数据绑定和组合的视图组件
  • 更容易上手、小巧
参考:官网

2.vue和angular的区别

2.1 angular

  • 上手较难
  • 指令以ng-xxx开头
  • 所有属性和方法都存储在$scope中
  • 由google维护

2.2 vue

  • 简单、易学、更轻量
  • 指令以v-xxx开头
  • HTML代码+JSON数据,再创建一个vue实例
  • 由个人维护:尤雨溪,华人,目前就职于阿里巴巴,2014.2开源了vue.js库
共同点:都不兼容低版本IE 对比:GitHub上vue的stars数量大约是angular的两倍

二、起步

1. 下载核心库vue.js

bower info vue
npm init --yes
cnpm install vue --save
版本 v2.3.4 目前最新版本(2017.6.29)

vue2.0和1.0相比,最大的变化就是引入了Virtual DOM(虚拟DOM),页面更新效率更高,速度更快

2. Hello World(对比angular)(见01.html中相关代码)

2.1 angular实现

js:
    let app=angular.module('myApp',[]);
    app.controller('MyController',['$scope',function($scope){
        $scope.msg='Hello World';
    }]);
html:   
    <html ng-app="myApp">
        <div ng-controller="MyController">
            {{msg}}
        </div>
    </html>

2.2 vue实现

js:
    new Vue({
        el:'#itany', //指定关联的选择器
        data:{ //存储数据
            msg:'Hello World',
            name:'tom'
        }
    });
html:
    <div id="itany">
        {{msg}}
    </div>
有一个id为itany的元素,我的vue就是要在id为itany的元素上应用;
存数据就给定一个名称data就是用来存放数据的,msg是数据名称,‘HelloWord'就是数据值;

3. 安装vue-devtools插件,便于在chrome中调试vue

直接将vue-devtools解压缩,然后将文件夹中的chrome拖放到扩展程序中

//配置是否允许vue-devtools检查代码,方便调试,生产环境中需要设置为false
    Vue.config.devtools=false;
    Vue.config.productionTip=false; //阻止vue启动时生成生产消息
vue-devtools的git地址:https://github.com/vuejs/vue-devtools
按照上面的教程生成出chrome文件,将其解压后直接将文件夹拖到chrome的扩展程序中。文件Wie
链接:https://pan.baidu.com/s/1ePTBGJCJJOYQ5uX7n8YOrQ
提取码:0re9
git中的安装tool的部分截图
tx01.png
将左侧的解压后chrome文件夹往右边的扩展程序页面一拖就算是装好了,调试工具后面多了一个vue

tx02.pngtx03.pngtx04.png

不想产生如下图所示的消息,则设置此代码为false:Vue.config.productionTip=false; //阻止vue启动时生成生产消息 针对开发环境和线上环境设置不同,具体看01.html代码
tx05.png

三、 常用指令

1. 什么是指令?

用来扩展html标签的功能
angular中常用的指令:
  ng-model:双向数据绑定
  ng-repeat :循环
  ng-click :点击事件的绑定
  ng-show/ng-hide :显示隐藏
  ng-if :判断

2. vue中常用的指令

  • v-model 双向数据绑定,一般用于表单元素
  • v-for 对数组或对象进行循环操作,使用的是v-for,不是v-repeat。
    注:在vue1.0中提供了隐式变量,如$index、$key 在vue2.0中去除了隐式变量,已被废除
  • v-on 用来绑定事件,用法:v-on:事件="函数"
  • v-show/v-if
    用来显示或隐藏元素,v-show是通过display实现,v-if是每次删除后再重新创建,与angular中类似
(1)v-model使用(相关代码:02.html)
el应用的元素设置不仅可以用id来设置,也可以根据元素的class或者元素标签选择器(类型)设置
new Vue({

el: '.itany' //作用于<div class='itany'>...

})

new Vue({

el: '<div>' //作用于<div>...

})
那如果元素标签选择器写body行不行,body不可以会出现一个错误警告
el: 'body '//vue2.0中不允许将vue实例挂载到<html>或<body>元素,在vue1.0中是可以的

 

data:{
   // name:'', //即使没有值,也不能省略,报错 ,因为下面的v-model已经引用了name属性,所以要先声明了,具体见02.html中的相关代码

 

(2)v-for使用(相关代码:03.html)

<li v-for="(v,k) in user">{{k}}={{v}}</li> 留意循环的key-value位置,是先是value再是key

循环普通数组的key就是0,1,2,3……
循环包含重复数据的集合arr2:[12,3,4,12,3] 对于2.0直接就可以正常循环,对于1.0就不大行了,还提供了一个属性 冒号key:key=",作用是为当前的属性绑定唯一的key,但是不加也不会报错啊所以有啥作用啊?作用是更新元素时可重用元素,提高效率。这句话是什么意思?如果arr2中的元素换了,那么循环v-for的时候就会重新来一遍替换,之前的元素都替换移动位置给新元素腾位置添加,而加上:key之后则可以重用之前的元素,新元素在正确的位置去插入新的节点即可,减少了其他元素的替换。看官方api解释如下:
v-for 默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个 key 的特殊属性:https://cn.vuejs.org/v2/api/#key 好像和老师讲的有些冲突
eg: https://www.jianshu.com/p/4bd5e745ce95关于vue中的v-for的:key的作用,反正一般是加上为好免得有啥不可知的错误
list: [ { id: 1, name: '李斯' }, { id: 2, name: '吕不韦' }, { id: 3, name: '嬴政' } ]
设置选中2吕不韦,当添加新的元素"楠楠"在顶部后,选中仍然选第二个元素变成了李斯
可以简单的这样理解:加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果
对于数组元素遍历添加索引,索引是从0开始,其实也就是个普通数组的key是一样的,都是0开始0,1,2,3
vue:
users:[
  {id:9527,name:'唐伯虎',age:25},
  {id:1001,name:'秋香',age:22},
  {id:1002,name:'石榴姐',age:24}
]
html:
<li v-for="(user,index) in users">
  {{index+1}},{{user.id}},{{user.name}},{{user.age}}
</li>
(3)v-on使用(相关代码:04.html)
vue存放普通的属性,在data:{}里面存就行了,但是如果要存放方法,那么就需要使用methods:{},v-on主要跟method关联绑定的,也可以跟表达式对应
tx06.png
发现往arr里面push新元素报错,提示arr没有被声明;
这里要引入this,代表当前vue实例(见代码),所以在方法中使用arr元素,需要这样子this.arr.push(666)
v-on:click="show()" 和v-on:click="show"如果方法不带参数,那么方法后的小括号可以删了。
其他简单的事件名称:
<button v-on:mouseover="show">鼠标经过</button>
<button v-on:dblclick="show">鼠标双击</button>
(4)v-show/v-if(相关代码:05.html)
v-on:click=“”事件中内容可以不用非得是方法,也可以是操作
<!-- <button v-on:click="change">隐藏</button> -->
<button v-on:click="flag=!flag">隐藏</button>
<div style="width: 100px;height: 100px; background-color: red" v-if="flag">欢迎来到南京网博</div>
<div style="width: 100px;height: 100px; background-color: green" v-show="flag">欢迎来到南京网博</div>
通过开发者F12调试工具可以看到v-if和v-show元素的显示情况

四、 练习:用户管理(相关代码:06.html)

使用BootStrap+Vue.js
注意v-on:click中的方法名不要直接用add,del啥啥的,可能有默认的值会报错
数组users[-1].name,数组对应的索引元素是否存在需要验证一下是否存在,否则执行的时候就直接报错:{{users[nowIndex]?users[nowIndex].name:''}}

五、 事件和属性

1. 事件

1.1 事件简写(相关代码:07.html)

v-on:click="" 简写方式 @click=""

1.2 事件对象$event(相关代码:07.html)

包含事件相关信息,如事件源、事件类型、偏移量 target、type、offsetx
和html的click传入event作为方法参数click="print(event)"不同,vue的click有它独特的写法。
<button @click="print($event)">Click Me</button>
print(e){
    // console.log(e);
    console.log(e.target.innerHTML); //DOM对象
    console.log(this);
}

1.3 事件冒泡(相关代码:08.html)

事件冒泡是什么含义?当你在一个元素上触发一个事件的时候,这个事件会传播往上传播就是事件冒泡。
阻止事件冒泡:
a) 原生js方式,依赖于事件对象
<button @click="show($event)">点我</button> 此button父元素的事件就不会执行了
传入event给js,js中通过event来阻止
show(e){
// e.stopPropagation();
}
b) vue方式,不依赖于事件对象
    @click.stop
<button @click.stop="show">点我</button>
show(){
console.log(111);
},

1.4 事件默认行为

什么是事件默认行为,就是元素本身具有的默认行为。什么元素有默认行为呢?比如链接<a>的默认动作就是跳转到指定页面,提交按钮<input type="submit">等
阻止默认行为:
  a)原生js方式,依赖于事件对象
<a href="#" @click="study($event)">俺是链接</a> // 阻止<a>标签的默认跳转页面
study(e){
  console.log(444);
  e.preventDefault();
}
  b)vue方式,不依赖于事件对象
<a href="#" @click.prevent="study">俺是链接</a>
study(){
  console.log(444);
}

1.5 键盘事件(相关代码:09.html)

回车:@keydown.13 或@keydown.enter
上:@keydown.38 或@keydown.up
默认没有@keydown.a/b/c...事件,可以自定义键盘事件,也称为自定义键码或自定义键位别名
<!-- 键盘事件:@keydown、@keypress、@keyup -->
下面是Js高级教程对三者的描述:
keydown:当用户按下键盘上的任意键时触发,如果按住不放的话,会重复触发此事件;
keypress:当用户按下键盘上的字符键时触发,如果按住不让的话,会重复触发此事件;
keyup:当用户释放键盘上的字符键时触发
(1)原始的代码:
如果想要获取按的是哪个按键就需要拿到事件对象
@keydown="show($event)
show(e){
  console.log(e.keyCode);
  if(e.keyCode==13){
    console.log('您按了回车');
  }
}
(2)判断回车的简化,直接通过keyCode值来触发
用户名:<input type="text" @keydown.13="print">
print(){
  console.log('您按了回车');
}
另外用名称设置:用户名:<input type="text" @keydown.enter="print">
vue大部分的按键都是有别名的。
(3)自定义键位别名 api说明:https://cn.vuejs.org/v2/api/#keyCodes
/**
* 自定义键位别名
*/
Vue.config.keyCodes={
  a:65,
  f1:112
}
用户名:<input type="text" @keydown.f1="print">
老师按的f1不好使,按了alt+f1就好使了代表的是112,根据电脑或浏览器版本各不相同

1.6 事件修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

2. 属性

2.1 属性绑定和属性的简写(相关代码:10.html)

v-bind 用于属性绑定, v-bind:属性=""
属性的简写:
    v-bind:src="" 简写为 :src=""
只要前面有:开始的就是属性的绑定,而事件的绑定是@符号
如果想要给图片指定宽和高,定义宽和高的属性值w,h,然后<img :src="url" :width="w" :height="h">
错误写法展示:
以下写法错误,在2.0中的这种用法已经从1.0版本中移除了,让你使用v-bind模板来绑定
tx07.png

2.2 class和style属性(相关代码:11.html)

绑定class和style属性时语法比较复杂:详细见代码中的注释很详细
vue:

data:{

  bb:'aa',

  dd:'cc',

  flag:true,

  num:-2,

  hello:{aa:true,cc:true},

  xx:{color:'blue',fontSize:'30px'},

  yy:{backgroundColor:'#ff7300'}

}

html:

<!--

class属性

-->

<!-- <p class="aa">南京网博</p> --> <!-- 可以访问,普通css方式 -->

<!-- <p :class="aa">南京网博</p> --> <!-- 不可以,Vue的属性绑定时不能直接css样式 (ps:我试了一下好像也不报错) -->

<!-- 方式1:变量形式 -->

<!-- <p :class="bb">南京网博</p> -->

<!-- 方式2:数组形式,同时引用多个费劲不用,用下面的方式3 -->

<!-- <p :class="[bb,dd]">南京网博</p> -->

<!-- 方式3:json形式,常用!!!用json格式就不会出现上面的第二种<p :class="aa">错误形式了,能够直接指定类的名称 -->

<!-- <p :class="{aa:true,cc:flag}">南京网博</p> -->

<!-- <p :class="{aa:num>0}">南京网博</p> -->

<!-- 方式4:变量引用json形式 -->

<!-- <p :class="hello">南京网博</p> -->

<!--

style属性

-->

<p :style="[xx,yy]">itany</p>
教程代码中这样写不生效,所以看样子是不支持此写法,目前就是直接定义true,false值给json了
tx08.png

六、 模板

1. 简介

Vue.js使用基于HTML的模板语法,可以将DOM绑定到Vue实例中的数据 模板就是{{}},用来进行数据绑定,显示在页面中 也称为Mustache语法

2. 数据绑定的方式(相关代码:12.html)

  a.双向绑定 v-model
  b.单向绑定
      方式1:使用两对大括号{{}},可能会出现闪烁的问题,可以使用v-cloak解决(数据还没有加载完成,页面就显示出两个大括号了,解决方式就是用v-cloak,但是目前没有效果,因为官方说要和css规格相匹配一起使用:https://cn.vuejs.org/v2/api/#v-cloak,详细看代码或文档,这种用法比较挫)
闪烁问题可如下图所示
vue00.png
      方式2:使用v-text、v-html
          v-text就等价于{{}},v-text和v-html的区别就是一个是当作纯文本,一个是能识别其中的标签并进行相应的变换。

3. 其他指令

v-once 数据只绑定一次(第一次显示绑定的msg值,后期msg再怎么更改这v-once中的内容都不会改)
v-pre 不编译,直接原样显示(写了{{msg}},那么就这样显示出{{msg}})

七、 过滤器(相关代码:13.html)

1. 简介

用来过滤模型数据,在显示之前进行数据处理和筛选 语法:{{ data | filter1(参数) | filter2(参数)}}

2. 关于内置过滤器

vue1.0中内置许多过滤器,如: currency、uppercase、lowercase limitBy orderBy filterBy vue2.0中已经删除了所有内置过滤器,全部被废除 如何解决: a.使用第三方工具库,如lodash(下划线)、date-fns日期格式化、accounting.js货币格式化等 b.使用自定义过滤器

3. 自定义过滤器

分类:全局过滤器、局部过滤器(只能在当前实例中使用)

3.l 自定义全局过滤器

使用全局方法Vue.filter(过滤器ID,过滤器函数)https://cn.vuejs.org/v2/api/#Vue-filter
/**
 * 自定义全局过滤器
 */
Vue.filter('addZero',function(data){ // 为个位补零过滤器
   // console.log(data); data就是我们要操作的那个数据,此处是3
   return data<10?'0'+data:data;
});

3.l 自定义局部过滤器

window.onload=function(){
   let vm=new Vue({
      el:'#itany',
      data:{
         currentTime:Date.now()
      },
      filters:{ //局部过滤器
         number:(data,n) => {
            return data.toFixed(n);
         }
      }
   });
}
0

发表评论

电子邮件地址不会被公开。 必填项已用*标注