首页 / JAVASCRIPT / avalon前端项目中使用解析

avalon前端项目中使用解析

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了avalon前端项目中使用解析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9799字，纯文字阅读大概需要14分钟。

内容图文

这次给大家带来avalon前端项目中使用解析，avalon前端项目中使用的注意事项有哪些，下面就是实战案例，一起来看一下。

1 小例子数据循环

avalon前端项目中使用解析 - 文章图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.bootcss.com/avalon.js/2.0s/avalon.js"></script>
</head>
<body>
  <table class="table table-striped table-hover pro-lists">
    <thead>
      <tr>
        <th>序号</th>
        <th>项目名称</th>
        <th>开始时间</th>
        <th>合同金额</th>
        <th>支付金额</th>
        <th>支付比例</th>
      </tr>
    </thead>
    <tbody ms-controller="test">
      <tr ms-for="($index,el) in @data">
        <td>{{$index}}</td>
        <td>{{el.pro_name}}</td>
        <td>{{el.crt_time}}</td>
        <td>{{el.contract_money|number(2)}}</td>
        <td>{{el.pay_money|number(2)}}</td>
        <td ms-if="el.pay_money==0">
          0
        </td>
        <td ms-if="el.pay_money!=0">
          {{el.pay_money / el.contract_money *100|number(2)}}%
        </td>
      </tr>
    </tbody>
  </table>
</body>
<script type="text/javascript">
  vm = avalon.define({
    $id: 'test',
    data: {}
  });
  //这里是请求服务器
  //     $.ajax({
  //         url:'../json/avalon_for.json',
  //         type:'get',
  //         dataType:'json',
  //         success: function (ajax) {
  //             vm.data=ajax.data;
  // //            console.log(vm.data)
  //         }
  //     });
  vm.data = [{
      "pro_name": "沙湖，南湖水环境提升规划方案",
      "crt_time": "2017-10-27",
      "contract_money": "20000",
      "pay_money": "0"
    },
    {
      "pro_name": "保利升官渡项目新建地下车库通道方案论",
      "crt_time": "2017-10-27",
      "contract_money": "6000",
      "pay_money": "555"
    },
    {
      "pro_name": "邬家巷（鹦鹉大道-南城巷）道路排水修建规划",
      "crt_time": "2017-10-28",
      "contract_money": "7777",
      "pay_money": "3333"
    }
  ]
</script>
</html>

2 vm之间可以互相拿值

avalon前端项目中使用解析 - 文章图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/avalon.js/2.0s/avalon.js"></script>
    <title>Document</title>
</head>
<body>
    <p ms-controller="wrap">{{@a}}</p>
    <p ms-controller="wrap2">
        {{@a}}
        <span>{{@b}}</span>
    </p>
</body>
</html>
<script type="text/javascript">
    var vm = avalon.define({
        $id: 'wrap',
        a: '123'
    });
    var def = avalon.define({
        $id: "wrap2",
        a: "大家好",
        b: vm.a   //获取第一个Model里的属性值
    });
</script>

3 内置指令

$id, vm的名字
$watch, 用于添加监听函数
$fire, 用于触发监听函数
$events, 用于储存监听函数
$model, 返回一个纯净的JS对象
$element, 2.0新增, 当我们用ms-controller,ms-important指定一个VM的作用域,对应元素节点会放到这个属性上.
$computed, 2.2.1新增,用来集中定义计算属性

4 计算属性

4.1 get案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body :controller="test">
  <p>{{@fullName}}</p>
</body>
</html>
<script>
  var vm = avalon.define({
      $id: 'test',
      firstName: '司徒',
      lastName: '正美',
      $computed: {
          //fullName依赖于firstName与lastName
          fullName: function(){
              return this.firstName+' '+this.lastName
          },
          //xxx只依赖于firstNaem
          xxx: function(){
              return this.firstName+'!!'
          }
      }
  })
  setTimeout(() => {
    vm.lastName = '西瓜';
  },3000);
  </script>

