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: 
 

   <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，过滤器函数) 
 

猜你喜欢