1、数据双向绑定
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="你的名字" />
<h1>你好，{{name}}</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
name: ''
}
});
</script>
</body>
</html>
2、生命周期
vued钩子与jquery的ready函数类似，比较常用的有：
（1）created：实例创建完成后调用，需要初始化处理一些数据时比较有用。
（2）mounted：el挂载到实例后调用，一般第一个业务逻辑在这里开始
（3）beforeDestory：实例销毁前调用，用来解绑监听事件。
钩子也是作为选项写入vue实例内，钩子的this指向调用它的vue实例。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="你的名字" />
<h1>你好，{{name}}</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
name: '',
a:2
},
created:function(){
//2
console.log(this.a)
},
mounted:function(){
//<div id="app"></div>
console.log(this.$el)
}
});
</script>
</body>
</html>
3、插值表达式{{}}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
{{date}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
date: new Date(),
a:2
},
created:function(){
//2
console.log(this.a)
},
mounted:function(){
var _this = this;
//修改date
_this.timer = setInterval(function(){
_this.date=new Date();
},1000);
},
beforeDestroy:function(){
if(this.timer){
//实例销毁前，清除定时器
clearInterval(this.timer);
}
}
});
</script>
</body>
</html>
浏览器实时显示当前时间。
4、v-html 输出html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
<span v-html='link'></span>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
link: '<a href="#">这是一个连接</a>'
}
});
</script>
</body>
</html>
解析后的html标签结构：
5、过滤器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<div id="app">
{{date | formatDate}}
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var padDate=function(value){
return value<10?'0'+value:value;
}
new Vue({
el: '#app',
data: {
date:new Date()
} ,
filters:{
//value是需要过滤的数据
formatDate:function(value){
var date = new Date();
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;
//修改date
_this.timer = setInterval(function(){
_this.date=new Date();
},1000);
},
beforeDestroy:function(){
if(this.timer){
//实例销毁前，清除定时器
clearInterval(this.timer);
}
}
});
</script>
</body>
</html>
过滤器处理简单的文本转换，若需要实现复杂的数据使用计算属性。