4.2 set案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body :controller="test">
  <p>{{@firstName}}</p>
  <p>{{@lastName}}</p>
</body>
</html>
<script>
  var vm = avalon.define({
      $id: 'test',
      firstName: '杀猪',
      lastName: '牛刀',
      $computed: {
          //fullName依赖于firstName与lastName
          fullName: {
              get: function(){
                  return this.firstName+' '+this.lastName
              },
              set: function(val){
                  var arr = val.split(' ')
                  this.firstName = arr[0]
                  this.lastName = arr[1]
              }
          }
      }
  })
  setTimeout(() => {
    vm.fullName = "你有 病吧"
  }, 3000);
  </script>

4.3 计算属性模糊搜索案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body>
  <p ms-controller="avalon">
    {{@test1}}
    <table>
        <tr>
            <td>
                <ul>
                    <li ms-for="el in @communities">{{el.community_name}}</li>
                </ul>
            </td>
             <td>
               <wbr ms-widget="{is:'ms-autocomplete', $id: 'aaa', name: 'community_id', communities :@communities}" />
            </td>
        </tr>
    </p>
</p>
<script>
    avalon.component('ms-autocomplete', {
        template: '<p><input type="text" ms-duplex-string="@search" />' +
            '<ul><li ms-for="($idx,opt) in @aaa">' +
            '{{opt.community_name}}</li></ul></p>',
        defaults: {
            search: '',
            communities: [],
            onReady:function(e){
                e.vmodel.$watch('search', function(v){
                    avalon.log('current search word is '+ v)
                })
            },
            $computed: {
                aaa: {
                    get: function() {
                        var ret = [];
                        for (var i = 0; i < this.communities.length; i++) {
                            if ((this.communities[i].community_name.indexOf(this.search) > -1)) {
                                ret[ret.length] = this.communities[i];
                                if(ret.length === 5){
                                    break
                                }
                            }
                        }
                        return ret;
                    }
                }
            }
        }
    });
    communities = [{
        community_id: 3,
        community_name: 'This',
    }, {
        community_id: 5,
        community_name: 'isnot',
    }, {
        community_id: 8,
        community_name: 'agood',
    }, {
        community_id: 10,
        community_name: 'example',
    }, {
        community_id: 22,
        community_name: 'for',
    }, {
        community_id: 23,
        community_name: 'such',
    }, {
        community_id: 43,
        community_name: 'test',
    }, {
        community_id: 45,
        community_name: 'thank',
    }, {
        community_id: 47,
        community_name: 'you',
    }, {
        community_id: 50,
        community_name: 'verymuch',
    }, {
        community_id: 51,
        community_name: 'youre',
    }, {
        community_id: 53,
        community_name: 'welcome',
    }, {
        community_id: 54,
        community_name: 'too',
    }, {
        community_id: 55,
        community_name: 'notsogood',
    }, {
        community_id: 56,
        community_name: 'cheerful',
    }];
    var vm = avalon.define({
        $id: 'avalon',
        test1: 'test1',
        communities: communities,
    });
</script>
</body>
</html>

5 对象data里放数据学vue,不过vue方便得多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body :controller="test">
  <p>{{@data.firstName}}</p>
  <p>{{@data.lastName}}</p>
</body>
</html>
<script>
  var vm = avalon.define({
      $id: 'test',
      data:{
        firstName: '杀猪',
        lastName:'牛刀',
      },
      methods:{
          
      }
      
  })
  setTimeout(() => {
    vm.data.firstName = '哈哈'
  }, 3000);
  </script>

6 操作数组方法

