(Vue)vue模板语法

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

插值

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

 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代码：

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

 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都将发生改变。

参数

　　参数在指数后，用冒号指明。例如， 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属性。

事件绑定

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

 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。

格式化

　　通过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

posted on 2018-08-28 21:52 水击三千阅读(1972) 评论(0) 编辑收藏举报

刷新页面返回顶部

水击三千