mustache语法糖

mustache

jsx: javascript + xml
可以让我们在dom结构中输写javascript
{{ msg }}
是 this.msg 简写
this.$data.msg -> this.msg -> msg

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

数据类型：
第一种划分：
– 基础数据类型： number string boolean
– 复杂数据类型: Object( array function )
– 特殊数据类型: null undefined
第二种划分：
初始数据类型: number string boolean null undefined
引用数据类型: object( array function )

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

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

mustache 绑定 dom的属性
案例： v-html
分析： 发现dom元素直接有了一个内容
这种属性绑定就是为了操作dom
结论： 这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字

Vue 1.0 叫它 属性指令（ 借鉴Angular来的 ）
Vue 2.0 统称为 ‘指令’

指令是用一个 v-xxx 表示
指令是用来操作dom

Vue中不允许直接操作dom

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

问题： 我们说vue是 MVVM 框架， 那么谁是 M 谁是 V 谁是 VM
M： Model 数据
V： View 视图
VM: ViewModel 视图模型（ new Vue() ）

指令： ( 是绑定在dom属性上 )

v-html: 可以解析标签型数据( 可以将一个数据展示在一个dom的内容中（ 相当于使用了 innerHTML ）)
v-text：可以将一个数据展示在一个dom的内容中（ 相当于使用了 innerHTML ）
条件渲染的指令
v-show
可以控制一个dom的显示隐藏（ 这个指令操作的是dom的display属性 ）
v-if
可以控制一个dom的存在与否（ 创建 和 销毁 ）
v-else
v-else-if

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 较好。

v-for

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

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

事件

    问题： javascript事件添加有几种形式
    1. 事件绑定
    dom.onclick = function () {}
    dom: 事件源
    on: 绑定事件的形式
    click: 事件类型
    function（）{} 事件处理函数
    2. 事件监听 ： addeventListener
    3. 直接在标签中绑定事件
    <div onclick = "事件名称"></div>
    vue采用了第三种，也是通过属性的形式绑定在dom身上
    <div v-on:click = "事件名称"></div>

问题： 函数调用有哪些方法？
直接调用 ()
事件
事件对象也可以正常使用
在事件处理程序中， 写e就可以了

事件对象也可以正常使用
在事件处理程序中， 写e就可以了
问题： 如果事件处理程序中有三个参数，第三个参数才是事件对象e,如何实现
分析： 我们发现事件处理程序中的第三个参数 e 不在是事件对象了，而是一个undefined
解决： 在函数执行时，传入一个实际参数 $event 来代表事件对象

问题： 如果我们通过 length = 0 , 来清空一个数组，那么vue检测不到这个变动
解决方法： 使用splice
问题： 我们直接修改一个数组下的一个数据时，发现下标不能检测变动了
解决方法： 使用 Vue.set / this.$set

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