（一）VUE简单入门

Vue 是什么？

VUE是一套用于构建用户界面的渐进式框架。

官方参考文档：https://cn.vuejs.org

特点

• 核心库只关注视图层，容易上手
• 便于与第三方库或既有项目整合

本文从自己的角度对VUE进行一个梳理，尽量把知识串联起来，省略了一些安装配置的过程，本文是vue的第一节入门课。

举个例子入门啦

这就是一个简单的vue应用，我们接下来拆解一下都做了什么

一、引用文件

不管是从网上直接引用，还是放在本地导入，都需要引入vue文件
（新手先不要急着安装 vue-cli，可以先熟悉一下vue语法 ）

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

二、vue.js的核心模版语法

视图部分：

<div id="app">
  {{ message }}
</div>

脚本部分

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

现在数据和 DOM 已经被建立了关联。
（注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。）

三、指令介绍

指令是 Vue 提供的特殊 attribute，会在渲染的 DOM 上应用特殊的响应式行为。
指令带有前缀 v-

• v-cloak
• v-text
• v-html
• v-pre
• v-once
• v-model 双向数据绑定
• v-on 绑定事件
• v-bind 更新 HTML 属性

这里详细说三个指令：
v-model： 双向数据绑定指令

• 当数据发生变化的时候，视图也就发生变化
• 当视图发生变化的时候，数据也会跟着同步变化

不要急，马上我们会详细说一下MVVM这个概念，有助于理解为什么vue设计成现在这样的模版语法和指令绑定规则

v-model限制在 <input>、<select>、<textarea>、components中使用

<div id="app">
      <div>{{msg}}</div>
      <div>
          当输入框中内容改变的时候，页面上的msg会自动更新
        <input type="text" v-model='msg'>
      </div>
  </div>

v-on：事件绑定
v-on:click 通常会缩写成@click

<button v-on:click = 'handled()'>绑定了在methods里的handle函数</button>

v-bind：响应更新
v-bind 指令被用来响应地更新 HTML 属性，v-bind:src可以缩写为 :src;

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

v-bind可以绑定对象，绑定class 和绑定style等，改天再详细介绍

四、MVVM概念

MVVM是前端视图层的概念，主要关注的是视图层分离。MVVM把前端的视图层，分为了三部分：
Model：数据层Vue，Vue中的数据都放在 data 里面；
View：视图Vue，即我们的HTML页面；
View-model：把Model和View关联起来的就ViewModel，通过控制器将数据和视图层建立联系（vm其实就是Vue实例的简写）

参考文章：https://www.cnblogs.com/iovec/p/7840228.html

五、事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

修饰符这块拓展起来还有按键修饰符、自定义按键修饰符、系统修饰符等等，这里不再具体说明，可以查看vue官方文档，解释的很全面

https://cn.vuejs.org/v2/guide/events.html

六、条件与循环

v-if 和v-else-if

   <div v-if="type === 'A'">
       A
    </div>
    <div v-else-if="type === 'B'">
       B
    </div>
    <div v-else-if="type === 'C'">
       C
    </div>
    <div v-else>
       Not A/B/C
    </div>
//注意这个顺序哈 v-if开始
//v-else-if要跟在v-if 或者v-else-if后面
//v-else也要跟在跟在v-if 或者v-else-if
<script>
    new Vue({
      el: '#app',
      data: {
        type: 'C'
      }
    })
</script>

v-if VS v-show
v-show和v-if的用法很类似，官方说明他们两的区别在于：

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

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

简单理解就是：
v-show本质是display设置为none，控制隐藏，但实际上已经渲染完成了。
v-if不停的创建销毁，是动态地向DOM树添加删除dom元素。

v-for
听名字就是事件循环

<ul id="example-1">
   <!-- 循环结构-遍历数组  
    item 是我们自己定义的一个名字  代表数组里面的每一项  
    items对应的是 data中的数组-->
  <li v-for="item in items">
    {{ item.message }}
  </li> 

</ul>
<script>
 new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]，
   
  }
})
</script>

官方说不建议v-if 和v-for一起使用，如果非要用， v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，

<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>

key
用 key 管理可复用的元素，key来给每个节点做一个唯一标识，所以当你希望“这两个元素是完全独立的，不要复用它们”的时候，使用key。

这么做主要是为了更高效的更新虚拟DOM。

总结：