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

一: 什么是实例

　　　　咱们说了，Vue 应用都应该从构建一个 Vue 实例开始。它管理着挂载在它身上的全部内容，所以实例是一个根实例， 全部的组件都应该挂载在根实例上面。建立一个 Vue 实例，须要经过 new 一个构造函数的方式，同时传入一个对象。 该对象能够传入不少内容，驱动页面的数据，模板，挂载的元素节点，方法，生命周期函数，子组件等。

　　

二:属性和方法

每一个 Vue 实例都会代理其 data 对象里的全部属性，而且让其做为驱动页面的数据。当 data 中的数据改变时，页面也会响应式的发生改变

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

 

三 : 页面绑定方法:

　　　　1:小胡子语法

　　　　小胡子语法是咱们经常使用的绑定数据的方法。 以两个大括号开始，以两个大括号结尾，中间一般放 data 的属性（也能够放表达式，但除非特殊状况不建议这么操做），也就是将数据绑定到元素上。

　　　　

　　　　假设 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 中的属性，<div v-text="message"></div>与<div></div>是等价的。这里要提到一点，若是绑定的值是一个 html 标签，那么它是会被转义的。若是的确想展现的数据是被做为 html 模板编译过的话，请使用v-html
• v-html：与v-text同样的做用，可是与其不一样的是，当咱们绑定的数据是<h1>123</h1>的话，那么展现的数据会是一级标题格式的 123。这么作具备风险，容易致使 XSS 攻击，Vue 官方也写道只在可信内容上使用v-html，永不用在用户提交的内容上。
• v-bind：一般，咱们须要在页面的元素上绑定 data 属性做为元素的属性的时候，就使用这个指令，这个指令很经常使用，基本在绑定属性的时候都会出现。它有一个简写:属性名，<div :name="name"></div>，这样写的含义就是，给 div 绑定一个 name 属性，它的属性值就是 data 中的 name 属性值。
• v-for：基于源数据屡次渲染元素或者模板，前提是实例的 data 中提供的数据可以被遍历。<li v-for="(item, index) in list"></li>，这么写的意为，遍历 list，item 是遍历的每一项，而 index 是遍历每一项的时候，它的索引值。这么遍历出来的内容，能够重复渲染li标签到页面上，但它的数据如何展现在于你的代码，示例用小胡子语法简单展现了 item 项。
• v-model：这是一个极具特色的指令，它提供了双向的数据绑定，一般用在用户输入的元素上，以作到页面与数据的相互影响。<input v-model="content"/>，input 框会展现 content 的值，input 的值改变，content 的值也会改变。

 

 

 

　　注意!!!!

　　　　

　　　　4:方法:

　　　　方法，就是定义在vm实例中的 methods 中的逻辑代码。它一般用来处理 data 中的属性或者其余组件传递过来的属性。具体咱们之后展开来说，须要知道的是：vm 实例中的 this 指向是 vm 实例自己，所以，当 methods 中的方法须要操做 vm 中的属性时，须要使用 this 来指向 vm 来获取　　

　　四:生命周期函数

　　　　

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

　　　　　　

　　　　

这实际上是一个很明了的流程图，咱们拆开来看流程（仅作理解，不够专业）。

1. 经过构造函数，建立了一个实例
2. 实例开始初始化，在初始化以前会执行beforeCreate函数
3. 实例初始化结束后，会执行created函数
4. 这个时候会作一个判断，要将实例挂载的元素根节点是否存在？若是存在的话，执行下一步，若没有，则等挂载元素的函数被调用
5. 接下来判断是否有模板设置？有的话就将模板放到render函数中，若是没有的话，就将挂载的根节点做为模板。
6. 如今开始挂载，在挂载以前，会自动执行beforeMount函数。以后就开始将实例挂载在元素节点上。
7. 在挂载后，自动执行mounted函数，这个时候，咱们能够看到若是挂载后，数据发生变化，会促使两个函数beforeUpdate和updated自动执行，一个在从新渲染页面以前执行，一个从新渲染后执行。
8. 当实例被销毁的时候，也会在销毁前自动执行beforeDestroy函数和销毁以后的destroyed函数。