vue模板语法及指令

 

模板语法：

以下写法是正确的写法

{{ msg }}

    //一元运算符
    
hello {{`world + '!'`}} 
    //模板字符串
    
{{`hello${world}!`}} 
    //三元运算符
    
{{ true ? 'yes' : 'no' }}
    //字符串操作
    
{{ message.split('').reverse().join('') }}

指令：

v-text

//和下面一样
{{msg}}

v-html

为了输出真正的HTML，你需要使用v-html指令，可以类比js的innerHtml属性：

这个div的内容将会被替换成属性值rawHtml，直接作为html进行渲染。

值得注意的是，在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击。

v-pre

v-pre主要用来跳过这个元素和它的子元素编译过程，可以用来显示原始的标签。

    {{message}}
    {{message}}

第一个span里的内容不会被编译显示为{{message}}，第二个span里面的内容会被编译，显示为hello world。

v-cloak:

使用 vuejs 做了一个简单的功能页面，逻辑是，页面加载后获取当前的经纬度，然后通过 ajax 从后台拉取附近的小区列表。但是 bug 出现了，在显示小区列表之前，会闪现小区名对应的 vuejs 变量名。

案发现场的 HTML 代码

  
{{ item.name }}

页面加载时，会闪现

{{ item.name }}

v-cloak 可以解决这个问题，非常简单

HTML 修改成

  
{{ item.name }}

CSS 中添加

[v-cloak] {
  display: none;
}

v-once：

v-once在日常开发中用的很多，只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。

  插值:
  
{{msg}}
  
v-once:当数据改变时，插值处的内容不会更新
  {{msg}}

v-if

//v-else
yes
no

//v-else-if

    
 
        
loading
    

    

        
success
    

    

        
fail
    

v-show

v-show

v-for 

    

       {{ tab.text }}
    

v-for也可以用在template中

对象遍历属性

为了提高vue更新DOM的性能，你需要为每一项提供一个唯一的key属性，有了相同父元素的子元素必须有独特的key， 重复的key会造成渲染错误。