数据绑定

使用 n-html(不过滤特殊字符) 或 {{}} 把数据绑定到DOM结点上

双花括号会将数据解释为普通文本，而非 HTML 代码；为了输出真正的 HTML，需要使用 n-html 指令


        

          
          {{99 + 99}}
{{99 + 99}}

过滤器

strLen为内置过滤器：展示前N个字符，true表示追加“...”省略号

通过配置filters选项，添加自定义过滤器


        

          {{msg | strLen(10, true)}}
          {{dt | dateFormat}}
{{msg | strLen(10, true)}} {{dt | dateFormat}}

条件和循环

n-if n-for 分别控制条件 和 循环


        

          {{index}}->{{item}}，
{{index}}->{{item}}，

表单输入

n-model 完成表单 和 数据的 双向绑定


          

            

              单行文本框：
              
              {{message}}
            

            

              多行文本域：
              
              {{mulText}}
            

            

              单选按钮：
              男 女
              {{sex}}
            

            

              复选框（单个，绑定 boolean）
              同意条款：
              {{agree}}
            

            

              复选框（多个，绑定到数组）
              爱好：篮球足球保龄球
              {{hobby}}
            

            

              选择框（单个）
              故乡：
              {{hometown}}
            

            

              选择框（多个）
              邮件抄送：
              
              {{cc}}
单行文本框： {{message}}
多行文本域： {{mulText}}
单选按钮： 男 女 {{sex}}
复选框（单个，绑定 boolean） 同意条款： {{agree}}
复选框（多个，绑定到数组） 爱好：篮球足球保龄球 {{hobby}}
选择框（单个） 故乡： {{hometown}}
选择框（多个） 邮件抄送： {{cc}}

计算属性

通过配置computed选项，添加计算属性


        

          {{reversedMsg}}
{{reversedMsg}}

绑定事件

n-on 指令绑定 DOM 事件，并触发相应的事件函数


        

          

            
            {{num}}
          

          

            
            
            
            您选择了：{{color}}

{{num}}

您选择了：{{color}}

监视数据

调用实例上的watch方法，监视数据变化，在回调函数中通知


        

          
          {{num}}
          {{num2}}
{{num}}

钩子函数

实例生成后，会调用钩子函数---created，可以在里面执行模块的初始化业务逻辑

改变样式类

切换样式类，在日常的开发中可能使用比较多的，通过 :class={...}形式绑定到数据上

设置DOM属性

给一张图片，分别设置src、title和alt属性


        

            
            
            

              大小：
              
              
              
            

            

              颜色：
大小：
颜色：