angularjs指令

$compile 这是个编译服务。编译一段HTML字符串或者DOM的模板， 产生一个将scope和模板连接到一起的函数。 编译服务主要是为指令编译DOM元素，下面的一大段也是主要介绍指令的。 下面是一个被声明的带指令定义对象的指令的示例： var myModule = angular.module(...); myModule.directive('directiveName', [“injectables”,…,function factory(injectables,…) { var directiveDefinitionObject = { 　　 priority: 0, 　　 template: '<div></div>', // or // function(tElement, tAttrs) { ... }, 　　 // or 　　 // templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... }, 　　 replace: false, 　　 transclude: false, 　　 restrict: 'A', 　　 scope: false, 　　 controller: function($scope, $element, $attrs, $transclude,

紧接上篇博客“ 初探AngularJS ” 一、前言 在AngularJS中指令尤为重要且内容庞多，固单独提炼出来，梳理一番。如有错误，请不吝讲解。 好了，言归正传，让我们一起走进Angular指令的世界。 在上篇博客的前言部分提到，Angular的核心就是对HTML标签的增强。我们用到的诸如ng-app、ng-controller等等这些都是属于Angular指令，具体点，它们为Angular内置的指令。 Angular不仅提供了内置指令，它还允许我们自定义指令，不然Angular就太low咯。 这也是本篇博客的核心：如何自定义指令。 该篇博客原文地址： http://www.cnblogs.com/giggle/p/5746220.html 二、自定义指令 Angular为我们提供了.directive()这个方法，来定义指令。 如下： 正如上述代码所示，directive方法接受两个参数：name和factory_function。 　　--name嘛，即为指令的名字，供我们调用时使用； 　　--factory_function就是当我们调用指令时，指令的实际行为，并且factory_function通常返回一个对象，里面通过规定的设置项来定义指令。 那么自定义指令中，我们都可以操作哪些设置项呢？ 如下： var app = angular.module('myApp', [

今年3月接触AngularJs，并且在6月的项目中开始应用，从踩坑到填坑花了不少时间，根据项目中的实际应用情况总结了一些经验，如下： 一．UI控件选择 Angularjs是不缺控件的，Github里现成的控件非常丰富，基本上足以应付一个普通管理系统中常见的控件需求。但是控件的丰富会带来选择的困难。选择控件要满足几个原则： 原则1：符合业务场景 原则2：控件持续更新 原则3：满足性能要求 举几个例子。首先是上传附件的控件。项目中要用到附件上传，谷歌上搜到了三个控件，分别是 https://github.com/leon/angular-upload https://github.com/danialfarid/ng-file-upload https://github.com/nervgh/angular-file-upload 因为项目需要兼容IE9，就重点关注了这三个控件对浏览器的兼容性。第一个控件没有任何说明，第二个控件支持IE9，但是前提是要安装flash，第三个控件支持IE8和9，但是只支持部分功能。从浏览器兼容性的角度考虑，最终选择了控件三。 再举一个例子，下拉框控件。html原生的select功能比较单一，并且option的样式很难修改，在前端各个框架所用的下拉框基本上都是重新实现的。Angularjs也不例外。项目中刚开始选用了ui-select2。后来在ui

目录 vue导入方式及优缺点 挂载点 　插值表达式 过滤器 文本指令 js面向对象 js 函数 ES6中定义变量的4中方式 几种函数的书写方式 function、箭头函数、方法的区别 事件指令 属性指令 vue导入方式及优缺点 1.Vue加载方式一：下载到本地 <script src="js/vue.js"></script> 2.Vue加载方式一:使用cdn导入(链接) <script src="https://cn.vuejs.org/js/vue.min.js"></script> 前台框架：angular、react、vue vue：有前两大框架优点，摈弃缺点；没有前两个框架健全 vue优点：中文API、单页面应用、组件化开发、数据双向绑定、虚拟DOM、数据驱动思想(相比DOM驱动) Vue下载及官方文档： 由此进入 挂载点 1) html与body不能作为挂载点 2)一个vue对象挂载点之后索引一个匹配结果，所以挂载点一般用id标识 　插值表达式 {{ 变量以及变量的简单运算 }} 1) 用实例成员data为vue环境提供数据，数据采用字典{}形式 2) 在插值表达式{{}}中，直接书写数据的key来访问数据 3) 在外部通过接受实例的变量app，访问实例成员(实例成员都用$开头)，间接访问到数据 app.$data.info 4)

一、什么是 MVVM ？ MVVM是 Model-View-ViewModel的缩写。 MVVM是一种设计思想。 Model 层代表数据模型，也可以在 Model中定义数据修改和操作的业务逻辑； View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来， ViewModel 是一个同步 View 和 Model的对象（桥梁）。 在 MVVM架构下， View 和 Model 之间并没有直接的联系，而是通过 ViewModel进行交互， Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model中，而 Model 数据的变化也会立即反应到 View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 二、 mvvm 和 mvc 区别？它和其它框架（ jquery ）的区别是什么？哪些场景适合？ mvc和 mvvm其实区别并不大。都是一种设计思想。主要就是 mvc中 Controller演变成 mvvm中的 viewModel。 mvvm主要解决了 mvc中大量的 DOM

