v-html
作用：用于输出html代码
用法：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue的模板语法</title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="script.js"></script>
</head>
<body>
<div id="vhtml">
<div v-html="message"></div>
</div>
</body>
</html>
详解：
v-html用于绑定要插入的html内容
script代码：
window.onload=function(){
new Vue({
el:"#vhtml",
data:{
message:"<h1>我是插入的html内容</h1>"
}
});
}
详解：
message是v-html绑定的要插入的html内容
v-bind
html的属性值应该使用v-bind来绑定
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue的模板语法</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="script.js"></script>
</head>
<body>
<div id="vhtml">
<div v-html="message"></div>
</div>
<div id="vbind">
<label for="changecolor">改变颜色</label><input type="checkbox" id="changecolor" v-model="color1"/>
<p v-bind:class="{'class1':color1}">我是文字，你勾选上面的复选框，我就会改变颜色</p>
</div>
</body>
</html>
详解：
使用v-bind来绑定p的class值，这里的class名叫class1，值为color1
使用v-model来绑定input的值，将input的值传给color1
橙色的字为新增的，因为我是将这块作为同一知识点。
script代码
window.onload=function(){
new Vue({
el:"#vhtml",
data:{
message:"<h1>我是插入的html内容</h1>"
}
});
new Vue({
el:"#vbind",
data:{
color1:false
}
});
}
详解：
将这块数据作用于id为vbind的div里，将color1的值默认设为false
style.css代码
.class1{color: red;}
运行结果：
v-if
html代码：
<div id="vif">
<p v-if="seen">遭了，被你看到我了</p>
</div>
script代码：
new Vue({
el:"#vif",
data:{
seen:true
}
});
详解：
seen为true的话就能显示，为false就隐藏
v-on
html代码：
<div id="von">
<p>{{msg}}</p>
<button v-on:click="reversemsg">点击我，上面的字符串就会反转</button>
</div>
script代码：
new Vue({
el:"#von",
data:{
msg:"你看到我是反着的吗？"
},
methods:{
reversemsg:function(){
this.msg = this.msg.split("").reverse().join("");
}
}
});
运行结果：
自定义过滤器
html代码：
<div id="dfilter">
<p>{{lower | upper}}</p>
</div>
script代码：
new Vue({
el:"#dfilter",
data:{
lower:"studyvue"
},
filters:{
upper : function(value){
if(!value){
return " ";
}
value = value.toString();
return value.charAt(0).toLocaleUpperCase()+value.slice(1);
}
}
});
这里我不是很理解，自定义一个过滤器，是个方法，那他的参数就是管道符前面那个吗？