六、模板
1.简介
vue.js 使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据，模板就是{{}}，用来进行数据的绑定，显示在页面中，也称为Mustache语法。
2.数据的绑定的方式
a.双向绑定
v-model
b.单向绑定
方式1:使用两对大括号{{}}，可能出现闪烁的问题，可以使用v-cloak
方式2:使用v-text、v-html
3.其他指令
v-once 数据只绑定一次
v-pre 不进行编译 原样子显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
window.onload = function(){
let vm = new Vue({
el:'#itany',
data:{
msg:'welcome to itany'
},
created:function(){
alert(111);
}
})
}
</script>
<style type="text/css" media="screen">
/*必须配置css样式，否则不生效*/
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="itany" >
<input type="text" name="" value="" v-model="msg">
<h3 v-cloak>{{msg}}</h3>
<h3 v-text="msg"></h3>
<h3 v-html="msg"></h3>
<h3 v-once>{{msg}}</h3>
<h3 v-pre>{{msg}}</h3>
</div>
</body>
</html>
七、过滤器
1、简介
用来过滤模型数据，在显示之前进行数据处理和筛选。
语法：{{data | filter1（参数）| filter2（参数）}}
2.关于内置过滤器
vue1.0中内置许多过滤器，如：
currency , uppercase、lowercase
limitBy
filterBy
vue2.0中已经删除了所有内置过滤器，全部被删除。
如何解决：
a.使用第三方工具库，如loadash,date-fns日期格式化，accounting.js货币格式化等。
b.使用自定义过滤器。
3.自定义过滤器
分类：全局过滤器 、局部过滤器
3.1自定义全局过滤器
使用全局方法 Vue.filter(过滤器ID，过滤器函数)
3.1 自定义局部过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义过滤器</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
// 自定义全局过滤器
Vue.filter('addZero',function(data) {
// console.log(data);
return data<10?'0'+data:data;
});
// Vue.filter('number',function(data){
// console.log(data);
// })
// Vue.filter('number',(data,n)=>{
// console.log(data,n);
// return data.toFixed(n);
// })
Vue.filter('date',data=>{
let d = new Date(data);
return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
})
window.onload = function(){
let vm = new Vue({
el:'#itany',
data:{
currentTime:Date.now()
},
filters:{
number:(data,n) => {
return data.toFixed(n);
}
}
})
}
</script>
</head>
<body>
<div id="itany">
<h3>{{3 | addZero}}</h3>
<h3>{{12.345678 | number(1)}}</h3>
<!-- 时间戳 -->
<h3>{{currentTime | date}}</h3>
</div>
</body>
</html>
