Vue.js笔记第一章——模板语法

1插值

使用双大括号的文本插值：

 {{message}}

利用v-html指令输出html代码 ：

属性应使用v-bind指令 

修改颜色

data：{
    use：true
}

表达式 Vue.js支持了完整的Javascript语法，函数也可以返回值。

{{2+2}}
{{ok? 'yes': 'no'}}
{{message.split('').reverse().join('')}}


new Vue({
el: '#app',
data: {
    ok: true,
    message: 'hello',
    id:1
    }
})

2指令

指令是带有v-前缀的特殊属性。用于在表达式的值改变时，将某些行为应用于DOM上。最常见的就是v-bind和v-on指令。

v-if实例很好地表现了这一点。

这是一段话

data: {

seen: true

}

参数 在指令后以冒号来指明。

例如，v-bind指令来响应地更新html里的内容，html是参数,告知v-bind指令将该元素的href属性与url的值绑定。

data:{

url: 'http://www.runoob.com'

}

另一个例子是v-on指令 用于监听DOM事件。

3修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

4用户输入

数据双向绑定

v-model指令可用于和checkbox,radio，input,select,textarea来创建双向数据绑定。根据绑定的值，自动更新绑定的元素的值。

  
  
{{ message }}
  
  

  
  

    
{{ message }}
    反转字符串
    

5过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

{{ message | capitalize }}

过滤器函数接受表达式的值作为第一个参数。

以下实例对输入的字符串第一个字母转为大写，其中capitalize是对message起作用的函数方法

  {{ message | capitalize }}
    

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 Javascript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

6缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

7条件判断

v-if 

v-else:可以用 v-else 指令给 v-if 添加一个 "else" 块：

 0.5">Sorry 
    
Not sorry

v-else-if：用作 v-if 的 else-if 块。可以链式的多次使用：

A
B
C
Not A/B/C
data: {
    type: 'C'
  }

我们也可以使用 v-show 指令来根据条件展示元素。