vue2.0---模板语法

***插值

#文本  

    数据绑定最多见的形式就是双大括号的形式：

        <div id="app">{{message}}</div>

    只要绑定的属性message上的值发生变化，插值出的内容都会发生变化

        var app = new Vue({
            el:"#app",
            data:{
                message:'hello Ling!'
            }
         })

#纯HTML

    双大括号会将数据解释为纯文本，而不是HTML 。为了输出真正的 HTML ，就须要使用到 v-html 指令：

    <div id=‘app-2’ v-html="Myhtml"></div>
    var vm = new Vue({
        el:'#app-2',
        data:{
            rawHtml:'<p>这是一个P标签！</p>'
        }
     });

    效果：
    ![](http://images2015.cnblogs.com/blog/1023621/201612/1023621-20161228113215023-460227816.png)

  #属性：

    <button v-bind:id="btn_id" v-bind:disabled="check">点击我</button>

    若是check的值是false，则disabled属性将不会被渲染。以v-开头的是Vue.js的指令，你立刻就能看到如何使用它们。

***表达式

能够在指令及{{}}中使用表达式，事实上，常量或变量的名称就是最简单的表达式。Vue能够经过是否带引号来判断一个表达式是一个变量仍是一个常量字符串。因此在之后的内容里，指令及{{}}中的内容会被成为表达式

   {{message}}
   {{number + 1}}
   {{ok ? 'yes' : 'no'}}
   {{ message.split('').reverse().join('') }}
   <div v-bind:id="'list-' + id"></div>

   这些表达式都被支持，可是{{}}和指令中只支持一个表达式，不支持语句。

***过滤器

{{message | capitalize}}======》Vue.js的内置过滤器，做用是似的message中的值首字母大写。
 另外，你也能够自定义过滤器：
  new Vue({
    //......
    filters:{
        ling:function(value){
                return 'ling is a pretty girl！I want to say:' + value
               }
           }
   })
  过滤器能够串联，也能够接受参数。在接受参数时，第一个参数默认是前面返回的字符串，第二个参数开始是用户传递的参数，注意若是参数是字符串要加引号。如：
          {{message | filterA | filterB('string', somevar)}}

***指令

指令（Directives）是带有 v- 前缀的特殊属性。
    1：循环v-for：

    <div id="app-3">
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
    </div>
    <script>部分：
     var app3 = new Vue({
        el:'#app-3',
        data:{todos:[
            {text:'ling Yan'},
            {text:'zhang San'},
            {text:'li Si'}
            ]
        }
      });
浏览器显示为：

2：v-on：
    <div id="app-4">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">Reverse Message</button>
        <button v-on:click="sliceMessage">sliceMessage</button>
    </div>
    <script>部分：
    var app4 = new Vue({
        el:'#app-4',
        data:{
            message:'Hello Ling Yan!'
        },
        methods:{
            reverseMessage:function(){
                this.message = this.message.split('').reverse().join('')
                },
            sliceMessage:function(){
                this.message = this.message.slice(6);
                }
            }
        });
    浏览器显示为：

3:on-bind：
       <div id="app-2">
            <span v-bind:title="message">
                鼠标滑过几秒钟！
            </span>
        </div>
        <script>部分：
             var app2 = new Vue({
                    el:'#app-2',
                    data:{
                            message:'你在'+new Date()+'加载此页面'
                          }
                })
           浏览器系显示效果：

v-on用于指定事件，而v-bind用于绑定属性，因为它们很是常见，因此Vue.js为它们提供看缩写的形式：
<button :id="idname" @click="say"></button> 
say为事件的触发函数，写在methods属性中。