(Vue)vue模板语法

　　Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

插值

　　数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

         <script src="js/vue.js"></script>

     </head>

     <body>

         <div id="box">

             {{message}}

             </div>

         <script>

             //vue实例化

             //el 绑定html对象，选择器

             //data:绑定html对象数据，双向绑定。可以用v-model

             var vm = new Vue({

                 el:"#box",

                 data:{

                     message:"hello,vue"

                 }

             });

         </script>

     </body>

 </html>

HTML

　　使用v-html绑定html代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/vue.js" ></script>

    </head>

    <body>

        <div id="box" v-html="message">

        </div>

        <script>

            new Vue({

                el:"#box",

                data:{

                    message:"<p>我的家</p>"

                }

            })

        </script>

    </body>

</html>

属性

　　html属性中的值使用 v-bind指令。比如v-bind:class,v-bind:style等。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script src="js/vue.js"></script>

         <style>

             .myclass{

                 background: green;

             }

         </style>

     </head>

     <body>

         <div id="box">

             <input type="checkbox" v-model="activeClass" id="mcheckbox" /><label for="mcheckbox">改变颜色</label>

             <input type="checkbox" v-model="activeStyle" id="stylecheckbox" /><label for="stylecheckbox">改变字体大小</label>

             <div v-bind:class="activeClass?'myclass':''" v-bind:style="activeStyle?'font-size:20px':''">请看颜色的变化</div>

         </div>

         <script>

             new Vue({

                 el:"#box",

                 data:{

                     activeClass:false,

                     activeStyle:false

                 }

             })

         </script>

     </body>

 </html>

　　上面的代码，我们通过v-bind:class和v-bind:style为元素绑定了style和class。并在v-bind中使用了表达式。当activeClass和activeStyle为true的时候，div的class和style都将发生改变。

参数

　　参数在指数后，用冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

 <div id="box">

             <input type="checkbox" v-model="activeClass" id="mcheckbox" /><label for="mcheckbox">改变颜色</label>

             <input type="checkbox" v-model="activeStyle" id="stylecheckbox" /><label for="stylecheckbox">改变字体大小</label>

             <div v-bind:class="activeClass?'myclass':''" v-bind:style="activeStyle?'font-size:20px':''">请看颜色的变化</div>

             <pre><a v-bind:href="url">百度</a></pre>

         </div>

         <script>

             new Vue({

                 el:"#box",

                 data:{

                     activeClass:false,

                     activeStyle:false,

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

                 }

             })

         </script>

　　上面的代码就是通过v-bind:href，绑定了href属性。

事件绑定

　　通过使用v-on:参数，可以绑定事件。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script type="text/javascript" src="js/vue.js" ></script>

     </head>

     <body>

         <div id="box">

             {{message}}

             <!--

                 作者：offline

                 时间：2018-08-28

                 描述：v-on:click，点击事件

             -->

             <button v-on:click="reverseMessage">反转字符串</button>

             <!--

                 作者：offline

                 时间：2018-08-28

                 描述：v-on:mouseover,鼠标进入事件，v-on:mouseout，鼠标移出事件

             -->

             <button v-on:mouseover="overColor" v-on:mouseout="outColor" v-bind:style="color">鼠标经过</button>

         </div>

         <script>

             new Vue({

                 el:"#box",

                 data:{

                     message:"hello,vue",

                     color:'color:blue;'

                 },

                 methods:{

                     reverseMessage:function(){

                         this.message=this.message.split('').reverse().join('');

                     },

                     overColor:function(){

                         this.color="color:green";

                     },

                     outColor:function(){

                         this.color="color:blue";

                     }

                 }

             })

         </script>

     </body>

 </html>

　　上面的代码，通过v-on:click,绑定了click事件。vue中的methods可以定义方法。v-on:mouseover和v-on:mouseout监听了鼠标移入和移出事件。鼠标移入的时候，style的color为green，鼠标移出的时，style的color颜色为blue。

格式化

　　通过vue的filters属性，能够格式化data属性。下面的代码展示了时间格式化。通过在filters中定义一方法，该方法对属性进行格式化操作，并返回。使用格式化的时候，{{message|format|format2}}。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script type="text/javascript" src="js/vue.js" ></script>

     </head>

     <body>

         <div id="box">

             <!--

                 作者：offline

                 时间：2018-08-28

                 描述：日期格式化

             -->

             {{time|formatTime}}

         </div>

         <script>

             new Vue({

                 el:"#box",

                 data:{

                     time:"2018-10-11 08:20:11"

                 },

                 filters:{

                     formatTime:function(value){

                         var time = new Date(value);

                         var rtime=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();

                         return rtime;

                     }

                 }

             })

         </script>

     </body>

 </html>

　　实例化时间对象，并指定时间。然后将时间格式为年月日格式。

缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：v-bind:class，可以缩写为：class,v-on:click可以缩写为@click。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script type="text/javascript" src="js/vue.js" ></script>

         <style>

             .class1{

                 color: aquamarine;

             }

         </style>

     </head>

     <body>

         <div id="box">

             <!--

                 作者：offline

                 时间：2018-08-28

                 描述：日期格式化

             -->

             {{time|formatTime}}

             <div :class="myclass">看我字体的颜色</div>

             <div @click="clickFunc" :style="style">单击我</div>

         </div>

         <script>

             new Vue({

                 el:"#box",

                 data:{

                     time:"2018-10-11 08:20:11",

                     myclass:'class1',

                     style:'cursor:pointer;border:1px solid gray;width:50px'

                 },

                 methods:{

                     clickFunc:function(){

                         console.log("单击了我");

                     }

                 },

                 filters:{

                     formatTime:function(value){

                         var time = new Date(value);

                         var rtime=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();

                         return rtime;

                     }

                 }

             })

         </script>

     </body>

 </html>