VUE_学习笔记

1.模板语法之差值语法 ：{{ }}

主要研究：{{ 这里可以写什么}}

1. 在data中声明的变量、函数等都可以。
2. 常量
3. 只要是合法的javascript表达式，都可以。
4. 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date等。（见Vue官网）

2.模板语法之指令语法： v-？？？

指令语法：

1. 什么事指令？有什么用？
   指令的职责是：当表达式的值改变是，将其产生的连带影响，响应式的作用于DOM。
2. Vue框架中的所有指令的名字都已“v-”开始。
3. 差值是写在标签体当中的，那么指令写在哪里呢？
   Vue框架中所有的指令都是以html标签的属性形式存在的，
   例如：<span 指令是写在这里的>{{这是插值语法的位置}}< /span >
   注意：虽然指令是写在标签的属性位置上，但是这个指令浏览器是无法直接看懂的；
   是需要先让Vue框架进行编译的，编译之后的内容浏览器是可以看懂的。
4. 指令的语法规则：
   指令的一个完成的语法格式：
   <HTML标签 v-指令名：参数=“javascript表达式”></HTML标签>
   表达式：之前在插值语法中{{这里可以写什么}}，那么指令中的表达式就可以写什么。实际上是一样的 。
   但是需要注意的是：在指令中的表达式位置不能在外层再添加一个{{}}。
   不是所有的指令都有参数和表达式：
   有的指令，不需要参数，也不需要表达式，例如v-once
   有的指令，不需要参数，但是需要表达式，例如v-if="表达式"
   有的指令，既需要参数，又需要表达式，例如v-bind:参数="表达式"
5. v-once 指令
   作用： 只渲染元素一次。随后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
6. v-if=“表达式” 指令
   作用：表达式的执行结果需要是一个布尔类型的数据：true或false
   true：这个指令所在的标签，会被渲染到浏览器当中。
   false：这个指令所在的标签，不会被渲染到浏览器当中。
7. v-bind 指令
   它是一个负责动态绑定的指令。
   v-bind 指令详解：
   1.这个指令是干啥的？
   它可以让HTML标签的某个属性的值阐释动态的效果。
   2.v-bind指令的语法格式：
   <HTML标签 v-bind:参数=“表达式”></HTML标签>
   3.v-bind指令的编译原理：
   编译前：<HTML标签 v-bind:参数=“表达式”></HTML标签>
   编译后：<HTML标签 参数=“表达式的执行结果”></HTML标签>
   注意两项：
   第一：在编译的时候v-bind后面的“参数名”会被编译为HTML标签的“属性名”。
   第二：表达式会关联data，当data发声改变之后，表达式的执行结果就会发声变化。
   所以，连带的就会产生动态效果。
   4.v-bind因为很常用，所以Vue框架对该指令提供了一种简写方式：
   只是针对v-bind提供了一下简写方式：
   < img :src=“imgPath”>
   5.什么时候使用插值语法？设么时候使用指令？
   凡是标签体当中的内容要想动态，需要使用插值语法；
   只要想HTML标签的属性动态，需要使用指令语法。