Vue笔记 01

目录

初识Vue

模板语法

数据绑定

el与data的两种写法

---

初识Vue

                                                                    

                                                            

                                                                                                                              

构建用户界面: 将数据通过某种办法变成用户可以看见的界面. 

Vue特点:

代码复用率:别人想用界面时，直接拿到xx.vue就可以拿到所有的html，css，js.

好维护: 修改某一部分时，只需修改xx.vue中的内容，不会影响其他部分.

                      

原生JS添加新的数据时，会将原有数据替换掉，数据量大，效率会极低 .

Vue在添加新数据时，如果之前有旧的虚拟DOM，它会将新的虚拟DOM与旧的虚拟DOM进行比较(这个过程，就是diff比较，里面有优秀的diff算法) ，原有DOM节点就会复用.

构造函数new去调用，其中传配置对象

 

• 红色容器被绿色Vue实例接管，橙色Vue实例虽然被执行，但没有作用，
• 一个Vue实例不能同时接管两个容器;一个容器只能被一个Vue实例接管.
• 容器与Vue实例一一对应.
• 将数据放入Vue实例中，以后修改数据的时候，可以自动更新，避免操作DOM
• .toUpperCase() 变大写
• {{}}里面必须写成JS表达式，不局限于Vue实例配置对象中的Key Value.
• for(){}，if(){}控制代码走向，不生成值

 如果构造函数没有用new去调用: 校验报错(Vue 里的this不是 Vue的实例对象)

---

 模板语法

 

加入v-bind:后，Vue就会把绿色框里的东西当成JS表达式去使用

v-bind可以给标签里的任何属性动态的去绑定值

v-bind: 可以简写为 :

插值语法往往用于指定标签体内容(起始标签和结束标签夹的内容)

指令语法管理标签属性

 一个对象里有两个重名的key，页面显示会显示后面的Value值.

 将数据放在多个层级，解决重名key的问题

---

 数据绑定

v-bind 最大特点: 单向数据绑定

data中数据一变，通过v-bind绑定，输入框的value值就发生变化.(橙色)

页面输入框的value值改变了，不能回头再影响data中的数据.(粉色)

 由于第二个输入框是通过v-model绑定的，页面中数据改变，可以回头影响data中的name.(连锁)

v-model需要绑定到有value的元素上，因为无法捕获数据的变化，所以不能回头影响数据的变化. 

v-model默认指向value，所以简写的时候苦役直接省略:value. 

---

 el与data的两种写法

也可以使用$mount的方法指定容器.

mount意为 挂载 ，将Vue实例解析内容挂载到页面上去.

data函数必须要返回一个对象，对象中的数据就是所需要的.

到组件部分后，data的写法强制为函数式，不然会报错.el的写法没有要求.

函数是Vue调用的，所以this是Vue实例对象. 

但是前提是函数为普通函数，箭头函数没有自己的this，所以this就是全局的window .