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>
使用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>
上面的代码,通过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>
实例化时间对象,并指定时间。然后将时间格式为年月日格式。
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>