木的土纪，第4日

2019-07-12（avalon 2 指令）

指令分类

• 插值表达式
• 自定义标签
• 绑定属性 （ms-***或者:***）

插值表达式 {{ }}

<h3 ms-controller="myId">用户信息：{{info}}</h3>
<script>
    var vm = avalon.define({
        $id: "myId",
        info: "this is vm info",
        a:"ms-skip"
    })
</script>

页面输出：用户信息：this is vm info

绑定属性

1. ms-skip 或者 :skip

不对标签内部进行扫描编译

<div ms-skip>{{@a}}</div>            页面输出：{{@a}}
<div>{{@a}}</div>                    页面输出：ms-skip

2. ms-controller

圈定某个VM的作用域范围,作用域范围是当前当前标签元素内，仅限当前标签范围，框架实际处理的是当前元素的outerHTML，支持嵌套

防止首次渲染页面时，未编译导致的乱码问题，可以在标签上定义,通过样式隐藏
<div class="ms-controller" ms-controller="myId"></div>
.ms-controller{
     visibility: hidden;
}

image.png

指令ms

image.png