vue指令和事件绑定

简单的说，npm就是JavaScript的包管理工具。类似Java语法中的maven，gradle，python中的pip。
去nodejs官网下载nodejs傻瓜式安装即可，默认会安装npm。但是这个npm可能不是最新的，更新：npm install npm@latest -g

使用步骤：

初始化：npm init
安装包：npm install jquery@2.0.1 --save --save 或者 npm install jquery --save
卸载包：npm uninstall jquery --save
vue的MVVM模式
MVP

Model 层：模型层
Presenter 层：呈现层(业务逻辑控制层)
View 层：视图层（DOM 展示）
过程：视图层（V）发出一个事件交给控制器（P 呈现层）,控制器调用 Ajax 去模型层（M）获取数据 ; 或者直接去视图层（V）进行DOM 操作。控制器（P 呈现层）是核心，是模型层（M）和 视图层（V） 的中转站，其中大部分代码在进行 DOM 操作
之前的开发是面向 DOM 开发，其中模型层（M）比较边缘(仅仅从M取点数据)
MVVM

MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）

M：模型层，主要负责业务数据相关，在vue中模型层可以先简单地看作是vue对象的data属性里定义的变量值
V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；
VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；
理解MVVM双向绑定是开始vue的第一步，其次编写vue代码是面向数据(模型层)开发，这是和以前单纯地写jquery代码很大的一点不同
指令
官网这样描述指令：指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
其实说的更明白一点，指令系统可看作是一种声明式编程，原先写jquery代码的时候都是写js代码去页面 添加，删除DOM等，修改DOM的属性和class都需要拿到这个DOM，然后调用prop，addClass这一系列方法命令页面做改动。但是vue不一样，它的思想是把我们想要显示或隐藏的DOM写出来，DOM可能需要(也可能不需要)的属性等都写出来，也就是说把 我们 期望的 都 声明在html文档中，根据model的改变去控制DOM,也就是说页面需要的DOM在刚开始就已经全部写在html文档中了，几乎不存在后续在添加删除DOM，只是需要面向数据编程即可，极大地解放了双手，哈哈！

v-if 操作
v-if 的作用是控制DOM是否显示
官网示例：

Now you see me

Now you don't

v-if=‘str' 表示是否显示取决于vue对象的data属性中定义的str变量的真假与否

hello

    <h3 v-if="love === hzw">海贼王</h3>
    <h3 v-else-if="love === hyrz">火影忍者</h3>
    <h3 v-else>微动漫</h3>
</div>

<script src="./vue.js"></script>
<script>
     var app = new Vue({
         el: '#app',   // 表示id 为app 的标签使用vue的语法
         data: {
             str: true,
             love:hzw,
         }
     })

</script>

v-show
v-show也是控制dom显示与否的，v-show 没有v-if的多个判断功能，而且v-show是把dom渲染到文档中，只是加了display:none而已。
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。