Vue概述

一、Vue概述
1、什么是Vue？
Vue是第三方开发的基于MVVM设计模式的渐进式纯前端js框架。
2、如何使用Vue？
（1）定义界面:整个界面必须包裹在唯一一个父元素内，习惯上将其命名为id=“app”
（2）找到整个界面上可能发生变化的位置，用{{}}标记出来
（3）找到触发事件的元素，在开始标签中绑定事件处理函数:@事件名=“函数名”
（4）定义data对象和methods对象分别保存界面所需的所有变量和事件处理函数
（5）创建一个new Vue（）对象
3、Vue的绑定原理
（1）创建一个vue类型的子对象。引入data对象，并为其中每一个变量都添加访问器属性
（2）引入并打散methods对象。则其中的函数默认直接属于new Vue()对象，因此methods中的方法要想访问data中的变量，必须加this.变量名
（3）构建虚拟DOM树。
简单来说，Vue的绑定原理就是访问器属性＋虚拟DOM树＋观察者模式（待定）
（4）虚拟DOM树的优点
①内容少，仅保存可能变化的元素。
②遍历快。
③避免大量重复代码。（自动执行DOM增删改查操作）
④效率高。每次变量更改时只改变个别受影响的元素。

二、Vue指令
1、v-bind
如果元素的属性值可能随变量自动变化，就不能用{{}}标记。
<元素 v-bind:属性名=“js表达式”>
简写: <元素 :属性名=“js表达式”>
2、v-show
控制一个元素的显示/隐藏。
<元素 v-show=“返回bool类型的js表达式”>
如果执行结果为false，当前元素自动添加display:none。
3、v-if和v-else
当两个元素二选一显示时，
<元素1 v-if=“返回bool值的表达式”>
<元素2 v-else>
两个元素必须紧挨着

v-show是通过display:none来控制显示/隐藏
v-if通过删除元素的方式来控制显示/隐藏，效率略低

4、v-else-if
多个元素多选一时
<元素1 v-if=“返回bool值的表达式”>
<元素2 v-else-if=“返回bool值的表达式”>
……
<元素n v-else>
多个元素必须紧挨着
5、v-for
根据数组中的内容反复生成多个相同结构的元素，统一了for in和for of，既能遍历数组。又可遍历对象。
<元素 v-for="（value,i） of 数组/对象">
需要强调的是:
凡是用v-for时，必须同时绑定一个 :key 属性
v-for还接着数数。
<元素 v-for=“i of 一个整数” :key=“i”>
6、v-on
事件绑定
<元素 v-on:事件名=“处理函数名（实参值）”>
简写<元素 @事件名=“处理函数名（实参值）”>

笔试题
既想用事件对象，又要传入自定义实参值
手动使用vue提供的$event关键词代替e，手动传参。
<元素  @事件名="处理函数（$event,实参值）">
methods:{
    处理函数（e,形参1）{
        //e得到的就是DOM中的对象，用法也和DOM中一样
    }
}

7、v-html
绑定的变量值是一段html代码，业必须使用v-html代替{{}}。
<元素 v-html=“变量或js表达式”> </元素>
8、v-cloak和v-text
防止用户短暂看到{{}}
<元素 v-cloak>
<元素 v-text=“变量或js表达式”></元素>
9、v-once
有些绑定只在首次加载时，修改一次，之后