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:
<html ng-app="myApp">
<div ng-controller="MyController">
{{msg}}
</div>
</html>
vue的实现
js:
new Vue({
el:'#itany',//指定关联的选择器
data:{
msg:'Hello World',
name:'tom'
}
});
html:
<div id="itany">
{{msg}}
</div>

什么是指令：
用来扩展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，过滤器函数)
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue