avalon视频学习笔记（六）

最新推荐文章于 2024-10-09 00:58:21 发布
最新推荐文章于 2024-10-09 00:58:21 发布
阅读量120 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Zjingwen/p/4456489.html
版权
一、数据缓存
    1、绑定属性ms-data-*
         avalon的数据缓存功能与jquery的data()类似，但不同于jquery的是：avalon是直接将数据保存在元素节点上的data-*属性上。
         在从data-*属性还原数据时，它会作简单的数据转换，再返回。
         在ms-data绑定属性中，对象与数组是直接保存在元素节点上。 
 
   
  1.  <head>
  2.  <meta charset="UTF-8">
  3.  <meta name="Generator" content="EditPlus®">
  4.  <meta name="Author" content="">
  5.  <meta name="Keywords" content="">
  6.  <meta name="Description" content="">
  7.  <title>avalon-ms-data-*</title>
  8.  <script type="text/javascript" src="../avalon.min.js"></script>
  9.  <script type="text/javascript">
  10.  avalon.ready(function(){
  11.  avalon.define({
  12.  $id:'text',
  13.  number1:111,
  14.  number2:NaN,
  15.  bool:false,
  16.  bool2:true,
  17.  nn:null,
  18.  vv:undefined,
  19.  array:[1,2,3],
  20.  date:new Date,
  21.  object:{
  22.  name:"这是数据"
  23.  },
  24.  show:function(){
  25.  var elem = avalon(this);
  26.  console.log(
  27.  elem.data("number1"),elem.data("number2"),
  28.  elem.data("bool"),elem.data("bool2"),
  29.  elem.data("null"),elem.data("void"),
  30.  elem.data("fn"),this["data-array"],
  31.  this["data-date"],this["data-object"]
  32.  );
  33.  alert(123)
  35.  }
  36.  });
  37.  avalon.scan();
  38.  })
  39.  </script>
  40.  </head>
  41.  <body ms-controller="text">
  42.  <div ms-data-number="number1"
  43.  ms-data-number2="number2"
  44.  ms-data-bool="bool"
  45.  ms-data-bool2="bool2"
  46.  ms-data-void="vv"
  47.  ms-data-null="nn"
  48.  ms-data-array="array"
  49.  ms-data-date="date"
  50.  ms-data-object="object"
  51.  ms-data-fn="show"
  52.  ms-click="show"
  53.  >点我
  54.  </div>
  55.  </body>
 
  
 
  
 
   
 
  
 
 
 
 
 
 
 
  
 
 
 
 

 

转载于:https://www.cnblogs.com/Zjingwen/p/4456489.html

                

        

        




    

  


    

      

        

            

              
                
                  Lee_Lei0213
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
avalon的使用与总结

				
			

			

				

					了解—学习—进步—满足
				

				

					05-14
					
					1163
					
				

			

		

		

			
				
avalon是前端MVVM框架，将所有前端代码彻底分成两部分，视图的处理通过绑定实现（angular有个更炫酷的名词叫指令），业务逻辑则集中在一个个叫VM的对象中处理。我们只要操作VM的数据，它就自然而然地神奇地同步到视图。

作用域绑定
ms-controller：
<div ms-controller="AAA"></div>:对应avalon.define({$id=AAA});要加上avalon.scan();才能显示.

ms-controller：可向上一级的html寻找

			
		

	



                

              
                



	

		

			

				
					
avalon绑定属性总结

				
			

			

				

					chihui6877的博客
				

				

					06-23
					
					461
					
				

			

		

		

			
				
$model(所有非$属性),$event(事件对象) 
1、作用域圈定 
ms-controller：按着就近原则自下而上扫描DOM树 
ms-important：仅扫描本节点及之下作为扫描区 
ms-skip：使绑定失效 
2、ms-duplex双向绑定属性：除了绑定（VM同步数据到V）数...

			
		

	



                


  
              

                


	

		

			

				
					
avalon视频学习笔记（一）

				
			

			

				

					Lee_Lei0213的博客
				

				

					04-25
					
					145
					
				

			

		

		

			
				
一、禁用加载器  方法一：在js文件中书写avalon.config({ loader: false})  方法二：在avalon源文件中添加avalon.config({ loader: false})  方法三：在源文件中删除amd加载器二、作用域绑定含义：作用域范围圈定，在一个页面中需要形成多个模块，每个模块需要实现不同功能。  1、ms-controller 可以...

			
		

	





	

		

			

				
					
avalon视频学习笔记（二）

				
			

			

				

					Lee_Lei0213的博客
				

				

					04-25
					
					115
					
				

			

		

		

			
				
一、数据填充含义：将数据打印到页面上，通过绑定属性，将页面变成动态模版  1、插值表达式 {{prop}}，{{prop | html}}定界符及自动配置   含义：{{prop}}是对某一文本节点的nodeValue进行修改，因此不会影响兄弟节点，{{prop}}只是表示这个地方可以被替换，在avalon中，它只在文本节点中有效，它不能替换属性节点里的名字，特性节点的名字...

			
		

	



		

			
		



	

		

			

				
					
avalon视频学习笔记（七）

				
			

			

				

					Lee_Lei0213的博客
				

				

					04-25
					
					137
					
				

			

		

		

			
				
一、属性操作  DOM操作之属性操作：   1、类名操作<div class="active">  ms-class    （1）ms-class     a、ms-class="active" 默认写法，为元素添加active样式     b、ms-class="active:isOk" ...

			
		

	





	

		

			

				
					
avalon视频学习笔记（三）

				
			

			

				

					Lee_Lei0213的博客
				

				

					04-25
					
					126
					
				

			

		

		

			
				
一、双向同步，双向绑定ms-duplex  含义：ms-duplex实现了双向数据绑定。双向绑定通俗说，除了负责将ViewModel中的应的值放到表单元素的value中，还对表单元素偷偷绑定一些事情，用于监听用户的输入从而自动刷新ViewModel。  使用场景一：   当元素为text、password、textaera时，要求prop为一个字符串，当我们改动它的内容...

			
		

	





	

		

			

				
					
avalon视频学习笔记（五）

				
			

			

				

					Lee_Lei0213的博客
				

				

					04-25
					
					116
					
				

			

		

		

			
				
一、插入移除处理  1、绑定属性ms-if  a、当ms-if的值为真（true）时，就将元素输出到页面里面。<div ms-controller="text"> <div ms-if="true">   根据条件显示内容 </div></div><div avalonctrl="test"> <div&g...

			
		

	





	

		

			

				
					
avalon视频学习笔记（四）

				
			

			

				

					Lee_Lei0213的博客
				

				

					04-25
					
					129
					
				

			

		

		

			
				
二、显示隐藏处理  含义：效果类似于jquery的toggle，如果它后面跟着的表达式为真值时则显示它所在的元素，为假值时则隐藏。 <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="...

			
		

	





	

		

			

				
					
avalon1.5学习笔记

				
			

			

				

					天地人和
				

				

					06-21
					
					576
					
				

			

		

		

			
				
html 页面绑定事件，
avalon所有绑定(或叫指令),根据其作用次数与方向,分为三类:单次, 单向, 双向.

			
		

	





	

		

			

				
					
Java各类日志组件分析汇总(1)

				
			

			

				

					D1561691的博客
				

				

					05-04
					
					649
					
				

			

		

		

			
				
▐自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

			
		

	





	

		

			

				
					
前端网站资源精编！！

				
			

			

				

					qianduan666a的博客
				

				

					07-16
					
					9256
					
				

			

		

		

			
				
前端网站资源精编！！



目录:

1-------- 走进前端
2-------- jQuery
3-------- CSS
4-------- Angularjs
5-------- ES6
6-------- React
7-------- 移动端API
8-------- avalon
9-------- Requriejs
10-------- vue
11-------- Seajs
12-------- Less,sass
13-------- Markdown
14-------- D3


			
		

	





	

		

			

				
					
【备战秋招】30道Spring IOC经典面试题，阿里云java面试题

				
			

			

				

					m0_64867802的博客
				

				

					12-05
					
					209
					
				

			

		

		

			
				
19. Spring 提供的注解有哪些？


20. 简述 Spring Environment ？


21. Environment 完整的生命周期是怎样的？


22. Spring 应用上下文的生命周期？


23. Spring 应用上下文生命周期有哪些阶段？


24. 简述 ObjectFactory？


25. 简述 FactoryBean？


26. ObjectFactory、FactoryBean 和 BeanFactory 的区别？


27. @Bean 的处理流程是怎样的..

			
		

	





	

		

			

				
					
ArchLinux安装配置及美化

				
			

			

				

					qq_29930779的博客
				

				

					04-16
					
					6701
					
				

			

		

		

			
				
官方wiki：https://wiki.archlinux.org/

基础安装
一：制作安装介质
下载ISO镜像文件：
https://archlinux.org/download/                   # 官方下载网址


在linux系统中可以用pgp验证系统签名：

gpg --keyserver-options auto-key-retrieve --verify archlinux-version-x86_64.iso.sig

制作安装介质：

方法一（Linux）： 在Li.

			
		

	





	

		

			

				
					
解释器、预处理、main函数

				
			

			

				

					编程语言技巧经验分享
				

				

					10-07
					
					1227
					
				

			

		

		

			
				
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。

			
		

	





	

		

			

				
					
Vue--Table的Column格式化方案

				
			

			

				

					m0_69435612的博客
				

				

					10-04
					
					265
					
				

			

		

		

			
				
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。

			
		

	





	

		

			

				
					
Vue根实例、实例总结

				
			

			

				

					m0_54007573的博客
				

				

					10-04
					
					617
					
				

			

		

		

			
				
Vue根实例、实例总结

			
		

	





	

		

			

				
					
vue-live2d看板娘集成方案设计使用教程

				
			

			

				

					每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
				

				

					10-05
					
					1454
					
				

			

		

		

			
				
vue-live2d看板娘集成方案设计使用教程

			
		

	





	

		

			

				
					
javascript中==和===有什么不同

					
最新发布

				
			

			

				

					qq_48763502的博客
				

				

					10-09
					
					272
					
				

			

		

		

			
				
这个运算符用于比较两个值是否相等，但会在必要时进行类型转换。当两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值