Vue基础

vue初步认识

1. Vue.js是尤雨溪的个人项目
2. Vue.js是一个MVVM框架
3. Vue.js也是一个javascript的渐进式框架（ 越学越难 ）

随着前端项目的逻辑越来越复杂和难以维护，那么前端这边引进了后端的架构思想（ MV* ）

M Model 数据层
V View 视图层
VM ViewModel 视图模型（ 业务逻辑 VM 是 由 P 改名得来的）
P Presenter 提出者（ Controller 改名得来的 ）
C Controller 控制器 ( 业务逻辑 )

MV*的图示

MVC
| C改名为P
MVP
| P更像是媒人了（ 连接 M V 的桥梁）
MVVM
| VM 是 由 p改名得来的 VM 和 V 的关系更加的亲密
| “MVVM”:双向数据绑定，View的变动，映射在 ViewModel，反之一样

注意：
我们以上的这几个框架都是： 单向数据流（ 数据由 父级 流向 子级 ）

Vue 指令

{{ }} 是mustache语法糖，用来展示数据的
mustache支持我们js的数据类型
比如：
初始数据类型: number string boolean null undefined
引用数据类型: object( array function )
conosle.log 和 alert 在我们mustache语法中是不支持的

指令是用一个 v-xxx 表示

指令是用来操作dom

Vue中不允许直接操作dom

一些常见指令：
v-html: 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（ 相当于使用了 innerHTML ）)
v-text：可以将一个数据展示在一个dom的内容中（ 相当于使用了 textContent ）

条件渲染的指令
v-show
可以控制一个dom的显示隐藏（ 这个指令操作的是dom的display属性 ）
v-if
可以控制一个dom的存在与否（ 创建 和 销毁 ）
v-else
v-else-if

v-show与v-if 的区别
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。

v-for
1. 数组 v-for = " (item,index) in arr " item是arr中每一个元素
2. 对象 v-for = "(item,key,index) in obj " item是obj的属性值

key:
给没一个循环的列表添加一个唯一的标识

  使用指令 v-bind 来绑定 key

  <div v-for = " (item,index) in lists" v-bind: key = " item.id "></div>

  如果有id，那么我们就使用id，如果没有，我们才会选择index

  v-bind: 单项数据绑定： 将一个数据绑定在一个dom的属性上

  简写

  <div v-for = " (item,index) in lists" :key = " item.id "></div>

类名的绑定

vue中如何给dom添加类名
1. 直接在dom上绑定类名
2. vue中类名绑定 - 对象形式
目的： dom身上属性class 要和 数据绑定
解决：v-bind
数据中key，我们起的和绑定的对象中的key一样，但是你得知道这两个东西不一样

          <p :class = "{ size,bg_color }"></p>
              size是自定义的属性， 它的属性值是undefined， 相当于是false
          <p :class = "{ size: true, bg_color: true }"></p>
              size也是自定义属性，他的属性是true,那么就会加上去
          <p :class = "{ [s]: true, [bg_color]: true }"></p>
            
      格式： v-bind:class = "{ 属性： boolean }"
      格式： v-bind:class = "{ [data]： boolean }"

  3. vue中类名绑定的形式 - 数组的形式    【 推荐 】
    格式： v-bind:class = "[ 数据 ]"

  4. 类名绑定不会覆盖原先的类名

  5. 为什么要绑定类名
      指令是用来操作dom
      目的： 为了将来通过数据来操作类名，类名操作dom

事件的绑定

事件
v-on使用

   事件源
   事件绑定形式
   事件类型
   事件处理程序

   v-on:eventType = " handlerName "

   简写  v-on:    --- > @

v-model
双向数据绑定
默认绑定value值
v-model应用于表单元素