Vue 完整版，写在 HTML 里

Vue 完整版，写在选项里

Vue 非完整版，配合 xxx.vue 文件

语法：

1. template 中不是 HTML，是 XML。必须写自闭合的 /。

为什么要写 XML，因为更容易写编译器（语法严格）。

1. script 中不能写 template ，写了会被覆盖
2. script 中 data 必须写成函数，如果不是函数，会出现一个 data 被多个组件共用的情况。

   引入：

   然后在另外一个地方写下如下代码
   
   组件名第一个字母最好大写，避免跟原生组件名产生冲突
   例如：我写一个 Button 组件 ，要跟原生的 区别开

如何展示内容

表达式

• {{ obhect.a }} 表达式
• {{ n + 1 }} 可以写任何运算
• {{ fn(n) }} 可以调用函数
• 如果值为 undefined 或 null 就不显示
• 另一种写法为<div v-text="表达式"></div>
  

HTML 内容：
假设 data. X 值为 <strong>hi</ strong>
<div v-html="x"></div>即可显示粗体的 hi

如何展示 花括号{{}}：
<div v-pre>{{n}}</div>
v-pre 不会对模板进行编译

绑定属性

绑定 src

<img v-bind:src="x"/> 可以简写为 <img :src="x" />

绑定对象

绑定事件

v-on: 事件名

v-if / v-else / v-else-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

循环

v-for

此指令之值，必须使用特定语法 alias in expression(表达式中的别名)

为当前遍历的元素提供别名：

另外也可以为数组索引指定别名 (或者用于对象的键)：

如果你用了 v-for，必须要加一个 :key=""，不写的话，会有一个警告。
最好把不会重合，唯一性的值放在里面。

用 key 管理可复用的元素

在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。

Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可：

现在每次切换，输入框都会被重新渲染。但是 元素依然会被高效复用，因为它们没有添加 key attribute。

⚠️:key="index" 某些时候会有 bug

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。

展示、隐藏属性

v-show

根据条件展示元素

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

⚠️v-show 不支持 <template> 元素，也不支持 v-else。