在JavaWeb的教程中，Vue和指令通常是前端框架的核心概念。Vue是一个轻量级的MVVM（Model-View-ViewModel）前端框架，指令是Vue的一种特殊属性，用来在模板中实现各种功能。
以下是一些常见的Vue指令：
v-text：更新元素的文本内容。v-html：更新元素的innerHTML，注意：使用时要注意XSS攻击，不要用于用户提交的数据。v-if：条件性的渲染元素，如果为false，则元素不会被渲染到DOM中。v-else：v-if的else块，必须跟在v-if或v-else-if的后面。v-else-if：v-if的else if块，必须跟在v-if或v-else-if的后面。v-show：根据表达式之真假，切换元素的display CSS属性。v-for：基于源数据多次渲染元素或模板块。v-on：绑定事件监听器，简写为@。v-bind：绑定属性，简写为:。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指令来控制元素的行为。