壹 ❀ 引 我在前面花了三篇文章用于介绍angularjs的指令directive，组件component，并专门花了一篇文章介绍directive与component的不同，其中提到在component的声明周期中需要配合钩子函数来实现组件部分功能，例如在bindings传值过程中，你得通过$onInit方法来初始化数据，那么我们就来好好聊聊component中常用的几个钩子函数，本文开始。 贰 ❀ $onInit 在介绍component的文章中已经有涉及$onInit方法的说明，$onInit用于在component的controller中做数据初始化的操作。 常理上来说，即便我们不通过$onInit为组件绑定数据也是没问题的，看个简单的例子： <div ng-controller="myCtrl"> <echo></echo> </div> angular.module('myApp', []) .controller('myCtrl', function ($scope) {}) .component('echo', { template: '<div>{{vm.name}}</div><button ng-click="vm.sayName()">点我</button>', controllerAs: 'vm', controller: function () {

Vue Vue近几年来特别的受关注，三年前的时候angularJS霸占前端JS框架市场很长时间，接着react框架横空出世，因为它有一个特性是虚拟DOM，从性能上碾轧angularJS，这个时候，vue1.0悄悄 的问世了，它的优雅，轻便也吸引了一部分用户，开始收到关注，16年中旬，VUE2.0问世，这个时候vue不管从性能上，还是从成本上都隐隐超过了react，火的一塌糊涂，这个时候，angular 开发团队也开发了angular2.0版本，并且更名为angular，吸收了react、vue的优点，加上angular本身的特点，也吸引到很多用户，目前已经迭代到5.0了。 学习vue是现在前端开发者必须的一个技能。 前端js框架到底在干嘛，为什么要用 js框架帮助开发者写js逻辑代码，在开发应用的时候js的功能划分为如下几点： 渲染数据 操作dom（写一些效果） 操作cookie等存储机制api 在前端开发中，如何高效的操作dom、渲染数据是一个前端工程师需要考虑的问题，而且当数据量大，流向较乱的时候，如何正确使用数据，操作数据也是一个问题 而js框架对上述的几个问题都有自己趋于完美的解决方案，开发成本降低。高性能高效率。唯一的缺点就是需要使用一定的成本来学习。 Vue官网介绍 vue是渐进式JavaScript框架 “渐进式框架”和“自底向上增量开发的设计”是Vue开发的两个概念

一 　理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话: Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。 这句话可能大家并不陌生,但是真正理解这句话的可能并不多,其实,读懂了这句话,也就明白了vue的核心理念. 那么,怎样理解什么是渐进式框架?在这之前,我们首先要理解什么是框架.在最初的前端开发中,为了完成某个功能,我们需要通过js在HTML页面中获得dom节点,随后获得dom节点中的文本内容或者在dom节点上添加事件,进行一系列的程序操作,但是,如果任务量很大的情况下,代码会随着业务的增加而变得臃肿和混乱,在现实的开发中,负责的逻辑和巨大的开发量,是原生js无法完成的. 这个时候,开发人员将js代码分为了三个板块,数据(Model),逻辑控制(*),视图(View),数据板块只负责数据部分,视图板块负责更改样式,逻辑控制负责联系视图板块和数据板块,这样子有很大的好处,当需求发生变动时,只需要修改对应的板块就好 这种开发模式,就是所谓的MV*结构,我们现在了解的MVC,MVP,ＭＶＶＭ都是MV*的衍生物，对比这几种框架模式，我们会总结出来一个本质的特点

Vue框架： 官网 vue框架：渐进式JavaScript框架 vue一个环境：可以只控制页面中一个标签、可以控制一组标签、可以控制整个页面、可以控制整个项目 vue可以根据实际需求，选择控制前端项目的区域范围 为什么学习vue """ 1、html、css、js直接开发项目，项目杂乱，不方便管理，要才有前端框架进行开发，规范项目 2、Angular、React、Vue三个前端框架，吸取前两个框架的所有优点，摒弃缺点，一手文档是中文 3、Vue框架优点： 轻量级 数据驱动 数据的双向绑定 虚拟DOM（嵌套页面架构的缓存） 组件化开发 由全球社区维护 单页面应用、MVVM设计模式 """ vue模板 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app' }) </script> </html> 首先总得知道vue的样子是什么 vue导入-挂载点 在html页面中用script标签导入vue环境 <!DOCTYPE html> <html lang="zh">

ng-keyup 完成， ng-keyup 指令用于告诉 AngularJS 在指定 HTML 元素上按键松开时需要的操作。 ng-keyup 指令不会覆盖元素的原生 onkeyup 事件, 事件触发时， ng-keyup 表达式与原生的 onkeyup 事件将都会执行。 因此，只需要在想调用回车事件的元素使用 ng-keyup 指令和对应的事件即。 举个栗子： <input type= "text" ng-keyup= "enterEvent($event)" ng-model= "searchKey" > // 关键字搜索 $scope .keySearch = function () { alert( "回车事件" ) }; $scope .enterEvent = function (e) { var keycode = window.event ? e.keyCode : e.which; if (keycode== 13 ){ $scope .keySearch(); } }; 文章来源: angularJs回车事件