参考:《Vue.js实战》梁灏
1. Vue实例与数据绑定
1.1 Vue实例与数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
a:2
}
});
console.log(app.a);
console.log(app.$el);
</script>
</body>
</html>
- app代表了这个Vue实例
- el用于指定一个页面中已存在的DOM元素来挂载Vue实例,可以是HtmlElement,也可以是css选择器,挂载成功后,可通过app.$el来访问该元素
- data选项可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在data内声明,这样不至于将数据散落在业务逻辑中,难以维护。
除显式声明数据外,亦可以指向一个已有的变量,且默认二者之间存在双向绑定关系,如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
var mydata = {
a:2
}
var app = new Vue({
el:"#app",
data:mydata
});
console.log(app.a);
app.a = 3;
console.log(mydata.a);//3
mydata.a = 4;
console.log(app.a); //4
</script>
</body>
</html>
1.2 生命周期
常用的Vue生命周期钩子:
- created:实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el 还不可用。需要初始化处理一些数据时会比较有用
- mounted:el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始。
- beforeDestory:实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
a:2
},
created: function(){
console.log(this.a);
},
mounted:function(){
console.log(this.$el);
}
});
</script>
</body>
</html>
1.3 插值与表达式
基本语法:{{ }}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插值与表达式</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">{{ date }}</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
date:new Date()
},
mounted() {
var _this = this
this.timer = setInterval(function(){
_this.date = new Date();
},1000);
},
beforeDestroy() {
if(this.timer){
clearInterval(this.timer);
}
}
});
</script>
</body>
</html>
v-html
用于输出HTML而非纯文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-html</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" v-html="link"></div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
link:"<a href='http://www.baidu.com'>这是个链接,不是纯文本</a>"
}
})
</script>
</body>
</html>
如果想显示 {{ }} 标签,而不是替换,可以用v-pre
即可跳过这个元素和它的子元素的编译过程
<span v-pre>{{ 这里的内容是不会被编译的 }} <span>
在{{ }} 中,除了简答的绑定属性值外,还可以使用JavaScript表达式进行简单的运算、三元运算等:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{}}中的简单运算</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{ number / 100 }}
<br>
{{ isOk ? '确定':'取消' }}
<br>
{{text.split(",").reverse().join(",")}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
number:100,
isOk:false,
text:'123,456'
}
})
</script>
</body>
</html>
注意: Vue.js只支持单个表达式,不支持语句和流控制,且在表达式中不能使用用户自定义的全局变量,只能用Vue白名单内的全局变量,例如Math和Date,以下无效:
<!--这是语句,不是表达式-->
{{ var book = 'Vue.js' }}
<!--不能使用流控制,要使用三元运算-->
{{ if(ok) return msg; }}
1.4 过滤器
Vue.js 支持在{{ }}插值的尾部添加一个管道符“(|)”对数据进行过滤,通过给Vue实例添加选项filters
来设置:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤器</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" v-cloak>{{ date | formatDate }}</div>
<script type="text/javascript">
//在月份、日期、小时等小于10时前面补0
var padDate = function(value){
return value <10 ? '0' + value : value;
}
var app = new Vue({
el:"#app",
data:{
date:new Date()
},
filters:{
formatDate(value){
var date = new Date(value);
var year = date.getFullYear();
var month = padDate(date.getMonth() + 1);
var day = padDate(date.getDate());
var hours = padDate(date.getHours());
var minutes = padDate(date.getMinutes());
var seconds = padDate(date.getSeconds());
//将整理好的数据返回
return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
}
},
mounted:function(){
var _this = this;
this.timer = setInterval(function(){
_this.date = new Date();
},1000);
},
beforeDestroy: () => {
if(this.timer){
clearInterval(this.timer);
}
}
})
</script>
</body>
</html>