Vue 教程第二篇—— 模版语法

模版语法

模版语法已成为前端在数据驱动模式上 V 层最好的实现。

插值

  
  

    
文本
    
{{message}}
  

  
  

    
纯 HTML
    

  
        

  
  

    
属性
    
    
  
    

  
  

    
js 表达式
    
{{1 + 1}}
    
{{status ? 'YES' : 'NO'}}
    
{{message.split('').reverse().join('')}}
  
    

var vm = new Vue({
  el: '#app',
  data: {
    message: '我是文本',
    rawHtml: '
我是 h1 标签
',
    src: '../imgs/green.jpg',
    status: true,
  }
})

插值效果预览

缩写

v-bind 缩写

v-on 缩写

  
  Greet
  
  Greet  

指令

指令（Directive），换句话说就是元素的自定义属性，在 Vue 中是以 v- 为前缀的自定义属性，属性值为对象或 js 表达式

指令	类型	用法
v-text	string	` html {{msg}} `
v-html	string	` html `
v-show	boolean	` html `
v-if	boolean	` html `
v-else-if	boolean	` html 1 2 `
v-else	不需要表达式	` html 1 2 2 `
v-for	Array | Object | Number | String	` html {{index}} {{index}} {{value}} {{index}} `
v-on	Function	` html say1 say2 `
v-bind	Object	` html `
v-model	表单元素的值	` html `
v-pre	不需要表达式	` html {{mess}} `
v-cloak	不需要表达式	` html {{mess}} `
v-once	不需要表达式	` html {{mess}} `

指令效果预览

综合案例预览