Vue学习2：模板语法
Vue学习2：模板语法
用户1149564
发布于 2018-07-31 16:35:33
发布于 2018-07-31 16:35:33
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>vue学习</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
8 <script src="vue.js"></script>
9 </head>
10 <body>
11 <style>
12 .class1{
13 background-color: #444;
14 color: orange;
15 }
16 </style>
17 <div id="app">
18 <!--{{}}用于文本插值-->
19 <p>{{msg}}</p>
20 <p>{{html1}}</p>
21 <!--v-html指令用于输出html代码-->
22 <p v-html="html1"></p>
23 <!--html属性中的值使用v-bind-->
24 <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1"><br><br>
25 <div v-bind:class="{'class1':class1}">directive v-bind:class</div>
26
27 <!--Vue支持完全的javascript表达式-->
28 {{5+5}}
29 {{ok? 'true':'false'}}
30 {{msg.split(' ').reverse().join(',')}}
31
32 <!--带有v-前缀的是Vue指令，表达式的值改变时，映射到DOM上-->
33 <div class="div1" v-if="seen">you can see that</div>
34 <!--参数-->
35 <!--注意下面两种情况-->
36 <!--v-bind将该元素的href值与表达式href值绑定-->
37 <div><a v-bind:href="href">click this</a></div>
38 <div><a href="href">click this</a></div>
39
40 <!--修饰符：如.指明的特殊后缀，用于指定应该以特殊方式绑定-->
41
42 <!--.prevent告诉v-on对于事件调用event.preventDefault()-->
43 <form v-on:submit.prevent="onSubmit"></form>
44
45 <!--v-model可以实现数据双向绑定-->
46 <!--下面的例子中数据同时变化-->
47 {{msg1}}
48 <input type="text" v-model="msg1">
49
50 <!--v-bind缩写为:,v-on缩写为@-->
51 <button @click="reverseMsg1">点击反转msg1</button>
52
53 <!--过滤器-->
54 <div>{{msg2|capitalize}}</div>
55 </div>
56 <script>
57 var vm =new Vue({
58 el: '#app',
59 data: {
60 msg: 'hello msg',
61 ok: 1,
62 html1: '<span color="red">this is red</span>',
63 class1: false,
64 seen: true,
65 href: 'https://g.cn',
66 msg1: 'hello msg1',
67 msg2:'msg2'
68
69 },
70 methods:{
71 reverseMsg1:function(){
72 this.msg1= this.msg1.split('').reverse().join('');
73 }
74 },
75 filters:{
76 capitalize:function(msg2){
77 if(!msg2){
78 return ''
79 }
80 msg2=msg2.toString()
81 return msg2.slice(0,1).toUpperCase()+msg2.slice(1)
82 }
83 }
84 })
85 </script>
86 </body>
87 </html>运行结果：
参考：https://cn.vuejs.org/v2/guide/syntax.html，http://www.runoob.com/vue2/vue-template-syntax.html
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-05-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读