在ES6之前，我们不管是变量还是常量都使用var来定义，这种设计很不合理，存在很大的缺陷，因为它没有块级作用域的概念，什么是块级作用域呢？就是一个变量它可以作用的范围，没有块级作用域会产生什么后果呢？我们来看下面的代码：
<body> <button>点击</button> <button>点击</button> <button>点击</button> <button>点击</button> <button>点击</button> <script> if (true){ var a=10; } console.log(a);//10 变量定义在if里面，可是外面依旧可以访问 var btns=document.getElementsByTagName("button"); for (var i=0;i<btns.length;i++){ btns[i].addEventListener("click",function () { console.log("第"+i+"个按钮被点击");//不管点击哪一个都是“第5个按钮被点击” }) } </script> </body>从上面可以看到，我们在if块内定义的变量a在块外部依旧可以被访问到；还有for循环给按钮添加点击事件，不管点击哪一个按钮，都是输出“第5个按钮被点击”，这显然不是我们所希望的。那么这是为什么呢？因为没有块级作用域的话，使用var定义的变量将可以在任何地方使用，没有范围限制，从你定义它开始，你就可以在任何地方对它进行修改，也就是说，在上面的for循环中，我们每一次进行的i++操作，其实都是在对同一个i变量操作，当我们触发点击事件时，输出的i也是同一个。那么我们现在进行修改，将var变为let
var btns=document.getElementsByTagName("button"); for (let i=0;i<btns.length;i++){ btns[i].addEventListener("click",function () { console.log("第"+i+"个按钮被点击");//不管点击哪一个都是“第5个按钮被点击” }) }输出结果：
第0个按钮被点击
第1个按钮被点击
第2个按钮被点击
第3个按钮被点击
第4个按钮被点击
let是我们的ES6的语法，用于定义变量，并且它是有块级作用域的，所以不会发生那样的状况。
当我们希望所修饰的标识符无法被再次进行赋值的时候，我们可以使用const。
<script> const a='aa'; //a='bb'; 无法对const修饰的标识符再次赋值 // const b; 必须给const修饰的标识符赋值 //const指向的对象不能修改，但是对象的属性是可以修改的 const obj={ name: 'zs', age: 23 } obj.name='ls'; obj.age=23; </script>我们知道，现在的网站开发经常需要处理和用户的交互，比如用户点击、拖拽或者键盘敲入等，我们需要去监听这些事件，并作出反应，在vue中，我们通过
v-on指令来监听事件。
有的时候，我们希望在触发事件时传递一些参数给调用的方法。
<body> <div id="app"> <!--方法没有参数，调用时可以省略括号--> <button @click="btn1Click">按钮1</button> <!--如果方法需要一个参数： 1、不传入参数的话，不会报错，形参为undefined 2、如果省略小括号的话，那么默认会将浏览器 生成的event事件对象作为参数传入 --> <!-- <button @Click="btn2Click(123)">按钮2</button>--> <!-- <button @Click="btn2Click()">按钮2</button>--> <button @Click="btn2Click">按钮2</button> <!--如果方法需要一个参数，同时也需要event事件对象: 1、如果省略小括号，会将浏览器生成的event事件对象传给第一个参数 2、如果想传入字符串，不能省略引号，因为会被vue实例当作变量处理 3、如果想将event事件对象传入的话，不能直接使用`event`，需要使用`$event` --> <!-- <button @click="btn3Click">按钮3</button>--> <!-- <button @click="btn3Click(123,'abc')">按钮3</button>--> <button @click="btn3Click(123,$event)">按钮3</button> <button>按钮4</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", methods: { btn1Click() { console.log("btn1Click"); }, btn2Click(aa) { console.log("----------",aa); }, btn3Click(aa,event){ console.log(aa); console.log(event); } } }) </script> </body>通过判断表达式是否为true来决定是否渲染元素
<body> <div id="app"> <h2 v-if="score>=80">优秀</h2> <h2 v-else-if="score>=70">良好</h2> <h2 v-else="score>=60">及格</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { score: 86 } }) </script> </body>案例：点击按钮，在账户登录和邮箱登录之间来回切换
<body> <div id="app"> <span v-if="flag"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号"/> </span> <span v-else> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="用户邮箱"/> </span> <button @click="change">切换类型</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { flag: true }, methods: { change() { this.flag=!this.flag; } } }) </script> </body>注：上面的小案例会有一点小问题，就是当我们使用账户登录时输入文本，点击切换到邮箱登录依旧会保留输入的文本。
原因：Vue在渲染DOM的时候，出于性能考虑，会尽可能的复用已存在的元素，而不是创建新的元素，在上面的案例中，会被复用，所以保留了之前输入的文本，如果我们不希望被复用的话，可以给两个加上不同的key，vue在渲染DOM的时候，会判断两个元素的key是否一致，如果不一致则不会进行复用。
<input type="text" id="username" placeholder="用户账号" key="username"/> <input type="text" id="email" placeholder="用户邮箱" key="email"/>v-show是一个指令，和v-if类似，通过表达式的值来决定是否显示某个元素。
<body> <div id="app"> <h2 v-if="isShow" id="aaa">{{message}}</h2> <h2 v-show="isShow" id="bbb">{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message: "哈哈", isShow: true } }) </script> </body>当我们通过控制台将isShow的值设为false时，使用v-if的元素直接从DOM中剔除了，而v-show的元素只是将display设为none
