VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)

双向数据绑定

  
  
  
  


  


  
  
{{ message }}
  
   
  
   

v-bind(v-bind:title简化写法为:title)

  
  
  
  


  

  
  
  超链接

设置类名 v-bind:class

  
  
  
  
  


  

  
对象设置类名
  
数组设置类名
  
对象和数组设置类名

隐藏/显示元素，v-if和v-show

  
  
  
  
  


  

  
if
  
  
show
    

v-for

遍历数组

  
  
  
  
  


  
  
  
 元素:{{item}} 索引:{{index}} 
  

遍历对象

  
  
  
  
  


  
  
  
 key-{{key}} value-{{value}} index-{{index}} 
  

v-on:click 点击事件（简化语法@click）

  
  
  
  
  


  
  
  给对象添加内容
  
 key-{{key}} value-{{value}} index-{{index}} 
  

点击按钮之后

组件

私有组件

过滤器

全局过滤器

  
  
  
  
  


  
  
  
 {{ 'ABC' | toLowCase }}

私有过滤器

  
  
  
  
  


  
  
  
 {{ str | lowCase }}

路由

  
  
  
  
  


  
  
  国际新闻
  国际新闻