Vue -- 模板语法

Vue 模板语法

1.vue 和大多数后台语言，甚至是和art-template 这种前端模板库一样，都有一套，特定的语法来把数据渲染在html上。

Mustache -- 大胡子语法

1.大胡子的语法格式双大括号'{{}}',用在html标签之间，不能写在标签属性中
2.大胡子语法中可以使用js表达式，但只限于Vue实例作用域的和Vue沙盒白名单，白名单规定的一些全局变量例如Math和FDate。
3.表达式一些基本表达式，和一些三元运算例如：
'{{num + 1}}'、'{{status ? 'succeed' : 'failed'}}'
'{{changeTime()}}'、'{value.replace(/,/g,"")}'
4.但不支持流控制例如:'{{ if (ok) { return message } }}'

大胡子语法案例

    
    
    
    


    

        
{{msg}}
        
        
    
    

v-text -- 模板渲染

1.v-text 能展示对应data中数据内容，也能在数据基础上做运算
2.v-text 会吧标,签中的内容替换

v-text -- 使用案例

    
    
    
    


    

        

        
        
我被覆盖掉了
        
        

    
    

• 展示效果

  
  
  

  image.png

v-html -- html标签渲染

1.将标签语义化展示在页面上
2.容易产生xss攻击，请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
3.如何防止xss攻击:
3.1 前端过滤
3.2 后台转义(< > < >)
3.3 给cookie 加上属性 http例如:
click

v-html 案例

三种将数据渲染到页面的方法总结

1.虽然上面三种方法都可以将数据渲染到页面上，但是工作中我最常用的是'{{}}'
2.'{{}}' 最被常用但是在加载的时候会出现闪烁问题(指令篇章v-cloak会讲解解决方法)，无法将html格式数据渲染，只能当字符串展示
3.'v-text' 虽然没有数据加载闪烁问题，但是会将标签中间的数据覆盖，也不能渲染html格式数据。
4.'v-html' 谨慎使用会出现xss攻击的风险