pushArray(el), 要求传入一数组，然后将它里面的元素全部添加到当前数组的末端。
remove(el), 要求传入一元素，通过全等于比较进行移除。
removeAt(index), 要求传入一数字，会移除对应位置的元素。
removeAll(arrayOrFunction), 有三种用法，如果是一个函数，则过滤比较后得到真值的元素，
如果是一数组，则将此数组中与原数组相等于的元素全部移除；如果没有任何参数，则全部清空。
clear()，相当于removeAll()的第三种方法，清空数组的所有元素。由于需要同步视图的缘故，不能通过vm.array.length
= 0的方法来清空元素。
ensure(el)，只有当数组不存在此元素时，才添加此元素。
set(index, el)，用于更新某一索引位置中的元素，因为简单数组元素的数组，是不会转换它的元素
toJSON()，用于取得数组的$model, 2.2.2新添加的方法

6.1操作数组例子pushArray（不重复添加）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body :controller="test">
</body>
<script>
    var vm = avalon.define({
        $id: 'xxx',
        array: [1, 2, 3]
    })
    vm.array.push(4, 5, 6)
    vm.array.pushArray([4, 5, 6]) //这个比push方法好用
    vm.array.clear()
    vm.array.ensure(3) //[3]
    vm.array.ensure(3) //[3]
    console.log(vm.array);
    vm.array.ensure(4) //[3,4]
    console.log(vm.array);
</script>
</html>

6.2 remove()数组操作例子删

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body ms-controller="test">
    <p ms-for="el in @arr">
        {{el}}<button type="button" ms-click="@arr.remove(el)">点我删除该行</button>
    </p>
    <script>
    avalon.define({
        $id: 'test',
        arr: [1,2,3,4,5,6]
    })
    </script>
</body>
</html>

7 if显示隐藏包括站位隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body :controller="test">
  <script>
  var vm = avalon.define({
    $id: "test",
    aaa: "这是被隐藏的内容",
    toggle: false
  })
  </script>
  <p><button type="button" :click='@toggle = !@toggle'>点我</span></button></p>
  <p :if="@toggle">{{@aaa}}</p>
  <p :visible="@toggle">{{@aaa}}</p>
  </body>
</html>

9 arr和obj的for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/avalon2@2.2.8/dist/avalon.js"></script>
    <title>Document</title>
</head>
<body :controller="test">
  <ul>
    <li :for="el in @data.array">{{el}}</li>
  </ul>
  <ul>
    <li :for="(key,val) in @data.obj">{{key}}--{{val}}</li>
  </ul>
</body>
</html>
<script>
  var vm = avalon.define({
    $id: "test",
    data:{
      array:[1,2,3,4],
      obj:{a:1,b:2,c:3}
    }
  })
  </script>

10 事件

animationend、
blur、focus change、input、
click 、 dblclick、、 keydown、 keypress、keyup、
mousedown、 mouseenter、 mouseleave、 mousemove、 mouseout、
mouseover、 mouseup、 scroll、 submit

简写 :click-1="@fn(el)" :click-2="@fn(el)"

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的avalon前端项目中使用解析全部内容，希望文章能够帮你解决avalon前端项目中使用解析所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/289655.html

来源：【匿名】

【上一篇】js的数组原型方法使用详解【下一篇】javascript 怎么调用php方法

更多 ►

【avalon前端项目中使用解析】教程文章相关的互联网学习教程文章

VBA中使用JavaScript脚本语言解析JSON数据【代码】【图】

JSON：JavaScript 对象表示法（JavaScript Object Notation）和xml相似，都是文本形式（保存在文本文件中或字符串等形式），比如：jsstr = {"系别":"历史系","班级":"一班","学员":[{"姓名":"张三","年龄":25,"性别":"男"},{"姓名":"李四","年龄":20,"性别":"男"},{"姓名":"小明","年龄":20,"性别":"女"}]}1、{}表示对象,[]表示数组，数组的成员可以是对象，使用“属性:值”键值对形式表示属性。本例中jsstr对象有三个属性：系...

javascript事件代理(delegate)原理解析【代码】【图】

