zoukankan      html  css  js  c++  java
  • 简话Angular 01 初识Angular 数据绑定

    1. Angular有哪些突出优点

      1) MVC 基于Html-Javascript

      2) 依赖注入

      3) 数据双向绑定,响应式页面设计

      4) 模块化,自定义指令

    2. 简话数据绑定

      1) 代码:

    1 <input type="text" ng-model="hello1">
    2 <input type="text" ng-model="hello2">
    3 <textarea ng-bind="hello1" name="" id="" cols="30" rows="10"></textarea>
    4 <span class="bg-danger">{{hello1}} {{hello2}}</span>

       2)解释

       1 定义一个文本框,并用ng-model绑定到变量hello1

       2 定义一个文本框,并用ng-model绑定到变量hello2

            3 定义一个输入文本,并用ng-bind绑定到变量hello1, 就是说hello1是什么值,这里就是什么值

        4 定义区域,显示hello1 和hello2的值,其实就是文本框1,2的值相加

      3) 查看效果: http://jimuyouyou.github.io/angular-bootstrap-rest-seed/examples/angular/1-intro.html

      4) 源代码: https://github.com/jimuyouyou/angular-bootstrap-rest-seed

    3. 小结

      1) Angular的数据绑定ng-model,其实就是定义一个变量,将其绑定到原生html元素

        注意: 这是双向绑定,就是说变量值变了,html显示自动更新; html值变了,变量值自动更新

      2) ng-bind也可绑定变量,是单向绑定,只用于绑定已有变量,相当于引用,不能更新他的值

      3) 变量绑定不需要写一行javascript代码,只是加了ng标签而已

      4) 页面会响应式更新,不需要手动javascript操作dom元素

    嗯: 很强大,必须用好!

    -- 蜗居苏州昆山 自由软件开发者 专注于Javascript全栈开发(Angular.js-Node.js-Meteor.js-Bootstrap) 擅长JavaEE --
  • 相关阅读:
    SQL基础复习03--数据查询SQL语句(单表查询)
    SQL基础复习02--数据操纵SQL语句
    数据结构与算法01--复杂度
    SQL基础复习01--SQL基础与数据定义SQL语句
    Azure Data Studio的初步了解与使用
    ASP.NET Core Web API 使用DynamicLinq实现排序功能
    Vue3-说说Vue 3.0中Treeshaking特性?举例说明一下?
    JavaScript高频手写面试题
    Java常用文件操作-1
    Java 架构师之路(2)
  • 原文地址:https://www.cnblogs.com/meteorcn/p/4657043.html
Copyright © 2011-2022 走看看