近期开始学习前端技术，只是做个简单的记录。。。。

Vue的基本代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 导入Vue的包 -->
  <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
  <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
  <!-- Vue 实例所控制的这个元素区域，就是我们的 V  -->
  <div id="app">
    <p>{{ msg }}</p>
  </div>
  <script>
    // 2. 创建一个Vue的实例
    // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    var vm = new Vue({
      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域
      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据
        msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
      }
    })
  </script>
</body>
</html>

v-cloak：能够解决 插值表达式闪烁的问题；
v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空；
v-bind: 是 Vue中，提供的用于绑定属性的指令，注意： v-bind: 指令可以被简写为 :要绑定的属性；
v-if 的特点：每次都会重新删除或创建元素
v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式

v-if 有较高的切换性能消耗
v-show 有较高的初始渲染消耗

如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if 

<div v-text="msg2"></div>
<div v-html="msg2">1212112</div>

v-on:（click、mouseover...） 事件绑定机制；
v-bind Vue提供的属性绑定机制 缩写是 :
v-on Vue提供的事件绑定机制 缩写是 @

v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定
注意： v-model 只能运用在 表单元素中
input(radio, text, address, email....) select checkbox textarea

事件修饰符

使用  .stop  阻止冒泡;
<input type="button" value="戳他" @click.stop="btnHandler">

<!-- 使用 .prevent 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

<!-使用  .capture 实现捕获触发事件的机制 -->
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>

<--使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
<div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
</div>

<!-- 使用 .once 只触发一次事件处理函数 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> 

<!-- 演示： .stop 和 .self 的区别 -->
<div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="btnHandler">
      </div>
</div>

<!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
<div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
</div>