vue模板语法

祭出demo

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

插值

• 文本 {{msg}}

            Message:{{msg}}



            

            这个将不会改变: {{ msg }}

• 原始html v-html

            
Using mustaches: {{ rawHtml }}
            
Using v-html directive: 
            

注意：
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值

• 特性

            


            
            Button

• 使用JavaScript 表达式

            

                first line:{{ number + 1 }}
                
 second line:{{ ok ? 'YES' : 'NO' }}
                
 third line: {{ message.split('').reverse().join('') }}
                

                

            

            
            

                时间：{{Date().toLocaleString()}}
                最大值函数：{{Math.max(10,20)}}
            

指令

• 参数

             
现在你看到我了


            你可以去百度
            

            你可以去百度
            

            点击可以调用doSomething函数
            

            点击可以调用doSomething函数

祭出demo

参考：
vue.js模板语法

更新时间: 2018-07-18