VUE学习系列笔记day01

VUE官网：https://vuejs.org/v2/api/
  1、vue可以当做库使用（引入js，可调用api），也可以当做框架使用。其是一个渐进式框架，渐进层次为：声明式渲染–组件系统–客户端路由–集中式状态管理–项目构建
  2、{{}}为插值表达式，可将数据填充到html标签中，可支持一些简单数据表达式的计算.
  el:元素挂载位置（值可以是css选择器，如：#app id选择器定位；此外也可以是DOM元素，如:document.getElementById(“app”)获取）
  data:是模型数据，值类型为对象
  3、Vue代码运行原理：Vue代码通过vue框架编译为原生js代码再执行。
  4、Vue指令(可以识别变量与方法)：本质为自定义属性，指令的格式应该已v-开始。使用v-cloak指令可以解决插值表达式存在的“闪动”问题（该问题出现的原因是vue是先将插值表达式显示在界面，编译后再进行替换，所以刷新时会有一瞬间显示插值表达式即出现我们说的闪动问题，所以v-cloak解决原理为先隐藏插值表达式，替换好值在显示最终的值）

/*v-cloak指令用法
1.提供样式
[v-cloak]{
Display: none;
}
2.在插值表达式所在标签中添加v-cloak即可。如<div v-cloak>{{msg}}</div>
*/

  5、数据填充指令，除插值表达式外，还有：
    5.1 v-text:与插值显示相同，可显示纯文本，但是它没有闪动问题；vue指令的使用为v-text=”变量名”
    5.2v-html:显示的内容可以包含html标签，可以解释html标签，填充HTML片段而不是将它只当做纯文本，（但其有安全隐患，跨站脚本攻击，建议本网站内部数据使用，来自第三方数据不可用）
    5.3v-pre:用于填充原始文本信息，不对插值表达式{{}}与各种特殊字符进行编译，跳过编译过程
  6、数据响应式：数据的变化会导致页面内容显示的变化；数据绑定：将数据填充到标签中（其绑定内容是数据与标签/DOM/模板（三者是同一事物的不同称呼）将二者关联；数据绑定是数据响应式的，要将其与数据双向绑定区分）。
  v-once指令，其所修饰的dom标签只进行编译一次（后续数据改变时不会进行编译响应，显示内容不会改变）。应用场景为，显示信息后续无需修改，使用v-once进行修饰可以提高性能。
  7、数据双向绑定，指令v-model：经常使用在表单数据绑定上，当数据发生变化时，会影响到页面数据绑定内容的变化（显示），当页面数据绑定内容变化时，数据的值也发生变化。
  8、数据双向绑定，主要使用到了MVVM的思想（分而治之）:M（model）、V(view)、VM(View-Model) Model数据与View视图之间不能直接交互，而是通过VM进行交互，其交互底层实现，从V->M是通过事件监听的方式实现交互，从M->V是通过数据绑定的方式实现交互。
  9、事件绑定：通过v-on指令来处理事件，v-on可以缩写为@;举例，如点击事件v-οnclick=@click ；点击事件的事件函数调用方式有两种，
  第一种是直接绑定函数名称如<button @click=”say”>Hello</button> ，
  第二种是调用函数方式如<button @click=”say()”>Hello</button>