什么是事件代理？首先得知道什么是事件，并且弄清楚事件流，才能真正明白事件代理原理。一、什么是事件？　　javascript与HTML之间交互就是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。如onload、onclick、onmouseup、onmousedown... 。二、事件流　　DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，...

JavaScript 数组遍历动态增长问题（V8源码解析）【代码】【图】

数组 arr 在遍历同时动态增长会发生什么呢let arr = [1,2] arr.forEach(item => arr.push(...arr)) console.log(arr) // 输出: [ 1, 2, 1, 2, 1, 2, 1, 2 ] 并未输出 [1,2] 或 [1,2,1,2...] 无限循环下去JavaScript引擎:V8源码git地址：https://github.com/v8/v8vscode打开源码文件夹V8-MASTER/src/builtins-collections-gen.cc数组的循环遍历由 Goto 与 BIND 搭配完成，Goto(adress) 指跳转的目标adress , BIND(adress) 指对应...

【JavaScript】新浪微博ajax请求后改变地址栏url，但页面不跳转的方案解析

新浪微博当你弹出一个视频的时候再点下一页时，原视频还在，而且地址栏的url的页数变了。对于这种网上讨论最多的方案有以下几种：一、通过锚点Hash实现在这方面其实国内很早就有做了，比如淘宝画报，通过的是在地址栏后面加#锚点实现的，浏览器是可以识别锚点为单位的历史记录的。但不是说页面本身有这个锚点，锚点的Hash只是起到一个引导浏览器将这次的记录推入历史记录栈顶的作用。二、通过HTML5加强型的History对象实现(类Pjax)...

原生JavaScript，递归解析树状结构数据【代码】

// titleJson 为需要循环的数据，第二个参数是页面id 　　　　 generate(titleJson,document.getElementById(‘container‘));//这里生成DOM 递归树状格式function generate(titleJson,par){for(var attr in titleJson) {var ele=document.createElement(‘li‘);ele.innerHTML=`<span><span class="switch-close expansionofCa"></span><a class="locationcontent close-panel" style="font-size:.75rem;color:#fff;" id=...

javascript预解析详解

1、定义预解析:在当前作用域下，js运行之前，会把带有var和function关键字声明的变量先声明，并在内存中安排好。然后从上至下解析js语句。而且function的声明优先于var声明。2、var声明通过var声明的变量，进行预解析的时候：先声明变量，不管变量有没有赋值，声明时都赋值为undefined。console.log(a); //undefinedvar a = 1;console.log(b); //undefinedvar b = function(){}12345注意: (1)同名的var声明和同名的函数声明，不管二...

Javascript闭包深入解析及实现方法【代码】【图】

1、什么是闭包闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。简单的说，Javascript允许使用内部函数—即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中...

Javascript创建对象几种方法解析【代码】

