VueJs 你必须知道Vue instance的 9个要点

new Vue 如何运行的 / Vue instance中包括什么量 / 如何修改element  / Vue的生命周期是怎么样的/ Vue 如何改变 DOM

 

1. Vue instance中的量

• el
• data
• methods
• computed 
• watch 

这些都是最基础的

---

2. 多个Vue instance

我们现在有俩个Div

<div id="a1"> </div>

<div id="a2"> </div>

我们是允许 拥有 vue({el: "#a1"}); 和 vue({el: "#a2"});

---

3. 从outside 进入 vue

这是允许的 

比如vm1 有一个data title

vm2中有一个方程是可以直接去改变这个量的

---

4. 在vue instance外加property

这个是不允许的

比如我加入一个 vm.newproperty = "new!"  我们发现他能加入成功 

但是在console中查看vm 会发现 watch computed 这种property 前面都会有 set 和 get

但是这个新加入的量就是孤苦伶仃的

---

5. 了解Vue组成

如果console.log（vm)

你会发现一些从未见到的 properties

但是也有我们熟悉的

$el 直接指代到我们的template

$data 包含了所有data的数据

我们可以这样进入这些data: vm.$data.title     我们可以用三等去检测  vm.$data.title === vm.title

---

6. $ref 去修改html 内容

<p1 ref = "testp"> a </p>

我们在 vue instance 中

this.$ref.testp.innerText = 'b'

在普通的javascript中我么用queryselect 去选取 id 或者 class 但在这我们加入ref 去要修改的header

抢夺理念：
如果我们用以上的方法去修改一个interplation， 一个 {{}} template 会怎么样？

修改成功之后 会被template更改！！！ 因为Vue 控制了DOM 纵然我们在外侧试图更改了DOM

---

7. mount 

我们在创建 vue的时候 

可以并不使用 el 

在vue 外 我们用

vm.$mount('id')

高级做法：

创造一个template在vue instance中

使用mount 我们可以在HTML DOM中添加template

究极做法：

我们可以在包含template的 vue中 设置el为class id 或者 element

然后现在所有对应的el class 或者 element 都会被template 更改

极限做法：

Vue.component 这个可以生成一个反复使用的替换物

---

8.  VUE JS 如何升级 DOM

Vue 很符合现在的思想 

创建一个虚拟DOM 审核哪里改过了 然后再去跟真实DOM 打补丁
 

---

9. Life Cycle Vue

Vue的生命周期是怎样的？

尝试着用console.log去更改DOM 去destoryVue 

这些item都是vue里面的property 可以去更改