(Vue)vue模板語法

時間 2019-12-14

標籤 vue 模板語法简体版

原文原文鏈接

　　Vue.js 使用了基於 HTML 的模版語法，容許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。Vue.js 的核心是一個容許你採用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統。javascript

插值

　　數據綁定最多見的形式就是使用 {{...}}（雙大括號）的文本插值：html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <script src="js/vue.js"></script>
 7     </head>
 8     <body>
 9         <div id="box">
10             {{message}}
11             </div>
12         <script>
13             //vue實例化
14             //el 綁定html對象，選擇器
15             //data:綁定html對象數據，雙向綁定。能夠用v-model
16             var vm = new Vue({
17                 el:"#box",
18                 data:{
19                     message:"hello,vue"
20                 }
21             });
22             
23         </script>
24     </body>
25 </html>

HTML

　　使用v-html綁定html代碼：vue

<!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等。java

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="js/vue.js"></script>
 7         <style>
 8             .myclass{
 9                 background: green;
10             }
11         </style>
12     </head>
13     <body>
14         <div id="box">
15             <input type="checkbox" v-model="activeClass" id="mcheckbox" /><label for="mcheckbox">改變顏色</label>
16             <input type="checkbox" v-model="activeStyle" id="stylecheckbox" /><label for="stylecheckbox">改變字體大小</label>
17             <div v-bind:class="activeClass?'myclass':''" v-bind:style="activeStyle?'font-size:20px':''">請看顏色的變化</div>
18         </div>
19         <script>
20             new Vue({
21                 el:"#box",
22                 data:{
23                     activeClass:false,
24                     activeStyle:false
25                 }
26             })
27         </script>
28     </body>
29 </html>

　　上面的代碼，咱們經過v-bind:class和v-bind:style爲元素綁定了style和class。並在v-bind中使用了表達式。當activeClass和activeStyle爲true的時候，div的class和style都將發生改變。ide

參數

　　參數在指數後，用冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性：字體

 1 <div id="box">
 2             <input type="checkbox" v-model="activeClass" id="mcheckbox" /><label for="mcheckbox">改變顏色</label>
 3             <input type="checkbox" v-model="activeStyle" id="stylecheckbox" /><label for="stylecheckbox">改變字體大小</label>
 4             <div v-bind:class="activeClass?'myclass':''" v-bind:style="activeStyle?'font-size:20px':''">請看顏色的變化</div>
 5             <pre><a v-bind:href="url">百度</a></pre>
 6         </div>
 7         <script>
 8             new Vue({
 9                 el:"#box",
10                 data:{
11                     activeClass:false,
12                     activeStyle:false,
13                     url:'http://www.baidu.com'
14                 }
15             })
16         </script>

　　上面的代碼就是經過v-bind:href，綁定了href屬性。this

事件綁定

　　經過使用v-on:參數，能夠綁定事件。url

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript" src="js/vue.js" ></script>
 7     </head>
 8     <body>
 9         <div id="box">
10             {{message}}
11             <!--
12                 做者：offline
13                 時間：2018-08-28
14                 描述：v-on:click，點擊事件
15             -->
16             <button v-on:click="reverseMessage">反轉字符串</button>
17             <!--
18                 做者：offline
19                 時間：2018-08-28
20                 描述：v-on:mouseover,鼠標進入事件，v-on:mouseout，鼠標移出事件
21             -->
22             <button v-on:mouseover="overColor" v-on:mouseout="outColor" v-bind:style="color">鼠標通過</button>
23         </div>
24         <script>
25             new Vue({
26                 el:"#box",
27                 data:{
28                     message:"hello,vue",
29                     color:'color:blue;'
30                 },
31                 methods:{
32                     reverseMessage:function(){
33                         this.message=this.message.split('').reverse().join('');
34                     },
35                     overColor:function(){
36                         this.color="color:green";
37                     },
38                     outColor:function(){
39                         this.color="color:blue";
40                     }
41                 }
42             })
43         </script>
44     </body>
45 </html>

View Code

　　上面的代碼，經過v-on:click,綁定了click事件。vue中的methods能夠定義方法。v-on:mouseover和v-on:mouseout監聽了鼠標移入和移出事件。鼠標移入的時候，style的color爲green，鼠標移出的時，style的color顏色爲blue。spa

格式化

　　經過vue的filters屬性，可以格式化data屬性。下面的代碼展現了時間格式化。經過在filters中定義一方法，該方法對屬性進行格式化操做，並返回。使用格式化的時候，{{message|format|format2}}。雙向綁定

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript" src="js/vue.js" ></script>
 7     </head>
 8     <body>
 9         <div id="box">
10             <!--
11                 做者：offline
12                 時間：2018-08-28
13                 描述：日期格式化
14             -->
15             {{time|formatTime}}
16         </div>
17         <script>
18             new Vue({
19                 el:"#box",
20                 data:{
21                     time:"2018-10-11 08:20:11"
22                 },
23                 filters:{
24                     formatTime:function(value){
25                         var time = new Date(value);
26                         var rtime=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
27                         return rtime;
28                     }
29                 }
30             })
31         </script>
32     </body>
33 </html>

View Code

　　實例化時間對象，並指定時間。而後將時間格式爲年月日格式。

縮寫

Vue.js 爲兩個最爲經常使用的指令提供了特別的縮寫：v-bind:class，能夠縮寫爲：class,v-on:click能夠縮寫爲@click。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script type="text/javascript" src="js/vue.js" ></script>
 7         <style>
 8             .class1{
 9                 color: aquamarine;
10             }
11         </style>
12     </head>
13     <body>
14         <div id="box">
15             <!--
16                 做者：offline
17                 時間：2018-08-28
18                 描述：日期格式化
19             -->
20             {{time|formatTime}}
21             <div :class="myclass">看我字體的顏色</div>
22             <div @click="clickFunc" :style="style">單擊我</div>
23         </div>
24         <script>
25             new Vue({
26                 el:"#box",
27                 data:{
28                     time:"2018-10-11 08:20:11",
29                     myclass:'class1',
30                     style:'cursor:pointer;border:1px solid gray;width:50px'
31                 },
32                 methods:{
33                     clickFunc:function(){
34                         console.log("單擊了我");
35                     }
36                 },
37                 filters:{
38                     formatTime:function(value){
39                         var time = new Date(value);
40                         var rtime=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
41                         return rtime;
42                     }
43                 }
44             })
45         </script>
46     </body>
47 </html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。