Vue.js 2.0 由浅入深，第一天 day01
2017-07-25 14:25
281 查看
### Vue.js 五天 *汤小洋*
## 一、 Vue.js简介
### 1. Vue.js是什么
**Vue.js**也称为Vue，读音/vju:/，类似view，错误读音v-u-e
版本：v1.0 v2.0
+ 是一个构建用户界面的框架
+ 是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定
+ 数据驱动+组件化的前端开发（核心思想）
+ 通过简单的API实现**响应式的数据绑定**和**组合的视图组件**
+ 更容易上手、小巧
参考：[官网](https://cn.vuejs.org/)
### 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）
#### 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>
### 3. 安装vue-devtools插件，便于在chrome中调试vue
直接将vue-devtools解压缩，然后将文件夹中的chrome拖放到扩展程序中
//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
Vue.config.devtools=false;
Vue.config.productionTip=false; //阻止vue启动时生成生产消息
## 三、 常用指令
### 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中类似
## 四、 练习：用户管理
使用BootStrap+Vue.js
## 五、 事件和属性
### 1. 事件
#### 1.1 事件简写
v-on:click=""
简写方式 @click=""
#### 1.2 事件对象$event
包含事件相关信息，如事件源、事件类型、偏移量
target、type、offsetx
#### 1.3 事件冒泡
阻止事件冒泡：
a)原生js方式，依赖于事件对象
b)vue方式，不依赖于事件对象
@click.stop
#### 1.4 事件默认行为
阻止默认行为：
a)原生js方式，依赖于事件对象
#### 1.5 键盘事件
回车：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up
默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名
#### 1.6 事件修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
### 2. 属性
#### 2.1 属性绑定和属性的简写
v-bind 用于属性绑定， v-bind:属性=""
属性的简写：
v-bind:src="" 简写为 :src=""
#### 2.2 class和style属性
绑定class和style属性时语法比较复杂：
## 六、 模板
### 1. 简介
Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中
也称为Mustache语法
### 2. 数据绑定的方式
a.双向绑定
v-model
b.单向绑定
方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
方式2：使用v-text、v-html
### 3. 其他指令
v-once 数据只绑定一次
v-pre 不编译，直接原样显示
## 七、 过滤器
### 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,过滤器函数)
#### 3.l 自定义局部过滤器
## 一、 Vue.js简介
### 1. Vue.js是什么
**Vue.js**也称为Vue，读音/vju:/，类似view，错误读音v-u-e
版本：v1.0 v2.0
+ 是一个构建用户界面的框架
+ 是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定
+ 数据驱动+组件化的前端开发（核心思想）
+ 通过简单的API实现**响应式的数据绑定**和**组合的视图组件**
+ 更容易上手、小巧
参考：[官网](https://cn.vuejs.org/)
### 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）
#### 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>
### 3. 安装vue-devtools插件，便于在chrome中调试vue
直接将vue-devtools解压缩，然后将文件夹中的chrome拖放到扩展程序中
//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
Vue.config.devtools=false;
Vue.config.productionTip=false; //阻止vue启动时生成生产消息
## 三、 常用指令
### 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中类似
## 四、 练习：用户管理
使用BootStrap+Vue.js
## 五、 事件和属性
### 1. 事件
#### 1.1 事件简写
v-on:click=""
简写方式 @click=""
#### 1.2 事件对象$event
包含事件相关信息，如事件源、事件类型、偏移量
target、type、offsetx
#### 1.3 事件冒泡
阻止事件冒泡：
a)原生js方式，依赖于事件对象
b)vue方式，不依赖于事件对象
@click.stop
#### 1.4 事件默认行为
阻止默认行为：
a)原生js方式，依赖于事件对象
#### 1.5 键盘事件
回车：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up
默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名
#### 1.6 事件修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
### 2. 属性
#### 2.1 属性绑定和属性的简写
v-bind 用于属性绑定， v-bind:属性=""
属性的简写：
v-bind:src="" 简写为 :src=""
#### 2.2 class和style属性
绑定class和style属性时语法比较复杂：
## 六、 模板
### 1. 简介
Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中
也称为Mustache语法
### 2. 数据绑定的方式
a.双向绑定
v-model
b.单向绑定
方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
方式2：使用v-text、v-html
### 3. 其他指令
v-once 数据只绑定一次
v-pre 不编译，直接原样显示
## 七、 过滤器
### 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,过滤器函数)
#### 3.l 自定义局部过滤器
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Vue.js 2.0 由浅入深，第三天 day03
- Vue.js 2.0 由浅入深，第四天 day04
- Vue.js 2.0 由浅入深，第五天 day05
- Vue.js 2.0 由浅入深，第二天 day02
- Vue.js 2.0环境搭建（mac机系统环境）
- Vue.js2.0 入门实例（二）（小试牛刀）
- vue.js学习：1.0到2.0的变化（区别）
- Vue.js 2.0 教程精华梳理（一） 基础
- Vue.js 2.0和Cordova开发webApp环境搭建
- Vue.js2.0从入门到放弃---入门实例
- Rubik UI 是一个基于 Vue.js 2.0
- Vue.js 2.0 - Virtual DOM到底是什么样的
- vue.js2.0视频教程
- vue2.0使用weui.js的uploader组件上传图片
- Vue.js 学习10 Element基于Vue2.0的组件库
- [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- Vue.js 2.0 跨域请求数据
- Vue.js 2.0源码解析之前端渲染篇
- vue.js2.0父组件点击触发子组件方法