Javascript创建对象几种方法解析Javascript面向对象编程一直是面试中的重点，将自己的理解整理如下，主要参考《Javascript高级程序设计第三版》，欢迎批评指正。通过字面量形式，创建对象: var person_1 = {name: "userName",age: 20}工厂模式创建对象通过一个构造函数接收参数的方式构造对象，可无数次调用这个函数，通过改变参数构造不同的对象 function createPerson(name,age){var o = new Object();//创建...

JavaScript（2）——网页解析过程【代码】【图】

JavaScript 网页解析过程前端编程工具：Visual Studio Code快捷语法：Emmett语法正题：　　当我们在浏览器输入网址的时候，从服务器下载网页；这个文字经过HTML解析器的处理生成一大堆对象，因此打开一个网页的时候会占用很大的内存。网页最终变成一副图片。网页解析成对象后，这些对象会被HTML渲染器（Rander）监视，然后把他们绘制成一张张图片；它会根据W3C去绘制，例如把button绘制成按钮，那么必须就绘制成按钮，绘制成怎样的...

D3.js以及通用JS（JavaScript）读取并解析服务器端JSON的注意事项

这个需求其实挺明确的，但是网上搜出来的教程都乱七八糟，觉得实在需要自己总结一下。 D3.js目前已经被广泛使用在数据可视化领域，随着大数据的持续发展，这个框架估计会在今后更加流行（据说其作者Mike Bostock开始全职开发了，之前是负责纽约时报数据可视化的工程师，他本人也从纽约搬家到了旧金山……）。按照这里的介绍：https://github.com/mbostock/d3/wiki/API-Reference，D3.js实际上有专门读取JSON数据的API，所以其实D3....

[JavaScript]作用域和预解析

作用域全局作用域：当浏览器关闭时才会销毁，较占资源。　　1. 指单独的js文件。　　2. 在函数内部没有声明直接赋值的变量，在函数执行后，也是全局变量。局部作用域：程序（代码块）执行完毕就会销毁。　　1. 一般指函数体内声明的。　　2. 函数的形参。*ES6新增：块级作用域:　　{ } if( ){ }　　　　　　for( ){ } 作用域链只要是代码，就至少有一个作用域。如果函数中还有函数，那么在这个作...

<JavaScript语言精粹>JSON解析器源码阅读【代码】

1// 这是一个用JavaScript编写JSON解析器的实现方案： 2var jsonParser = (function() {3// 这是一个能把JSON文本解析成JavaScript数据结构的函数。 4// 它是一个简单的递归降序解析器。 5// 我们在另一个函数中定义此函数，以避免创建全局变量。 6 7var at, // 当前字符索引 8 ch, // 当前字符 9 escapee = {10 ‘"‘: ‘"‘,11 "\\": "\\",12 "/": "/",13 b: "b",14 f: "\f",15 ...

原生JavaScript实现对象的混合与克隆效果，带完整版解析代码[helpers.js]【代码】

前言：????????本人纯小白一个，有很多地方理解的没有各位大牛那么透彻，如有错误，请各位大牛指出斧正！小生感激不尽。????????本篇文章为您分析一下原生JS的混合与克隆对象混合页面中如下需求var obj1 = {x: 1,y: "a" }var obj2 = {x: "b",o: 6 }<div style="background-color: rgba(0,255,255,0.5)";>页面上有两个对象我们要把这两个对象混合成一个形成如下结构：

浏览器解析JavaScript原理（1）【代码】

特点: 　　　　1、跨平台　　　　2、弱类型：JavaScript 定义的时候不需要定义数据类型,数据类型是根据变量值来确定的　　　　　　强类型：定义变量的时候需要定义变量的类型：例如java,C#中的int a = 10 boolean a = true，直接确定了数据类型　　　　3、解释执行，逐行执行　　　　　　JavaScript 执行过程 1、语法检测看你有没有基本的语法错误,例如中文,关键字错误　　　　　　　　　　　　　　　...

javascript各种模式解析【代码】

1、工厂模式；工厂模式是软件工程领域一种广为人知的设计模式，这种模式抽象了创建具体对象的过程（后面还将讨论其他设计模式及其在JavaScript 中的实现）。考虑到在ECMAScript 中无法创建类，开发人员就发明了一种函数，用函数来封装以特定接口创建对象的细节，如下面的例子所示。function createPerson(name, age, job) {var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function() {alert(this.name)}...

首页 / JAVASCRIPT / avalon前端项目中使用解析

avalon前端项目中使用解析

内容导读

内容图文

1 小例子数据循环

2 vm之间可以互相拿值

3 内置指令

4 计算属性

4.1 get案例

4.2 set案例

4.3 计算属性模糊搜索案例

5 对象data里放数据学vue,不过vue方便得多

6 操作数组方法

6.1操作数组例子pushArray（不重复添加）

6.2 remove()数组操作例子删

7 if显示隐藏包括站位隐藏

9 arr和obj的for循环

10 事件

内容总结

内容备注

内容手机端

【avalon前端项目中使用解析】教程文章相关的互联网学习教程文章

项目 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程