angularjs指令

Vue 一. 什么是Vue 可以独立完成前后端分离时 Web项目的JavaScript框架 二.为什么学Vue 前端三大主流框架：Angular React Vue Vue结合了其他框架优点、轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用 # vue是js渐进式框架 # 根据开发需求，可以决定vue框架控制项目的具体方位：可以为一个标签，也可以为一个页面，甚至可以为整个项目 三.如何使用Vue 开发版本： vue.js 生产版本： vue.min.js vue的导入: <!--方式一: 本地--> <script src="js/vue.js"></script> <!--方式二: cdn--> <script src="https://cn.vuejs.org/js/vue.min.js"></script> 插值表达式: <div id="app"> <!-- {{ }} 是插值表达式,中间的info是变量,可通过vue实例成员data赋值 --> <!-- 注意:插值表达式中可以写基础类型的数据,只有写变量时才能被data赋值 --> {{ info }} {{ 'info' }} 渲染到页面是: info </div> <1>Vue实例: <script> new Vue({ // 实例成员 }) </script> <!--

vue导读 """ vue框架 vue是前台框架：Angular、React、Vue vue：结合其他框架优点、轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用 vue环境：本地导入与cdn导入 """ # vue是js渐进式框架 # 根据开发需求，可以决定vue框架控制项目的具体方位：可以为一个标签，也可以为一个页面，甚至可以为整个项目 实例成员 - 挂载点 """ 1、vue渐进式框架：控制页面及项目的范围 2、vue的环境导入：本地、cdn 3、vue框架的优点：轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用 4、vue如何与html页面结构建立关联：挂载点 """ # 1) html与body不能作为挂载点 # 2) 一个vue对象挂载点之后索引一个匹配结果，所以挂载点一般用id标识 <div id="wrap"> {{ }} <hr> <div class="main"> {{ }} </div> <hr> <div class="main"> {{ }} </div> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#wrap' // el表示挂载点 }) </script> js对象(字典)补充 let b = 20;

vue导读 """ vue框架 vue是前台框架：Angular、React、Vue vue：结合其他框架优点、轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用 vue环境：本地导入与cdn导入 """ # vue是js渐进式框架 # 根据开发需求，可以决定vue框架控制项目的具体方位：可以为一个标签，也可以为一个页面，甚至可以为整个项目 实例成员 - 挂载点 """ 1、vue渐进式框架：控制页面及项目的范围 2、vue的环境导入：本地、cdn 3、vue框架的优点：轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用 4、vue如何与html页面结构建立关联：挂载点 """ # 1) html与body不能作为挂载点 # 2) 一个vue对象挂载点之后索引一个匹配结果，所以挂载点一般用id标识 <div id="wrap"> {{ }} <hr> <div class="main"> {{ }} </div> <hr> <div class="main"> {{ }} </div> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#wrap' // el表示挂载点 }) </script> js对象(字典)补充 let b = 20;

Vue导读 实例成员 - 挂载点\数据\过滤器 js对象(字典)\反引号补充 文本\事件\属性\表单指令 动态修改文本样式案例 路飞项目 ''' 1.vue框架 前台html+css+js框架,是不同于js与jq的数据驱动框架 指令 | 实例成员 | vue项目 2.drf框架 django的插件,完成前后台分离项目后台接口编写的框架 序列化组件 | 三大认证组件 | 分页,筛选,过滤,排序 | 请求,解析,响应 3.路飞项目 前台有vue完成,后台由drf完成的前后台分离项目 git | 短信认证 | celery异步任务 | 项目上线 ''' Vue导读 """ vue框架 vue是前台框架：Angular、React、Vue vue：结合其他框架优点、轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用 vue环境：本地导入与cdn导入 """ ​ # vue是js渐进式框架 # 根据开发需求，可以决定vue框架控制项目的具体方位：可以为一个标签，也可以为一个页面，甚至可以为整个项目 实例成员 - 挂载点 """ 1、vue渐进式框架：控制页面及项目的范围 2、vue的环境导入：本地、cdn 3、vue框架的优点：轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、组件化开发、单页面应用 4、vue如何与html页面结构建立关联：挂载点 ""

