正文

Vue学习2：模板语法

IP云
IP云V管理员/5 阅读
08/11
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue学习</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
<script src="vue.js"></script>
</head>
<body>
<style>
.class1{
background-color: #444;
color: orange;
}
</style>
<div id="app">
<!--{{}}用于文本插值-->
<p>{{msg}}</p>
<p>{{html1}}</p>
<!--v-html指令用于输出html代码-->
<p v-html="html1"></p>
<!--html属性中的值使用v-bind-->
<label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1"><br><br>
<div v-bind:class="{'class1':class1}">directive v-bind:class</div> <!--Vue支持完全的javascript表达式-->
{{5+5}}
{{ok? 'true':'false'}}
{{msg.split(' ').reverse().join(',')}} <!--带有v-前缀的是Vue指令，表达式的值改变时，映射到DOM上-->
<div class="div1" v-if="seen">you can see that</div>
<!--参数-->
<!--注意下面两种情况-->
<!--v-bind将该元素的href值与表达式href值绑定-->
<div><a v-bind:href="href">click this</a></div>
<div><a href="href">click this</a></div> <!--修饰符：如.指明的特殊后缀，用于指定应该以特殊方式绑定--> <!--.prevent告诉v-on对于事件调用event.preventDefault()-->
<form v-on:submit.prevent="onSubmit"></form> <!--v-model可以实现数据双向绑定-->
<!--下面的例子中数据同时变化-->
{{msg1}}
<input type="text" v-model="msg1"> <!--v-bind缩写为:,v-on缩写为@-->
<button @click="reverseMsg1">点击反转msg1</button> <!--过滤器-->
<div>{{msg2|capitalize}}</div>
</div>
<script>
var vm =new Vue({
el: '#app',
data: {
msg: 'hello msg',
ok: 1,
html1: '<span color="red">this is red</span>',
class1: false,
seen: true,
href: 'https://g.cn',
msg1: 'hello msg1',
msg2:'msg2' },
methods:{
reverseMsg1:function(){
this.msg1= this.msg1.split('').reverse().join('');
}
},
filters:{
capitalize:function(msg2){
if(!msg2){
return ''
}
msg2=msg2.toString()
return msg2.slice(0,1).toUpperCase()+msg2.slice(1)
}
}
})
</script>
</body>
</html>

运行结果：

参考：https://cn.vuejs.org/v2/guide/syntax.html，http://www.runoob.com/vue2/vue-template-syntax.html