Vue随想

vue是 MVVM 框架

• M： Model 数据
• V： View 视图
• VM: ViewModel 视图模型

mustache语法糖对数据类型的支持（ js语法的支持 ）

数据类型：

​ 第一种划分：

​ 基础数据类型： number string boolean

​ 复杂数据类型: Object( array function )

​ 特殊数据类型: null undefined

​ 第二种划分：

​ 初始数据类型: number string boolean null undefined

​ 引用数据类型: object( array function )

​ 结论： mustache支持我们js的数据类型

conosle.log 和 alert 在我们mustache语法中是不支持的

Vue 属性绑定

为了操作dom，我们给这种属性起了一个好听的名字

​ Vue 1.0 叫它 属性指令（ 借鉴Angular来的 ）

​ Vue 2.0 统称为 ‘指令’

​ 指令是用一个 v-xxx 表示

​ 指令是用来操作dom

​ Vue中不允许直接操作dom

​ mustache语法 — 属性写法 的属性值是直接写数据的，不需要使用 {{ }}

​

	1. v-if  vs  v-show 区别
    2. 实用： 项目中 如何选择这两个使用

          - v-if 操作的是dom元素（ 组件 ） 的创建或是销毁
          - v-show 操作的是dom元素的display属性
          - v-if可以有多种使用形式： 单路分支， 多路分支， 双路分支
          - v-show 只能写一个单路形式

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

vue中如何给dom添加类名

1. 直接在dom上绑定类名
2. vue中类名绑定 - 对象形式
3. vue中类名绑定的形式 - 数组的形式 【 推荐 】

​ 格式： v-bind:class = “[ 数据 ]”

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

为什么要绑定类名

​ 指令是用来操作dom

​ 目的： 为了将来通过数据来操作类名，类名操作dom

Vue绑定事件

采用在标签中绑定事件

通过属性的形式绑定在dom身上

<div v-on:click = "事件名称"></div>
 v-on：可简写为@
     <div @click = "事件名称"></div>

事件对象也可以正常使用

   在事件处理程序中， 传入形参e就可以了  e即事件对象 event

   问题： 如果事件处理程序中有三个参数，第三个参数才是事件对象e,如何实现

   分析： 我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个undefined

   解决： 在函数执行时，传入一个实际参数 $event 来代表事件对象

v-model

​ 双向数据绑定

​ 默认绑定value值

​ v-model应用于表单元素