2019独角兽企业重金招聘Python工程师标准>>> 
一起学vue——vue学习总路线
——————————^~^我是萌萌哒分割线^~^————————————————
v-html
作用：用于输出html代码
用法：
html代码：
详解：
v-html用于绑定要插入的html内容
script代码：
window.οnlοad=function(){
new Vue({
el:"#vhtml",
data:{
message:"
我是插入的html内容
"}
});
}
详解：
message是v-html绑定的要插入的html内容
v-bind
html的属性值应该使用v-bind来绑定
html代码：
我是文字，你勾选上面的复选框，我就会改变颜色
详解：
使用v-bind来绑定p的class值，这里的class名叫class1，值为color1
使用v-model来绑定input的值，将input的值传给color1
橙色的字为新增的，因为我是将这块作为同一知识点。
script代码
window.οnlοad=function(){
new Vue({
el:"#vhtml",
data:{
message:"
我是插入的html内容
"}
});
new Vue({
el:"#vbind",
data:{
color1:false
}
});
}
详解：
将这块数据作用于id为vbind的div里，将color1的值默认设为false
style.css代码
.class1{color: red;}
运行结果：
v-if
html代码：
遭了，被你看到我了
script代码：
new Vue({
el:"#vif",
data:{
seen:true
}
});
详解：
seen为true的话就能显示，为false就隐藏
v-on
html代码：
{{msg}}
script代码：
new Vue({
el:"#von",
data:{
msg:"你看到我是反着的吗？"
},
methods:{
reversemsg:function(){
this.msg = this.msg.split("").reverse().join("");
}
}
});
运行结果：
自定义过滤器
html代码：
{{lower | upper}}
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);
}
}
});
这里我不是很理解，自定义一个过滤器，是个方法，那他的参数就是管道符前面那个吗？