一、定义

Vue.js 使用基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定到底层的 Vue 实例对象中，

在应用状态改变时， Vue 能够重新渲染DOM元素。

二、操作

1、插值

1）文本

这是最常用的绑定方式，使用{{…}}（双大括号）的文本插值，我们上一章节的HelloWorld显示就是这种方式：

  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>

2）Html

使用 v-html 指令用于输出 html 格式的代码，我们在HelloWorld.vue文件中改成以下代码：

<template>
  <div class="hello">
    <div v-html='msg'></div>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: '<h1>HelloWorld，这个是Html插值方式</h1>'
      }
    }
  }
</script>

3）属性

使用v-bind指令改变class属性的取值：如果class1为true则使用class1样式：
算法简介：

-定义class1新样式；
-定义一个hello的Vue对象并默认设置对象内的use值为false；
-在hello对象内定义一个单选框，绑定到use值：v-model="use"
-在hello对象内通过v-bind:class定义一个class属性插值逻辑；
-通过改变use值来影响class的样式引用。

<style>
  .class1{
    background: #333;
    color: #fff;
  }
</style>
<template>
  <div class="hello">
    <label for="r1">使用class1样式</label>
    <input type="checkbox" v-model="use" id="r1">
    <div v-bind:class="{'class1':use}">
      v-bind指令改变class属性的取值：如果class1为true则使用class1样式；
    </div>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        use: false
      }
    }
  }
</script>

4）表达式

Vue可以在模板语句中使用JavaScript 表达式，在HelloWorld.vu中实现以下代码：

<template>
  <div class="hello">
    {{4*5}}
    <br/>
    {{use?'use是true':'use是false'}}
    <br/>
    {{ msg.split('').reverse().join('') }}
     <br/>
     <div v-bind:id="'id-' + no">可动态此DIV元素的id属性值</div>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        use: false,
        msg:'Hello World 转倒',
        no:0
      }
    }
  }
</script>

运行效果如下：

2、指令

指令是指使用v- 前缀的特殊属性，指令用于执行（or理解为读取）表达式值并应用到 DOM 上：

<template>
  <div class="hello">
    <p v-if="use">如果为true，就显示这句话</p>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        use: true
      }
    }
  }
</script>

指令参数：
-我们上面使用过的 v-bind:class，就是使用v-bind指定对calss属性进行绑定，这个class就是指令的参数（其他参数还设有href等）
修饰符：
-修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，once，只执行一次，如下面代码，只有在第一次点击时会执行，再次点击不会起作用

<for<div v-on:click.once='alert("1")'></div>

3、输入

使用 input 输入框时，我们可以使用 v-model 指令来实现双向数据绑定：

<template>
  <div class="hello">
    <p>{{ msg }}</p>
    <input v-model="msg">
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: '默认内容'
      }
    }
  }
</script>

v-model 指令可以对 input、select、textarea、checkbox、radio 等表单控件元素创建双向数据绑定关系，自动根据表单上的值更新绑定的元素值。

另外，可以使用 v-on 监听按钮事件，下面的代码实现了一个click事件的监听：

<template>
  <div class="hello">
    <p>{{ msg }}</p>
    <button v-on:click="reverseMsg">反转字符内容</button>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: '！！容内些这转发要我'
      }
    },
    methods: {
      reverseMsg: function () {
        this.msg = this.msg.split('').reverse().join('')
      }
    }
  }
</script>

4、过滤器

过滤器场被用作一些常见的文本格式化，使用"管道符"指示的格式，下面的代码将上面的点击事件（反转函数）改成过滤器模式：

<template>
  <div class="hello">
    <p>{{ msg | reverseMsg }}</p>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: '！！容内些这转发要我'
      }
    },
    filters: {
      reverseMsg: function (value) {
        value = value.toString()
        return  value.split('').reverse().join('')
      }
    }
  }
</script>

过滤器可以串联使用：{{ msg| filterA | filterB }}
另外，也可以接收参数：{{ msg| filterA(‘arg1’, arg2) }}

5、缩写

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

//v-bind 缩写: 
<a :href="url"></a>

//v-on 缩写:
<a @click="doSomething"></a>

END.

Vue入门教程02-模板语法