Vue.js学习笔记为学习梁灏编著《Vue.js实战》的读书笔记
这段代码展示了Vue.js最核心的功能:数据的双向绑定。在输入框中输入的内容会实时的展示在页面的h1标签内。
<!DOCTYPE html>
<html>
<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://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: ''
}
})
</script>
</body>
</html>
通过构造函数Vue就可以创建一个Vue的根实例,并启动Vue应用:
var app = new Vue({
//选项
})
el -- 用于指定一个页面中已经存在的DOM元素来挂载Vue实例,可以是HTMLElement,也可以是CSS选择器。
文章开头的示例代码中,在input标签上,有一个v-model的指令,它的值对应于创建的Vue实例的data选项中的name字段,这就是Vue的数据绑定。
通过Vue实例的data选项,可以声明应用内需要双向绑定的数据。
Vue实例本身也代理了data对象里的多有属性:
var app = new Vue({
el: 'app',
data: {
a: 2
}
})
console.log(app.a); //2
除了显示的声明数据外,也可以指向一个已有的变量,并且它们之间默认建立了双向绑定,当修改其中任意一个时,另一个也会一 起变化:
var myData = {
a: 1
}
var app = new Vue({
el: '#app',
data: myData
})
console.log(app.a); //1
//修改属性,原数据也会随之修改
app.a = 2;
console.log(myData.a); //2
//反之,修改原数据,Vue属性也会修改
myData.a = 3;
console.log(app.a); //3
每个Vue实例创建时,都会经历一系列的初始化过程,同时也会调用相应的生命周期钩子,比较常用的有:
- created 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载。
- mounted el挂载到实例上后调用,一般第一个业务逻辑从这里开始。
- beforeDestroy 实例销毁之前调用,主要解绑一些使用addEventListener监听的事件等。
这些钩子与el和data类似,也是作为选项写入Vue实例内,并且钩子的this指向的是调用它的Vue实例。
使用双大括号"{{ }}"是最基本的文本插值方法,它会自动将我们双向绑定的数据实时显示出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Vue</title>
</head>
<body>
<div id="app">
{{ date }}
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
date: new Date()
},
mounted: function(){
var _this = this; //声明一个变量指向Vue实例this,保证作用域一致
var timer = setInterval(function(){
_this.date = new Date(); //修改数据date
},1000);
},
beforDestroy: function(){
if(this.timer){
clearInterval(this.timer); //在Vue实例销毁前,清除定时器
}
}
})
</script>
</body>
</html>
如果有时就是想输出HTML,而不是将数据解释后的纯文本,可以使用v-html:
<div id="app">
<span v-html="link"></span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
link: '<a href="#">链接</a>' //link的内容将会被渲染成一个具有点击功能的a标签
} //而不是纯文本
})
</script>
如果想显示{{ }}标签,而不进行替换,使用v-pre即可跳过这个元素和它的子元素的编译过程。
在{{ }}中,除了简单的绑定属性值外,还可以使用JavaScript表达式进行简单的运算、三元运算等。但Vue.js只支持单个表达式,不支持语句和流控制。
Vue.js支持在{{ }}插值的尾部添加一个管道符" ( | ) "对数据进行过滤,经常用于格式化文本:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Vue</title>
</head>
<body>
<div id="app">
{{ date | formatDate }}
</div>
<script src="vue.js"></script>
<script>
//在月份、日期、小时等小于10时前面补0
var padDate = function(value){
return value < 0 ? '0' + value : value;
}
var app = new Vue({
el: '#app',
data: {
date: new Date()
},
filters: {
formatDate: function(value){ //这里的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; //声明一个变量指向Vue实例this,保证作用域一致
var timer = setInterval(function(){
_this.date = new Date(); //修改数据date
},1000);
},
beforeDestroy: function(){
if(this.timer){
clearInterval(this.timer); //在Vue实例销毁前,清除定时器
}
}
})
</script>
</body>
</html>
过滤器也可以串联,而且可以接收参数。
指令是Vue.js模板中最常用的一项功能,它带有前缀v-。
指令的主要职责就是当其表达式的值改变时,相应地将某些行为应用到DOM上,以v-if为例:
<div id="app">
<p v-if="show">显示这段文本</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true //当show的值为true时,p元素会被插入,为false时则会被移除
}
})
</script>
数据驱动DOM是Vue.js的核心理念,所以尽量不要主动操作DOM,只需要维护好数据,DOM的事Vue会优雅的处理。
v-bind的基本用途是动态更新HTML元素上的属性,比如id、class等:
//链接地址与图片的地址都与数据进行了绑定
//通过各种方式改变数据时,链接和图片都会自动更新
<div id="app">
<a v-bind:href="url">链接</a>
<img v-bind:src="imgurl">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
url:'https://www.github.com',
imgurl:'https://xxx.xxx.xx/img.png'
}
})
</script>
v-on用来绑定事件监听器:
<div id="app">
<p v-if="show">这是一段文本</p>
<button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClose: function(){
this.show = false;
}
}
})
</script>
使用v-on:click给button按钮绑定了一个点击事件,在普通元素上,v-on可以监听原生的DOM事件。
表达式可以是一个方法名,这些方法都写在Vue实例的methods属性内,并且是函数的形式,函数内的this指向的是当前Vue实例本身,也可以是一个内联语句,如上例代码,也可以在button按钮中直接写:v-on:click="show=flase" 。
Vue.js将methods里的方法也代理了,所以也可以像访问Vue数据那样来调用方法:
<div id="app">
<p v-if="show">这是一段文本</p>
<button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClose: function(){
this.close();
},
close: function(){
this.show = false;
}
}
})
</script>
上述代码只是用于演示它的用法,在业务中会经常用到,例如还有以下几种用法都是正确的:
<script>
var app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
init: function(text){
console.log(text);
}
},
mounted: function(){
this.init('在初始化时调用'); //在初始化时调用
}
});
app.init('通过外部调用'); //在Vue实例外部调用
</script>
语法糖:
- v-bind:可以省略v-bind,直接写一个冒号":"。
- v-on:可以直接用"@"来缩写。