v-for="" 循环
v-model='' 双向数据绑定 一般用于表单元素
v-on：事件='函数名' 绑定一个事件 简写： @事件=‘函数’
v-bind：属性名='' 绑定一个属性 简写为 ：属性='值'
v-show='' 控制元素的显示或隐藏 display:none
v-if='' 控制元素的显示或隐藏 visibility:hidden;
v-else
v-else-if
v-html 操作元素内容 可识别html标签
v-text 操作元素内容 不可识别html标签
v-once 双向数据绑定 只能绑定一次
v-pre 原样输出 {{msg}}
v-cloak style: [v-cloak]{display:none}
过滤器：把要显示在页面上的数据进行筛选或从新操作
js:
全局过滤器：
Vue.filter(过滤器的名字,function(data){
})
new Vue({
el:''
})
html:
<p>{{num|过滤器的名字}}</p>
局部过滤器：
计算属性：用来处理复杂的逻辑操作的
$el获取vue绑定的元素的
$data 获取vue实例中的数据
$options 获取vue实例中的自定义属性
$refs 获取所有带ref属性的元素
获取电脑时间
var year=date.getFullYear();
var month=date.getMonth()+1;
var de=date.getDate();//日
var day=date.getDay();//星期
var hour=date.getHours();//小时
var min=date.getMinutes();//分钟
var sec=date.getSeconds();
console.log(year+'年'+month+'月'+de+'日,星期'+day+hour+'时'+min+'分'+sec+'秒');
小于10前面有0的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{8|addZero}}</p>
</div>
<script src='js/vue.js'></script>
<script>
两种方法
（1） Vue.filter('addZero',function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
})
（2）new Vue({
el:'#itany',
data:{},
methods:{},
filters:{ //局部过滤器
addZero:function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
}
}
})
</script>
</body>
</html>
保留4位小数的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="fake">
<p>{{521.131425565|lin}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#fake',
data:{},
filters:{
lin:function(data){
return data.toFixed(4)
}
}
})
</script>
</body>
</html>
获取电脑时间的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="fake">
<p>{{new Date()|date}}</p>
</div>
<script src="vue.js"></script>
<script>
Vue.filter('date',function(data){
return data.getFullYear()+'年'+data.getMonth()+'月'+data.getDate()+'日,星期'+data.getDay()+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒'
})
new Vue({
el:'#fake'
})
</script>
</body>
</html>
$el 获取vue绑定的元素的
$data 获取vue实例中的数据
$options 获取vue实例中的自定义属性
$refs 获取所有带ref属性的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
{{msg}}
<h1 ref='hello'>你好</h1>
</div>
<script src='vue.js'></script>
<script>
var vm=new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
uname:'rose',
age:18
})
//$el
console.log(vm.$el);
vm.$el.style.color='red';
//$data
console.log(vm.$data);
//$options
console.log(vm.$options);
console.log(vm.$options.uname);
console.log(vm.$options.age);
//refs
console.log(vm.$refs);
console.log(vm.$refs.hello);
</script>
</body>
</html>
网友评论