Javaweb第四章---Vue与指令(入门必看）

在JavaWeb的教程中，Vue和指令通常是前端框架的核心概念。Vue是一个轻量级的MVVM（Model-View-ViewModel）前端框架，指令是Vue的一种特殊属性，用来在模板中实现各种功能。

以下是一些常见的Vue指令：

1. v-text：更新元素的文本内容。
2. v-html：更新元素的innerHTML，注意：使用时要注意XSS攻击，不要用于用户提交的数据。
3. v-if：条件性的渲染元素，如果为false，则元素不会被渲染到DOM中。
4. v-else：v-if的else块，必须跟在v-if或v-else-if的后面。
5. v-else-if：v-if的else if块，必须跟在v-if或v-else-if的后面。
6. v-show：根据表达式之真假，切换元素的display CSS属性。
7. v-for：基于源数据多次渲染元素或模板块。
8. v-on：绑定事件监听器，简写为@。
9. v-bind：绑定属性，简写为:。
10. v-model：在表单元素和应用状态之间创建双向绑定。

示例代码：

<div id="app">
  <!-- 文本插值 -->
  <p>{{ message }}</p>
 
  <!-- v-text指令 -->
  <div v-text="message"></div>
 
  <!-- v-html指令 -->
  <div v-html="rawHtml"></div>
 
  <!-- v-if指令 -->
  <div v-if="seen">现在你看到我了</div>
 
  <!-- v-show指令 -->
  <div v-show="seen">现在我显示了</div>
 
  <!-- v-for指令 -->
  <ul>
    <li v-for="item in items">{{ item.text }}</li>
  </ul>
 
  <!-- v-on指令，简写为@ -->
  <button @click="doSomething">点击我</button>
 
  <!-- v-bind指令，简写为: -->
  <img :src="imageSrc">
 
  <!-- v-model指令，用于表单输入和应用状态的双向绑定 -->
  <input v-model="message">
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    seen: true,
    rawHtml: '<span style="color: red;">这是红色的文本</span>',
    items: [
      { text: 'Item 1' },
      { text: 'Item 2' }
    ],
    imageSrc: 'path_to_image.jpg'
  },
  methods: {
    doSomething: function() {
      console.log('Something done.');
    }
  }
})
</script>

在这个例子中，我们创建了一个Vue实例，并通过el属性指定了挂载点。data属性包含了一些响应式的数据，methods属性包含了一些可以在Vue实例上调用的方法。在HTML模板中，我们使用了多个Vue指令来控制元素的行为。