Vue基础和语法

Vue：一套用于构建用户界面的渐进式JavaScript框架

优点：简单，高效，生态丰富（插件多）

• 用来更新元素的 文本内容。如果要更新部分的 文本内容，需要使用 {{ }} 插值。用于操作纯文本，它会替代显示对应的数据对象上的值。

• {{msg}}

 （2）v-html

• 用于输出html，v-html会将其当html标签解析后输出，用于更新元素的 innerHTML。
• 注意：内容按普通 HTML 插入 ，不会作为 Vue 模板进行编译

• v-html可以标签和渲染数据
• v-text不能转义标签只能渲染数据 

• 根据表达式之真假值，切换元素的 display 的属性。当条件变化时该指令触发过渡效果。
• Tips：带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元的  display属性。

• 根据表达式的值有条件地渲染元素。用于条件性地渲染一块内容。这块内容只会在指令的表达式返回值为真的时候被渲染。
• 当条件变化时该指令触发过渡效果。

•  充当 v-if 的“else-if 块”，可以连续使用
• v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

•  表示 v-if 的“else 块”
• v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

  A


  B


  C


  Not A/B/C

• 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
• 用在普通元素上时，只能监听原生dom事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
• 缩写：@
•  

  按钮{{count}}
  

• 基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
• 在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。
• v-for 在严格情况下 要添加 :key 唯一标识

•   
  			{{index+1}}:{{item.title}}