Vue基础指令

一、Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

1. 渐进式：就是当我们刚学习了一点Vue之后，我们就可以使用我们所学习这一点的Vue来实现我们项目中的某一个小功能，然后随着我们对Vue的深入学习，可以逐渐地把我们的项目中的各个部分都替换为Vue。
2. 自底向上：

二、基础指令

1. 使用 { {…}}（双大括号）。
2. v-text 把变量名直接放在双引号中。
3. v-html 当变量中有标签时，可以解析。
4. v-pre 变量和大括号都不会被解析。可以用来显示原始的标签。
5. v-on 绑定事件，在选项methods中定义相关函数，v-on快捷写法@。
6. v-once 只渲染一次元素，当变量的值再改变时，页面中的值也不会变。
7. v-cloak CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
8. v-show 显示或隐藏，双引号中写布尔类型的表达式或者变量，当值为假时，标签中的内容不显示，为真才显示 。

v-show是通过改变css来显示和隐藏的，即display:none和block，而v-if是通过销毁和创建节点来显示和隐藏的，即当内容不显示时，该标签也不存在。两者在性能上有区别，即，当你要想让元素内容频繁的被显示或隐藏时，适合用v-show,因为v-if或创建或删除节点，效率比较低

9. v-if和v-else-if后面要跟上条件， v-else 元素，后面没有条件，必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
10. v-for 遍历，可以遍历：1，数组；2，对象；3，定值 。
    （1）遍历普通数组，第一个变量item为值，第二个变量index为下标，只写一个变量时为值；遍历对象数组，遍历回来的value是一个对象，要想获取对象的值,需要点对应的key，然后获取对应的value。
    （2）遍历对象 第一个变量为value，第二个变量为key，只写一个变量时为值。
    （3）遍历定值 输出从1到指定值。
11. v-model v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。

<div id="app">
			{
  {msg}}
			<!-- 使用 {
   {...}}（双大括号） -->
			<p>{
  {msg}}</p>
			<!-- v-text 把变量名直接放在双引号中-->
			 <p v-text="msg"></p> 
			 <!-- v-html 当变量中有标签时，可以解析-->
			 <p v-html="msg"></p>
			 <!-- v-pre 变量和大括号都不会被解析。可以用来显示原始的标签。 -->
			 <p v-pre>{
  { msg }}</p>
			 <!-- v-on 绑定事件，在选项methods中定义相关函数，v-on快捷写法@ -->
			 <button