Par quoi commence la directive vue ?

La commande

vue commence par "v-". Dans Vue, les directives sont des fonctionnalités spéciales avec le préfixe « v- » qui agissent sur les éléments HTML ; le but des directives est d'appliquer leurs effets associés au DOM de manière réactive lorsque la valeur d'une expression change. Lorsqu'une directive est liée à un élément, la directive ajoute un comportement spécial à l'élément cible lié, de sorte que la directive peut être considérée comme un attribut HTML spécial.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Quelles sont les instructions de vue.js ? Quelle est la fonction ?

Les directives Vue.js sont des fonctionnalités spéciales avec le préfixe v-. La valeur d'un attribut de directive doit être une expression JavaScript unique (v-for est l'exception).

Vue.js fonctionne sur les éléments HTML. La directive fournit des fonctionnalités spéciales. Lorsque la directive est liée à un élément, la directive ajoutera des comportements spéciaux à l'élément cible lié. Nous pouvons considérer la directive comme un HTML spécial. attributs. La fonction de la directive

est la suivante : lorsque la valeur de l'expression change, ses effets associés sont appliqués au DOM de manière réactive.

Chaque instruction a son propre objectif Lorsque son expression liée change, elle affectera les modifications du DOM de manière réactive. Les modifications spécifiques dépendent de l’objectif de chaque instruction. Par exemple, la directive v-bind lie les valeurs d'attribut lorsque l'expression de liaison change, la valeur de l'attribut sur le DOM changera également en conséquence. [Recommandations associées : tutoriel vidéo vuejs, développement web front-end] La syntaxe de la commande v-bind指令是绑定属性值，当绑定的表达式发生改变，dom上属性的值也会发生对应的改变。【相关推荐：vuejs视频教程、web前端开发】

指令的语法是：v-指令:参数="表达式"（参数并不是绝对需要的）

参数

:后面跟着的就是参数，但并不一定所有的指令都会有参数，只有特定的指令会需要参数，这是由于指令的性质决定的。这里的参数和函数的参数是类似的，就好比我这个指令需要对应的参数才能使功能生效。

拿v-bind:type="type"来说，v-bind指令用于绑定属性值，那么需要绑定什么属性呢，光靠这个指令无法确定，所以需要参数来进一步确定。也就是v-bind:type，冒号后面跟着的type就是传入指令中的参数。告诉指令，我要绑定属性type和表达式的关联。

上面我们也说了，并不是所有的指令都需要参数。比如v-html指令，这个指令是绑定元素内部的html，功能点已经非常明确，不需要额外的参数去确定，只需要指令和表达式即可完成指令的功能。

表达式

""引号内的值就是表达式，表达式一般可以是一个可执行的js表达式。它与指令本身是有绑定关联的，类似传入指令的值。并且当表达式内的响应式数据发生变化，也会引发dom的变化。

常用的指令

指令一般都是vue内嵌实现的，我们只需要用就可以了。vue中是可以自定义指令的，但这不是我们本节的重点。接下来主要说说一些常用指令的用法和注意点。

v-bind

描述：绑定dom属性，绑定表达式与dom属性

语法：v-bind:属性="表达式" or :属性="表达式"

示例： 绑定输入框的类型为数值类型且禁用

<input :type="type" :disabled="disabled" />

data: {
    type: &#39;number&#39;,
    disabled: true
}

v-on

描述：绑定事件，监听dom上的事件，并绑定回调函数

语法：v-on:事件名="回调函数" or @事件名="回调函数"。事件绑定指令的表达式一般是回调函数，且该函数接受一个参数$event。当绑定的事件被触发就会执行绑定的函数

示例：当点击按钮的时候弹出对话框

<button @click="alert">有种你点我</button>

methods: {
    alert($event) {
        alert(&#39;有种你打我呀！&#39;)
    }
}

事件绑定的函数一般是在methods中定义的函数，但这边并不是绝对的。对于实例上存在的函数，都可以作为事件绑定的回调函数。

v-if

描述：dom元素显示判断，当表达式为真的时候，显示dom元素，否则销毁dom

语法：v-if="表达式"

est : v-command :parameter="expression"(le paramètre n'est pas absolument requis)

<p v-if="show">{{title}}</p>

data: {
    show: true
    title: &#39;v-if的用法&#39;
}

<p v-if="student === &#39;ll&#39;">lili</p>
<p v-else-if="student === &#39;mm&#39;">mingming</p>
<p v-else-if="student === &#39;hh&#39;">hanhan</p>
<p v-else>无</p>

data: {
    student: &#39;mm&#39;
}

<p v-if="show">{{title}}</p>

data: {
    show: true
    title: &#39;v-if的用法&#39;
}

<p v-if="student === &#39;ll&#39;">lili</p>
<p v-else-if="student === &#39;mm&#39;">mingming</p>
<p v-else-if="student === &#39;hh&#39;">hanhan</p>
<p v-else>无</p>

data: {
    student: &#39;mm&#39;
}

<p v-show="show">{{title}}</p>

data: {
    show: true
    title: &#39;v-if的用法&#39;
}

<p v-if="show" class="if">{{title}}</p>
<p v-show="show" class="show">{{title}}</p>

data: {
    show: false
    title: &#39;v-if的用法&#39;
}

<div id="app">
    <p>{{value}}</p>
    <input type="text" v-model="value">
</div>

<script>
let config = {
  el: &#39;#app&#39;,
  data: {
    value: &#39;我是初始值&#39;
  }
}
let vm = new Vue(config)
</script>

<div id="app">
<ul>
  <li v-for="item in list" :key="item.id">
    {{item.name}}
  </li>
</ul>
</div>

<script>
let config = {
  el: &#39;#app&#39;,
  data: {
    list: [{
      id: 1,
      name: &#39;lili&#39;
    }, {
      id: 2,
      name: &#39;mingming&#39;
    }]
  }
}
let vm = new Vue(config)

</script>