本文能帮你做什么？ 1、了解vue的双向数据绑定原理以及核心代码模块 2、缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现，本文相关代码主要摘自 vue源码 , 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助< 本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm 相信大家对mvvm双向绑定应该都不陌生了，一言不合上代码，下面先看一个本文最终实现的效果吧，和vue一样的语法，如果还不了解双向绑定，猛戳 Google <div id="mvvm-app"> <input type="text" v-model="word"> <p>{{word}}</p> <button v-on:click="sayHi">change model</button> </div> <script src="./js/observer.js"></script> <script src="./js/watcher.js"></script> <script src="./js/compile.js"></script> <script src="./js/mvvm.js"></script>

本文能帮你做什么？ 1、了解vue的双向数据绑定原理以及核心代码模块 2、缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现，本文相关代码主要摘自 vue源码 , 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助< 本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm 相信大家对mvvm双向绑定应该都不陌生了，一言不合上代码，下面先看一个本文最终实现的效果吧，和vue一样的语法，如果还不了解双向绑定，猛戳 Google <div id="mvvm-app"> <input type="text" v-model="word"> <p>{{word}}</p> <button v-on:click="sayHi">change model</button> </div> <script src="./js/observer.js"></script> <script src="./js/watcher.js"></script> <script src="./js/compile.js"></script> <script src="./js/mvvm.js"></script>

最近在用angularjs做一些东西，由于学艺不精，对angularjs了解不够，导致经常会不小心掉进一些自己挖的坑里(⊙_⊙)，在这里记下来，谨防又踩。 1、angularjs ng-show not working 在页面中用到了pagination 分页插件 <pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-small" boundary-links="true"></pagination> 。就想说总的条目数bigTotalItems为0的时候就不显示插件了，ng-show="!!bigTotalItems"。结果ng-show怎么都不起作用。但是如果直接写ng-show="!!0" 、ng-show="!!80"又是有效的。。。。 然后我又想换一种写法，在controller里面写个方法。 $scope.isShow = function｛ return ！！$scope.bigTotalItems; ｝; <pagination ng-show="isShow()" total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class=

虽然我不是前端程序员，但明白前端做好验证是多么重要。 因为这样后端就可以多喘口气了，而且相比后端什么的果然还是前端可以提高用户的幸福感。 AngularJS提供了很方便的表单验证功能，在此记录一番。 首先从下面这段代码开始 <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate> <p>Email: <input type="email" name="email" ng-model="email" required> <span style="color:red" ng-show="mainForm.email.$dirty && mainForm.email.$invalid"> <span ng-show="mainForm.email.$error.required">Email is required.</span> <span ng-show="mainForm.email.$error.email">Invalid email address.</span> </span> </p> <p> <input type="submit" ng-disabled="mainForm.$invalid"> </p> </form> <script> angular

常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可： <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"： <input type="text" ng-minlength="5" /> 3. 最大长度 验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"： <input type="text" ng-maxlength="20" /> 4. 模式匹配 使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式： <input type="text" ng-pattern="/[a-zA-Z]/" /> 5. 电子邮件 验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可： <input type="email" name="email" ng-model="user.email" /> 6. 数字 验证输入内容是否是数字，将input的类型设置为number： <input type="number" name="age" ng-model="user.age" />

route 路由 在AngularJS里面有两种方式实现路由，第一个是$location,第二个就是route。 在这里,我先介绍route模块. 由于AngularJS是模块化的，我们要引用路由，就需要先将这个包下载下来。 npm install angular-route --save 或者使用bower bower install angular-route --save 之后,在我们的文件引入AngularJS-route.js文件,就可以使用route路由了. 由于route是一个单独的模块,我们想要使用,必须要在自己的模块中添加对ngRoute模块的依赖. var app = angular.module('myApp', ['ngRoute']); 然后,我们需要通过config方法来配置. app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/a', { controller: 'aController', templateUrl: './a.html' }) .when('/b', { controller: 'bController', templateUrl: './b.html' }) .when('/c', { controller: