数据绑定与生命周期
一. 生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
比如 created
钩子可以用来在一个实例被创建之后执行代码:
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mounted
、updated
和 destroyed
。生命周期钩子的 this
上下文指向调用它的 Vue 实例。
注:
不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a)
或 vm.$watch('a', newValue => this.myMethod())
。因为箭头函数并没有 this
,this
会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefined
或 Uncaught TypeError: this.myMethod is not a function
之类的错误。
二. 插值与表达式
1.使用双大括号“{{}}”是最基本的文本插值的方法,它会自动将我们双向绑定的数据实时显示出来
<div id="app">
{{ book }}
</div>
<script>
var app = new Vue({
el: "#app",
data:{
book : "vue.js实战"
}
})
</script>
2.如果有时候想输出HTML,而不是将数解释后的纯文本,可以使 用v-html
<div id="app">
<span v-html="link"></span>
</div>
<script>
var app = new Vue({
el: "#app",
data :{
link : "<a href="#">这是一个连接</a>"
}
})
</script>
3.如果想要显示{{}}标签,而不进替换,使用v-pre即可跳过这个元素和它的子元素的编译过程
<span v-pre >{{ 这里的内容不会被编译 }}</span>
4.还可以进行简单的运算,三元运算等
<div id = "app">
{{ number / 10}}
{{isOk ? "ok": "no"}}
{{ text.split(",").reverse().join(",")}}
</div>
三. 过滤器
vue.js 支持{{}}插值的尾部添加一个管道符 | 对数据进行过滤,后面接过滤函数,在filters中设置
<div id = "app">
{{date | formatDate }}
{{ message | filterA('arg1', 'arg2')}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
date: new Date(),
message: "test filter"
},
filters:{
formateDate:function(value){},
filterA:function(value1, value2){}
},
mounted: function(){},
beforeDestroy: function(){}
})
</script>
四.指令与事件
指令是vue.js模板中最常用的一项功能,它带着前缀v- ,指令的职责是当其表达式的值改变时,相应的某些行为应用到DOM上
数据驱动DOM是vue.js的核心理念,所以不到万不得已时不要主动操作DOM,只需要维据好数据就好
这里只讨论 v-bind v-on
v-bind 实现属性数据的动态绑定,
<div>
<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
url : "#",
imgUrl : "http://#"
}
})
</script>
v-on 绑定事件监听器
使用v-on:click 给元素绑定一个点击事件,在普通元素上,v-on可以监听原生DOM事件,除了click,还有dbclick , keyup, mousemove等。表达式可以是一个方法名,这些方法都写在Vue实例的methods属性内,并且是函数的形式,函数内的this指向的是当前Vue实例的本身,因些可以直接使用this.xxx来访问或修改数据
<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:{
init: function(text){
console.log(text)
}
handleClose: function(){
this.close()
},
close: function(){
this.show = false
}
},
mounted: function(){
this.init("在初始化时调用")
}
})
</script>
五.语法糖
v-bind <=> :
<a :href="url">链接</a>
v-on <=> @
<button @click="handleClose">
点击隐藏
</button>