VUE初学记录

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/OnlyRu/article/details/81875331

一、Vue.js应用的创建很简单,通过构造函数Vue就可以创建一个Vue的根实例,并启动Vue应用
var app =new Vue({ 
//选项
}) 

变量app就代表了这个Vue实例。

1、首先,必不可少的一个选项就是el。 el 用于指定一个页面中己存在的DOM元素来挂载Vue实例,它可以是HTMLElement ,也可以是css选择器,比如:
<div 工d=”app”></div>
var app =new Vue({ 
el: docur1'ent.getElementByld(’ app’)  //或者是’#app’
}) 

挂载成功后,我们可以通过app.$el来访问该元素。

2、通过Vue实例的data选工页,可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在data内声明,这样不至于将数据散落在业务逻辑中,难以维护。

二、生命周期

每个Vue实例创建时,都会经历一系列的初始化过程,同时也会调用相应的生命周期钩子,我们可以利用这些钩子,在合适的时机执行我们的业务逻辑。

Vue的生命周期钩子与之类似,比较常用的有:
•  created  实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el 还不可用。
需要初始化处理一些数据时会比较有用,后面章节将有介绍.
•  mounted  el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始。
•  beforeDestroy  实例销毁之前调用。主要解绑一些使用addEventListener 监听的事件等。

三、插值与表达式

使用双大括号(Mustache 语法)“{{}}”是最基本的文本插值方法,它会自动将我们双向绑定的数据实时显示出来。

四、过滤器

Vue.  支持在{{}}插值的尾部添加一小管道符“ 。” 对数据进行过滤,经常用于格式化文本,比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的,通过给Vue实例添加选项filters来设置。过滤器也可以串联,而且可以接收参数。

猜你喜欢

转载自blog.csdn.net/OnlyRu/article/details/81875331