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

1插值

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

<p> {{message}}</p>

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

<div v-html="message"></div>

属性应使用v-bind指令 

<label for="r1">修改颜色</label><input type="checkbox" v-model="use' id="r1">
<div v-bind:class="'class1': use">
data：{
    use：true
}

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

<div id="app">
{{2+2}}
{{ok? 'yes': 'no'}}
{{message.split('').reverse().join('')}}
<div v-bind：id="‘list-’+id"></div>
</div>
new Vue({
el: '#app',
data: {
    ok: true,
    message: 'hello',
    id:1
    }
})

2指令

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

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

<input type="checkbox" v-if="seen"/>

<div v-model="seen">这是一段话</div>

data: {

seen: true

}

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

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

<div v-href: html="url"></div>

data:{

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

}

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

<div v-on:click="doSomething"></div>

3修饰符

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

<form v-on:submit.prevent="onSubmit"></form>

4用户输入

数据双向绑定

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

<div id="app">
  
  <p>{{ message }}</p>
  
  <input v-model="message">
</div>
  
  <script>new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})</script>
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button></div>
    <script>new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})</script>

5过滤器

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

<!-- 在两个大括号中 -->{{ message | capitalize }}
<!-- 在 v-bind 指令中 --><div v-bind:id="rawId | formatId"></div>

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

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

<div id="app">
  {{ message | capitalize }}</div>
    <script>new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})</script>

过滤器可以串联：

{{ message | filterA | filterB }}

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

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

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

6缩写

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

<!-- 完整语法 --><a v-bind:href="url"></a><!-- 缩写 --><a :href="url"></a>

<!-- 完整语法 --><a v-on:click="doSomething"></a><!-- 缩写 --><a @click="doSomething"></a>

7条件判断

v-if 

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

<div v-if="Math.random() > 0.5">Sorry </div>
    
<div v-else>Not sorry</div>

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

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
data: {
    type: 'C'
  }

v-show

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