vue n'est pas un framework CSS front-end, mais un framework JavaScript front-end. Vue est un framework JS progressif pour la création d'interfaces utilisateur. Il s'agit d'un framework frontal basé sur le modèle de conception MVVM et se concentre sur la couche View. Avantages de Vue.js : 1. Petite taille ; 2. Basé sur le DOM virtuel, efficacité opérationnelle plus élevée ; 3. Liaison de données bidirectionnelle, de sorte que les développeurs n'ont plus besoin d'exploiter les objets DOM et consacrent plus d'énergie à la logique métier Ci-dessus 4. Écologie riche et faible coût d’apprentissage.
L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.
Qu'est-ce que vue
Vue (prononcé /vjuː/, similaire à view) est un framework JavaScript progressif permettant de créer des interfaces utilisateur. Contrairement à d’autres grands frameworks, Vue est conçu pour être appliqué couche par couche de bas en haut. La bibliothèque principale de Vue se concentre uniquement sur la couche de vue, qui est non seulement facile à démarrer, mais également facile à intégrer à des bibliothèques tierces ou à des projets existants. D'un autre côté, lorsqu'il est combiné avec une chaîne d'outils moderne et diverses bibliothèques de support, Vue est pleinement capable de fournir des pilotes pour des applications complexes d'une seule page (SPA).
L'objectif de Vue.js est d'implémenter une liaison de données réactive et des composants de vue composés via l'API la plus simple possible.
Vue.js lui-même n'est pas un framework complet - il se concentre uniquement sur la couche de vue. Il est donc très facile à apprendre et très facile à intégrer à d’autres bibliothèques ou à des projets existants. D'un autre côté, Vue.js peut également alimenter des applications complexes d'une seule page lorsqu'il est utilisé avec des outils associés et des bibliothèques de support.
Avantages de Vue.js
Petite taille : seulement 33 ko après compression ;
Efficacité de fonctionnement plus élevée : basé sur le DOM virtuel, on peut effectuer divers calculs via JavaScript à l'avance et convertir le DOM A final. technologie qui calcule et optimise les opérations. Puisque cette opération DOM est une opération de prétraitement et n'opère pas réellement le DOM, elle est appelée DOM virtuel
Liaison de données bidirectionnelle : permet aux développeurs de ne plus avoir à exploiter les objets DOM ; Mettez plus d'énergie dans la logique métier ;
Écologie riche et faible coût d'apprentissage : il existe sur le marché un grand nombre de cadres et de composants d'interface utilisateur matures et stables basés sur vue.js, qui peuvent être utilisés pour réaliser un développement rapide ; débutants Convivial, facile à démarrer et beaucoup de matériel d'apprentissage
Principe du framework VUE
L'objet Vue lie les éléments à modifier dans la page et les variables dans les données. , il surveillera toujours les valeurs des variables dans les données. Lorsque la valeur change, l'élément qui y est lié sera automatiquement trouvé et l'élément changera en conséquence. Le processus de modification de l'élément ne nécessite pas d'intervention manuelle, ce qui améliore le développement. efficacité, et ce processus ne nécessite pas d'opérations DOM fréquentes comme JavaScript. La modification de la structure de la page ne surveille qu'une zone, ce qui améliore l'efficacité de l'exécution.
Relation Vue.js et MVVM :
vue framework est un framework frontal basé sur le modèle de conception MVVM, dans lequel l'objet Vue est le modèle de vue VM dans le modèle de conception MVVM.
MVVM est l'abréviation de Model-View-ViewModel. Il s'agit d'un modèle architectural basé sur le développement front-end. Son cœur est de fournir une liaison de données bidirectionnelle entre View et ViewModel, ce qui permet aux changements d'état de ViewModel d'être automatiquement effectués. transmis à View, c'est ce qu'on appelle la liaison de données bidirectionnelle.
Vue.js est une bibliothèque Javascript qui fournit une liaison de données bidirectionnelle de style MVVM, en se concentrant sur la couche View. Au cœur se trouve le ViewModel dans MVVM. ViewModel est responsable de la connexion de View et Model pour garantir la cohérence de la vue et des données. Cette architecture légère rend le développement front-end plus efficace et plus pratique.
La couche Modèle représente le modèle de données, et la logique métier pour la modification et le fonctionnement des données peut également être définie dans le Modèle ;
View représente le composant d'interface utilisateur, qui est responsable de la conversion du modèle de données en interface utilisateur pour l'affichage.
ViewModel est un objet View et Model synchrone.
Sous l'architecture MVVM, ViewModel connecte la couche View et la couche Model via une liaison de données bidirectionnelle, et la synchronisation entre View et Model est entièrement automatique sans intervention humaine, les développeurs n'ont donc pas besoin de se concentrer sur la logique métier. pour faire fonctionner manuellement le DOM, et il n'est pas nécessaire de prêter attention à la synchronisation de l'état des données. La maintenance de l'état des données complexes est entièrement gérée par MVVM.
Démarrez l'installation de vue.js
Installation des outils de débogage Vue Devtools : Vous pouvez installer l'outil vue Devtools dans Google Chrome pour mieux examiner et déboguer les applications Vue.
Site officiel de Vue.js Adresse de téléchargement : http://vuejs.org/guide/installation.html
Installez la version correspondante selon vos propres exigences de production Le site officiel propose une variété de méthodes pour installer vue. version indépendante.
L'adresse après l'avoir téléchargé : https://vuejs.org/js/vue.js
Pour utiliser la version indépendante, vous pouvez directement importer l'url en utilisant la balise script Vue qui sera enregistrée en tant que variable globale.
La première instance de vue :
..>标签用来声明HTML文档的编写标准,放在最开头位置,可写可不写.
和是中必须有的元素.
里面必须有<title>标签,<meta>和<style>可选.
charset属性指定HTML文档的编码为utf-8.
<script>标签里面的url即为我下载的vue独立版本的地址.src标签指定超链接.
View 层 - Div之间的代码属于html的view层
id指定HTML的唯一属性.
{{ }} 用于输出对象属性和函数返回值.
Model 层 - JavaScript代码如下(需放在指定的HTML元素之后)
el标签为实例提供挂载元素.用来联立view层和model.
data 用于定义属性.里面的内容也即最后的运行结果.</style>
</title>filtre vue "|", et L'utilisation des pipelines sous Linux est similaire, c'est-à-dire que la sortie du niveau supérieur est utilisée comme entrée du niveau suivant
HTML 中的<!--...--> 是注释标签,Split用于分割字符串,join是把数组拼接成为字符串. 整个代码就是调用了vue中过滤器的用法,使用了vue的内置函数和自定义的函数对data里面定义的属性进行了转换大写,反转的操作.
vue – jugement conditionnel
<h1>~<h6>用来表示标题的层级关系.<h1>表示最大. 在 Vue 中，我们使用 v-if 指令实现同样的功能,和其他编程语言的条件判断逻辑一样.条件成立才会执行相应的代码. <h1>Yes</h1> 也可以用 v-else 添加一个“else 块”： <h1>Yes</h1> <h1>No</h1> 同样也可以添加v-else-if在多种条件下进行判断.</h1> </h6> </h1>
Exemple 1 :
Exemple 2 :
当ok为true的时候输出了指定的代码Hello!,相应的ok为false时候没有任何输出.
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
顾名思义，get为取值，set为赋值.
创建一个实例，isMe；此时，isMe是没有name属性的，当我们调用isMe.name时，我们会进入到get name(){...}中，先判断
isMe是否有name属性，答案是否定的，那麽就添加一个name属性并给它赋值；如果有name属性，那就返回name属性。
你可以把get看成一个取值的函数，函数的返回值就是它拿到的值。
set属性理解，当我给实例赋值：
isMe.name="周神"此时，会进入set name(val){...}；形参val就是我赋给name属性的值，在这个函数里，我就可以做很多事了，
比如双向绑定！因为这个值的每次改变都必须经过set，其他方式是改变不了它的，相当于一个万能的监听器。
计算属性关键词: computed: 整个代码进行的流程: 1. data 属性初始化 getter setter(可理解为取值和赋值) 2. computed 计算属性初始化，提供的函数将用作属性 vm.reversedMessage 的 getter 3. 当首次获取 reversedMessage 计算属性的值时，dep 开始依赖收集. 4. 在执行 message getter 方法时，如果 dep 处于依赖收集状态，则判定 message 为 reversedMessage 的依赖，并建立依赖关系 5. 当 message 发生变化时，根据依赖关系，触发 reverseMessage 的重新计算
Vous pouvez transmettre un tableau à v-bind:class pour appliquer une liste de classes. Text-danger écrasera activeClass, donc. le résultat d'affichage est rouge.
L'exemple suivant utilise une expression ternaire Cela signifie que errorClass existe toujours mais activeClass ne peut être affiché que lorsque isActive est vrai.
vue用法之–事件处理器:v-on指令用来事件监听.
以下示例调用了v-on指令来监听按钮的点击变化,每次点击counter加1最后做一个输出.
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器， 通过它调用在 Vue 实例中定义的方法： methods是定义的函数. 以下示例同样是使用v-on来监听按钮的变化.当点击按钮会调用自定义的函数reverseMessage 来对data里面定义的message进行反转拼接操作.
say()实际是一条JS语句，带有括号的就叫内联处理器.相当于直接使用v-on来监听一条js语句,当点击按钮时进行调用say语句进行输出.
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通过由点(.)表示的指令后缀来调用修饰符。 .stop .prevent .capture .self .once <!-- 阻止单击事件冒泡 --> <a></a> <!-- 提交事件不再重载页面 -->
...
...
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： <!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input> 全部的按键别名： .enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta 实例: <!-- Alt + C的ASCll码为67 --> <input> <!-- Ctrl + Click --> <p>Do something</p>
你可以用 v-model 指令在表单,,元素上创建双向数据绑定。V-model指令会自动根据控件类型自动选取正确的方法来更新元素.在input输入框中我们可以使用 v-model 指令来实现双向数据绑定.
以下实例将js代码单独分离出来用src标签引入即可.在主程序里面看起来代码量比较少. 使用了v-model指令将输入框内容就行了双向绑定.会自动对页面数据变化做出响应.
输出:
更改输入框数据查看效果
以上实例中 {{message}} 会根据输入框 input 的改变而改变，如果你不想让其变化可以修改为：{{* message }}
v-model对input和textarea框进行双向数据绑定:
Placeholder是一个动态变量可以实现动态绑定.input单行文本框,textarea多行文本框. style标签用于定义一些代码的呈现样式,后面会有详细讲解. 本实例就是使用v-model指令对单行和多行文本框进行了双向数据绑定.当我们修改文本框内容,vue会自动响应页面数据变化.
v-model对复选框的双向数据绑定
<input>标签用于收集用户信息.type规定了input元素的类型,value指定了输入字段的初始值. checkbox为复选框类型. <span>标签被用来组合文档中的行内元素. <br>是换行标签. <label> 标签为 input 元素定义标注（标记）,label 元素不会向用户呈现任何特殊效果。 不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。</label></span>
v-model对单选按钮的双向绑定: radio为单选按钮类型
v-model对select下拉列表的双向绑定:
option 元素定义下拉列表中的一个选项。浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个 元素显示。option 元素位于 select 元素内部,必须与select元素配合使用不然没意义。<option> 标签可以在不带有任何属性的 情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。</option></select> </option>
v-model修饰符
.lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ,从而转变为在change 事件中同步,也就是在失去焦点或者按下回车键才更新. <!-- 在 "change" 而不是 "input" 事件中更新 --> <input> .number 如果想自动将用户的输入值转为 Number 类型，可以添加一个修饰符number给v-model 来处理输入值：否则你输入的是数字 但是类型却是字符串String,在数字输入框中有用. <input> 这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。 .trim 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入： <input>
（学习视频分享：web前端入门）
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
