VUE框架（页面编程）-优快云博客

<template>  
  <div>  
    <p>{
  { message }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello, Vue!'  
    }  
  }  
}  
</script>

2. 指令（Directives）

指令是 Vue.js 模板中最常用的特性之一，它以 v- 开头。

v-bind: 用于响应式地更新 HTML 属性。
v-on: 用于监听 DOM 事件，并在触发时执行一些 JavaScript 代码。
v-if, v-else-if, v-else: 用于条件性地渲染一块内容。
v-for: 用于渲染一个列表的数据。
v-model: 创建在 input、textarea 元素和组件上使用的双向数据绑定。

例如：

<template>  
  <div>  
    <button v-bind:disabled="isButtonDisabled">Click Me</button>  
    <p v-if="showMessage">{
  { message }}</p>  
    <ul>  
      <li v-for="item in items" :key="item.id">{
  { item.text }}</li>  
    </ul>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      isButtonDisabled: true,  
      showMessage: true,  
      items: [  
        { id: 1, text: 'Item 1' },  
        { id: 2, text: 'Item 2' },  
      ]  
    }  
  }  
}  
</script>

3. 计算属性（Computed Properties）和方法（Methods）

你可以在 Vue 组件中使用计算属性和方法来执行更复杂的逻辑，并将结果绑定到模板中。计算属性是基于它们的依赖进行缓存的，而方法则是每次重新渲染时都会执行。

4. 过滤器（Filters）

Vue.js 允许你注册或获取全局的过滤器。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

5. 组件（Components）

Vue.js 的组件系统是构建用户界面的核心。组件可以扩展基本的 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。

6. 插槽（Slots）

Vue.js 提供了插槽功能，允许你在组件模板中预留一些占位符，这些占位符可以在父组件中被替换。

7. 自定义指令（Custom Directives）

除了核心功能默认提供的指令 (v-model 和 v-show 等)，Vue 也允许注册或获取自定义的指令。

这只是 Vue.js 模板语法的一部分，Vue.js 还有更多高级功能等待你去探索和学习。

二、条件渲染

在 Vue.js 框架中，条件渲染是一个非常重要的概念，它允许你根据组件的状态动态地显示或隐藏某些元素。Vue 提供了几种方式来实现条件渲染，包括 v-if、v-else-if、v-else 和 v-show 指令。

1. `v-if`、`v-else-if`、`v-else`

v-if 指令用于根据表达式的真假值来条件性地渲染一块内容。当表达式的值为真时，元素会被渲染；当表达式的值为假时，元素不会被渲染。

<template>  
  <div>  
    <p v-if="showMessage">Hello, Vue!</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      showMessage: true  
    }  
  }  
}  
</script>

你还可以使用 v-else 或 v-else-if 来添加额外的条件分支：

<template>  
  <div>  
    <p v-if="score > 90">Excellent</p>  
    <p v-else-if="score > 60">Good</p>  
    <p v-else>Poor</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      score: 85  
    }  
  }  
}  
</script>

2. `v-show`

v-show 指令的用法与 v-if 非常相似，但它不会真的销毁或重建元素，而是简单地切换元素的 CSS 属性 display。当 v-show 的表达式为真时，元素会被设置为 display: block；当表达式的值为假时，元素会被设置为 display: none。

<template>  
  <div>  
    <p v-show="isVisible">This will be shown or hidden based on isVisible.</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      isVisible: true  
    }  
  }  
}  
</script>

注意事项

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不论初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果你需要非常频繁地切换，则使用 v-show 较好；如果你在运行时条件很少改变，则使用 v-if 较好。

列表渲染中的条件渲染

在列表渲染中，你也可以结合使用 v-for 和 v-if 来实现基于每个列表项的条件渲染。然而，应当注意，当 v-for 和 v-if 同处于一个元素上时，v-if 具有比 v-for 更高的优先级。这意味着 v-if 将分别运行于每个 v-for 循环中。如果你希望基于整个列表的条件来跳过渲染，则应将 v-if 置于一个包裹元素上或计算属性/方法中。

<!-- 不推荐的做法，因为 v-if 将在每个 v-for 迭代中分别计算 -->  
<div v-for="item in items" v-if="item.active">  
  <!-- content -->  
</div>  
  
<!-- 推荐的做法，将 v-if 置于包裹元素上 -->  
<div v-if="activeItems.length">  
  <div v-for="item in activeItems" :key="item.id">  
    <!-- content -->  
  </div>  
</div>  
  
<script>  
export default {  
  data() {  
    return {  
      items: [  
        { id: 1, active: true },  
        { id: 2, active: false },  
        // ...  
      ]  
    }  
  },  
  computed: {  
    activeItems() {  
      return this.items.filter(item => item.active);  
    }  
  }  
}  
</script

三、列表渲染

在 Vue.js 框架中，列表渲染是一个非常重要的功能，它允许你根据数组来渲染一个元素列表。Vue 提供了 v-for 指令来实现列表渲染。

使用 `v-for` 进行列表渲染

v-for 指令可以基于源数据多次渲染元素或模板块。它对于渲染列表或表格数据非常有用。

基础用法

你可以使用 v-for 来遍历数组：

<template>  
  <div>  
    <ul>  
      <li v-for="(item, index) in items" :key="index">  
        {
  { item.text }}  
      </li>  
    </ul>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      items: [  
        { text: 'Item 1' },  
        { text: 'Item 2' },  
        // ...  
      ]  
    }  
  }  
}  
</script>

在这个例子中，v-for 指令遍历 items 数组，并为每个数组项创建一个 <li> 元素。item 是当前遍历到的数组项，index 是当前项的索引。

在对象上使用 `v-for`

你也可以使用 v-for 来遍历对象的属性：

<template>  
  <div>  
    <div v-for="(value, name, index) in object" :key="index">  
      {
  { name }}: {
  { value }}  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      object: {  
        firstName: 'John',  
        lastName: 'Doe',  
        age: 30  
      }  
    }  
  }  
}  
</script>

在这个例子中，value 是对象的属性值，name 是属性的键名，index 是属性的索引（注意，在对象上迭代时，索引是基于对象属性被插入的顺序，这个顺序可能不是按照键名的字