自学vue笔记 (二) : 实例与生命周期

一: 什么是实例

    我们说了,Vue 应用都应该从构建一个 Vue 实例开始。它管理着挂载在它身上的所有内容,因此实例是一个根实例, 所有的组件都应该挂载在根实例上面。创建一个 Vue 实例,需要通过 new 一个构造函数的方式,同时传入一个对象。 该对象可以传入很多内容,驱动页面的数据,模板,挂载的元素节点,方法,生命周期函数,子组件等。

  自学vue笔记 (二) : 实例与生命周期_第1张图片

二:属性和方法

每个 Vue 实例都会代理其 data 对象里的所有属性,并且让其作为驱动页面的数据。当 data 中的数据改变时,页面也会响应式的发生改变

自学vue笔记 (二) : 实例与生命周期_第2张图片

我们看到,把 data 作为 vm 实例中的 data 的属性值,它们其实是等价的。这里就体现出一个问题,修改外面的 data 对象, 也会影响到 vm 实例中的 data。那么为了数据的安全,我们不建议把 data 定义在外面。

 

三 : 页面绑定方法:

    1:小胡子语法

    小胡子语法是我们常用的绑定数据的方法。 以两个大括号开始,以两个大括号结尾,中间通常放 data 的属性(也可以放表达式,但除非特殊情况不建议这么操作),也就是将数据绑定到元素上。

    自学vue笔记 (二) : 实例与生命周期_第3张图片

    假设 id 为 app 的节点已经被 vm 实例接管,这样写意为,h1标签被绑定了 vm.data 的 name 属性, 该标签在页面上应该是以一级标题显示的 name 的值。

 

    2:响应式数据,v-m-vm 

    当data的属性的值发生改变时,页面视图将会产生“响应”,即匹配更新为新的值。这个现象,我们称之为响应式数据。 请打开控制台,执行vm.name='HelloWorld'观察页面的变化。 另外,不止数据可以影响页面,页面反过来也可以影响数据,后面我们可以看到。

    3:指令绑定

    指令 (Directives) 是带有v-前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。 指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。这里有几个指令常用语绑定数据到页面

    

  • v-text:直接写在 DOM 元素上,指令值是 data 中的属性,
    是等价的。这里要提到一点,如果绑定的值是一个 html 标签,那么它是会被转义的。如果的确想展示的数据是被作为 html 模板编译过的话,请使用v-html
  • v-html:与v-text一样的作用,但是与其不同的是,当我们绑定的数据是

    123

    的话,那么展示的数据会是一级标题格式的 123。这么做具有风险,容易导致 XSS 攻击,Vue 官方也写道只在可信内容上使用v-html,永不用在用户提交的内容上。
  • v-bind:通常,我们需要在页面的元素上绑定 data 属性作为元素的属性的时候,就使用这个指令,这个指令很常用,基本在绑定属性的时候都会出现。它有一个简写:属性名
    ,这样写的含义就是,给 div 绑定一个 name 属性,它的属性值就是 data 中的 name 属性值。
  • v-for:基于源数据多次渲染元素或者模板,前提是实例的 data 中提供的数据能够被遍历。
  • ,这么写的意为,遍历 list,item 是遍历的每一项,而 index 是遍历每一项的时候,它的索引值。这么遍历出来的内容,可以重复渲染li标签到页面上,但它的数据如何展示在于你的代码,示例用小胡子语法简单展示了 item 项。
  • v-model:这是一个极具特点的指令,它提供了双向的数据绑定,通常用在用户输入的元素上,以做到页面与数据的相互影响。,input 框会展示 content 的值,input 的值改变,content 的值也会改变。

 

 

 

  注意!!!!

    自学vue笔记 (二) : 实例与生命周期_第4张图片

    4:方法:

    方法,就是定义在vm实例中的 methods 中的逻辑代码。它通常用来处理 data 中的属性或者其他组件传递过来的属性。具体我们以后展开来讲,需要知道的是:vm 实例中的 this 指向是 vm 实例本身,因此,当 methods 中的方法需要操作 vm 中的属性时,需要使用 this 来指向 vm 来获取  

  四:生命周期函数

    

    1 :官方生命周期函数解释

      自学vue笔记 (二) : 实例与生命周期_第5张图片

    

这其实是一个很明了的流程图,我们拆开来看流程(仅做理解,不够专业)。

  1. 通过构造函数,创建了一个实例
  2. 实例开始初始化,在初始化之前会执行beforeCreate函数
  3. 实例初始化结束后,会执行created函数
  4. 这个时候会做一个判断,要将实例挂载的元素根节点是否存在?如果存在的话,执行下一步,若没有,则等挂载元素的函数被调用
  5. 接下来判断是否有模板设置?有的话就将模板放到render函数中,如果没有的话,就将挂载的根节点作为模板。
  6. 现在开始挂载,在挂载之前,会自动执行beforeMount函数。之后就开始将实例挂载在元素节点上。
  7. 在挂载后,自动执行mounted函数,这个时候,我们可以看到如果挂载后,数据发生变化,会促使两个函数beforeUpdateupdated自动执行,一个在重新渲染页面之前执行,一个重新渲染后执行。
  8. 当实例被销毁的时候,也会在销毁前自动执行beforeDestroy函数和销毁之后的destroyed函数。自学vue笔记 (二) : 实例与生命周期_第6张图片

     

    

转载于:https://www.cnblogs.com/baili-luoyun/p/10763551.html

你可能感兴趣的:(javascript,ViewUI)