Vue.js模板语法

<template>

  <div class="hello">
    <h1>{{ msg }}</h1>
    <!--数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：-->
    <h1>{{ apple }}</h1>

    <div v-html="'Html形式'+message"></div>
<!-- HTML属性中的值应使用 v-bind指令
     如果  data返回的class1为true就使用class1类样式,否则就不使用-->
    <label for="r1">修改颜色</label>
    <input type="checkbox" v-model="class1" id="r1">
    <br/>
    <div v-bind:class="{'class1':class1}">
      directiva v-bind:class
    </div>


    <!-- vue.js提供了完全的JavaScript 表达式支持-->
    {{ 5+5 }}<br>
    {{ ok ? 'YES':'No'}}<br>
    {{ message.split('').reverse().join('')}}
    <div v-bind:id="'list-' +id">菜鸟</div>


    <!--指令 是带有v- 前缀的特殊属性
    指令用于表达式的值改变时,将某些行为应用到DOM上
     v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素
     -->
    <p v-if="seen">调节 data里的 seen属性为false关闭我</p>
    <!--响应式更新html属性-->
    <pre><a v-bind:href="url">Baidu</a></pre>


    <!--双向绑定数据-->
    <p>{{ content }}</p>
    <input v-model="content"/>
    <!--翻转字符串-->
    <p>{{ content}}</p>
    <button v-on:click="reversMessage">反转字符串</button>



  </div>
</template>

<script>
    export default {
      name: "HelloWorld",
      data() {
        return {
          msg: '欢迎来到我的王国!',
          apple: "apple nihao!",
          class1:false,
          message:'noob',
          id :3,
          ok: true,
          seen: true,
          url:'http://www.baidu.com',
          content:'默认值'
        }
      },
      /* 该方法用于反转字符串*/
      methods:{
        reversMessage: function () {
          this.content = this.content.split('').reverse().join('')
        }
        }
    }
</script>

<style>
.class1{
  background: #444;
  color: #eee;
}
</style>