vue基本用法总结

vue.js

是一个构建用户界面的框架

是一个轻量级MVVM（Model-View-ViewModel)框架，和angular，react框架类似，其实就是所谓的数据双向绑定

数据驱动+组件化的前端开发（核心思想）

通过简单的api实现**响应式的数据绑定**和**组合的视图组件

更容易上手，小巧。

angular

指令ng-xxx 开头

所有属性和方法都存储在$scope中

由google维护

vue

指令以v-xxx开头

HTML代码+JSON数据，再创建一个vue实例

由个人维护，**犹雨溪**，华人，目前就职于阿里巴巴，14年2月开源了vue

共同点：

都不兼容低版本ie

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

helloword的angular实现

js:

let app-angular.module('myApp',[]);

app-controller('MyController',['$scope',function($scope){

$scope.msg='hello world';

}]);

html:

{{msg}}

vue的实现

js:

new Vue({

el:'#itany',//指定关联的选择器

data:{

msg:'Hello World',

name:'tom'

}

});

html:

{{msg}}

什么是指令：

用来扩展html标签的功能

angular中常用的指令：

ng-model

ng-repeat

ng-click

ng-show/ng-hide

ng-if

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中类似。

事件简写

v-on:click="show"

@click="show"

事件对象$event

包含事件相关信息，如事件源，事件类型，偏移量

target,type,offsetx,offsety

事件冒泡

阻止事件冒泡：

1）原生js方式，依赖于事件对象

2）vue方式，不依赖于事件对象

事件默认行为

阻止默认行为

1）原生js方式，依赖于事件对象

键盘事件

回车：@keydown.13或@keydown.enter

上：@keydown.38或@keydown.up

默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名

事件修饰符

.stop - 调用event.stopPropagation()

.prevent - 调用event.preventDefault()

.(keyCode|keyAlias) - 只当事件是从特定键触发时才触发回调

.native - 监听组件根元素的原生事件

.once - 只触发一次回调

属性绑定和属性的编写

v-bind 用于属性的绑定，v-bind:属性=""

属性的简写：

v-bind:src=""简写为:src=""

class属性和style属性

绑定class和style属性时可以传json，等方式

模板

vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据

模板就是{{}}，用来进行数据绑定，显示在页面中

也称为Mustache语法

数据绑定的方式

a.双向绑定

v-model

b.单向绑定

方式一：使用两对大括号{{}},可能会出现闪烁的问题，可以使用v-cloak解决

方式二：使用v-text,v-html

其他指令

v-once 数据只绑定一次

v-pre 不编译，直接原样显示

过滤器

用来过滤模型数据，在显示之前进行数据处理和筛选

语法：{{data|filter(参数) | filter2(参数)}}

内置过滤器

vue2.0删除了所有内置过滤器，全部被废除

解决方式：

a.使用第三方工具库，如loadash,date-fns日期格式化,accounting.js货币格式化

b.使用自定义过滤器

自定义过滤器

分类：全局过滤器，局部过滤器

自定义过滤器

使用全局方法vue.filter(过滤器ID，过滤器函数)