在vue实例中定义的变量在实例方法中进行访问方式为 this.变量名称 此处this代表了vue实例对象。
  10、第9点中的两种函数调用方式区别：当需要传递参数的时候使用第二种不需要的时候使用第一种，
  第一种方式默认传递了事件的对象$event作为函数的第一个参数（定义形参接收即可）;
  第二种如果需要接收事件的对象则事件对象必须作为最后一个参数显示传递（名称固定为$event），并定义形参接收.通过事件对象$event可以获取到触发事件对象target（$event.target）,通过target可以获取标签的名称与里面的内容。
  11、事件修饰符（更多事件修饰符参考官方文档）：
   .stop可用于阻止冒泡事件（冒泡事件即当点击一个div或button或其它标签时，由于该div与其上层div都定义了click事件，此时会执行该div的执行事件，再执行其父容器的点击事情，冒泡执行…），使得只执行本div的点击事件；用法：@click.stop=“method”
  .prevent 用于阻止默认行为，如：阻止a标签有href值时点击可以跳转的默认行为（虽然其没有点击事件），而实现当点击a标签时可以执行点击事件，执行自定义函数内容中的操作。用法：@click.prevent =“method”
  12、按键修饰符（更多按键修饰符参考官方文档）：使用在键盘事件上过滤当那个按键点击时进行相关事件触发
  .enter回车键，除点击外，按Enter键也可以进行触发事件，用法：@keyup.enter=”method”
  .delete删除键,除点击外，按delete键也可以进行触发事件，用法：@keyup.delete=”method”.
  自定义按键修饰符：其名称是自定义的，但是对应的值必须是按键对应的event.keyCode的值，其定义为 Vue.config.keyCodes.自定义名称=65（按键对应值，65对应a），使用：v-on:keyup.自定义名称=”method” ，使用自定义按键修饰符好处，能够比较方便直观的使用各个按键进行触发事件。
  13、属性绑定(未绑定前不能动态处理即不能识别变量)：v-bind,可缩写为 : 如v-bind:href=”” -> :href=”” ;
  14、数据双向绑定实质分析：通过数据绑定与事件绑定实现，例：<input v-on:input=’msg=$event.target.value’ v-bind:value=”msg” type=”text”>其也等价于<input @input=’msg=$event.target.value’ :value=”msg” type=”text”>其也等价于<input v-model=”msg” type=”text”>
  分析：通过数据绑定:value将msg变量数据绑定到input标签中，当msg变量数据发生变化是input表单内容也会发生变化；通过事件绑定@input，当在表单中改变值时，会触发msg=$event.target.value事件，通过获取时间对象$event.target获取到表单的值value，并将该值覆盖到msg变量中，从而实现了当改变表单内容时，变量值也改变。
  15、样式绑定：通过v-bind:class=”class”即:class=”class” ;class样式处理有两种方式，
  第一种:对象语法
例:<div :class=”{class1:isClass1,class2:isClass,...,...}”></div>其中class1 2…代表样式名，isClass1 2 …代表控制相应样式是否进行显示的变量
  第二种:数组语法 例<div :class=”[Class1,Class2,...,...]”></div>其中Class1 Class2 …代表相应的样式变量（即在data域中定义的变量，变量的值为相应的样式名，如果需要改变样式显示情况，则直接操作相应的样式变量赋值与空，即可不显示，赋值为样式名即可显示）
  一些细节：1.对象与数组绑定可以结合使用：<div :class=”[Class1,Class2,{class3:isClass3},...]”></div>控制方法和以前一样。
2.class的值可以简化操作（实用）
  在vue实例的data域中进行相关数组及对象的定义使得在标签上显示的内容得到简化，如，可以在data中定义对象arrClasses与objClasses，arrClasses:[‘class1’,’class2’,...,...]此处class1、class2 … 不为样式变量名，而就是样式名，如果想操作对应样式，可以直接操作数组中的值，简化后标签上可以直接使用：

<div :class=”arrClasses”></div>

objClasses:{class1:true,class2:false,...,...},此处class1、class2 … 不为样式变量名，而就是样式名，如果想操作对应样式，可以直接操作相应对象的值，如：this.objClasses.class1=false简化后标签上可以直接使用：<div :class=”objClasses”></div>
  3.如果有默认的class属性会保留，会与绑定的结合在一块
  注：以上提到的样式名在中进行定义
  16、样式绑定（了解不太常用）：除了通过v-bind:class=”class”之外，还可以通过 :style ，其用法与class绑定相似
  第一种对象语法（与class不同在于此处要使用标准的css样式变量名），例：

<div :style=”{color:自定义颜色变量,fontSize:自定义字体尺寸变量}”></div>

  第二种数组语法例：<div :style=”[自定义类型名称1，自定义类型名称2,....]”></div>
  17、分支循环结构：
  1.分支结构：v-if、v-else、v-else-if、v-show,其中除v-else外都可单独使用，例图：

  此外v-if与v-show都可实现控制是否显示功能，区别为，v-if是通过操作DOM元素是否渲染实现的（当为false是页面html上无此dom），对性能耗费较大；v-show是控制元素是否显示（已经渲染到界面上了，所以不要通过删除与添加dom来达到控制显示目的，性能耗费较小）；通过二者特点比较，但内容是不需要频繁显示与不显示之间切换则用v-if，反之使用v-show。
  2.循环结构:v-for，
  可以用于遍历数组v-for=”(item,index) in arrlist”其中item为数组中的每一项，index为数组下标，从0开始； 在使用循环结构时，可以添加:key （其作用为，帮助Vue区分不同元素，从而提高系统性能，如果数组中与id可以使用id作为表示，没有的话可以用index）
可以用于遍历对象 v-for=”(value,key,index) in objlist”其中value为值，key为键，index为下标，从0开始。

  注：增强for循环 for(var item : list)推荐在去对象数组，链表数组时使用，因为取不到下标，不能动态删除，所以不推荐在普通数组中使用（ArrayList）。