2-数据绑定与生命周期

数据绑定与生命周期

一. 生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码:

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mountedupdateddestroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

在这里插入图片描述

注:

不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a)vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 thisthis 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefinedUncaught 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值