1. Qu'est-ce que Vue.js?
-
Vue (prononcé / vjuː /, similaire à view) est un cadre progressif pour la création d'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 à utiliser, mais également facile à intégrer avec des bibliothèques tierces ou des projets existants. D'autre part, lorsqu'il est combiné avec des chaînes d'outils modernes et diverses bibliothèques de prise en charge, Vue est également entièrement capable de fournir des pilotes pour des applications complexes d'une seule page.
-
Application couche par couche de bas en haut: En tant que cadre progressif, l'objectif à atteindre est de faciliter le développement incrémental du projet (plug and play).
Site officiel: https://cn.vuejs.org/v2/guide/ L'auteur You Yuxi est chinois.
2. Pourquoi utiliser Vue?
- Rendu déclaratif: la séparation des extrémités avant et arrière est la tendance future
- Cadre progressif: adapté à divers besoins commerciaux
- Simple et facile à apprendre: développé par des documents chinois, chinois, pas de barrières linguistiques, facile à comprendre et à apprendre
Troisièmement, l'introduction de Vue.js
- Utilisez un script pour introduire la bibliothèque vue.js dans la page html à utiliser.
<!-- 方式1：引用远程 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- 方式2：引用本地 -->
<script src="./vue包的存放目录/vue.min.js"></script>
- Scaffolding Vue-CLI: Il est très pratique d'utiliser le framework de script CLI fourni par vue.js pour créer le prototype du projet vue.js
Troisièmement, le programme d'entrée
1. Installation environnementale
Logiciel de développement: Visual Studio Code.
Pour plus de commodité, je l'ai téléchargé sur ma ressource CSDN et je peux cliquer pour télécharger: VSCodeSetup-x64-1.29.1.exe Après avoir
téléchargé le logiciel de développement, vous devez installer le plug-in correspondant.
Ouvrez le logiciel VS code, cliquez sur la dernière icône (extension) à gauche, recherchez les plugins suivants dans le centre commercial et cliquez sur installer.
Exemple:
2. Rédaction de code
Ensuite, commencez à écrire l'applet d'entrée.
Créez un répertoire vue_text et créez le fichier d'entrée 01_vue program.html dans le répertoire.
astuces: Dans le fichier d'entrée 01_vue program.html, saisissez le point d'exclamation en anglais sur la première ligne! ,
Puis cliquez sur Entrée pour générer automatiquement un morceau de code html initial comme suit:
Étapes d'écriture du code:
- Définissez html et introduisez vue.js
- Définissez la division "app", cette zone est prise en charge par vue
- Définissez l'instance Vue et prenez le contrôle de la zone d'application
- Définir le modèle (objet de données)
- Afficher les données dans "app"
En vous basant sur les étapes ci-dessus, comparez les exemples de code suivants:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue入门</title>
<!-- 1.创建HTML文件， 引入vue.js 有两种方式-->
<!-- 第一种 引入 vue.js的CDN地址 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"> </script> -->
<!-- 第二种 本地导入 -->
<script src="./js/vue.min.js"></script>
</head>
<body><!-- 2. 定义app div，此区域作为vue的接管区域 -->
<div id="app">
<!-- {
{}} 双括号是VUE中的差值表达式,将表达式的值输出到HTML页面 -->
<h2> {
{name}} </h2>
</div>
</body>
<script>
//3. 创建vue实例
var VM = new Vue({
//定义 Vue实例挂载的元素节点,表示vue接管该div
el:'#app',
//4.定义model模型数据对象
data:{
name:"格子衫"
}
});
</script>
</html>
3. Résultats de l’opération
Dans le fichier html, faites un clic droit sur «Ouvrir avec Live Sever» pour l'exécuter: il
sera affiché dans le navigateur:
4. Description
Le programme Vue est essentiellement écrit conformément au modèle ci-dessus, interpolant pour obtenir des données en div, définissant le point de montage el en js et définissant l'objet de données de données
1) {
{}}: expression d'interpolation
-
Quel est le rôle des expressions d'interpolation?
通常用来获取Vue实例中定义的数据(data) 属性节点中 不能够使用插值表达式
2) el: point de montage
-
Le rôle d'el?
定义 Vue实例挂载的元素节点,表示vue接管该区域 -
Quelle est la portée de Vue?
Vue会管理el选项命中的元素,及其内部元素 -
elEst-il possible d'utiliser d'autres sélecteurs lors de la sélection du point de montage?
可以,但是建议使用 ID选择器 -
Est-il possible de définir d'autres éléments DOM pour l'association?
可以,但是建议选择DIV, 不能使用HTML和Body标签
3) données: objet de données
- Les données utilisées dans Vue sont définies dans les données
- Les types complexes peuvent être écrits dans les données
- Lors du rendu de données complexes, suivez la syntaxe js.
Voici un exemple d'écriture de données complexes dans des données:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中data写复杂类型</title>
<!-- 1.创建HTML文件， 引入vue.js 有两种方式-->
<!-- 第一种 引入 vue.js的CDN地址 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"> </script> -->
<!-- 第二种 本地导入 -->
<script src="./js/vue.min.js"></script>
</head>
<body><!-- 2. 定义app div，此区域作为vue的接管区域 -->
<!-- 此区域作为vue的接管区域 -->
<div id="app">
{
{name}} <br>
{
{school.name}} {
{school.mobile}}<br>
<ul>
<li>{
{names[0]}}</li>
<li>{
{names[1]}}</li>
<li>{
{names[2]}}</li>
</ul>
</div>
</body>
<script>
//3. 创建vue实例
var VM = new Vue({
//定义 Vue实例挂载的元素节点,表示vue接管该div
el:'#app',
//4.定义model模型数据对象
data:{
name:"格子衫",
//对象类型数据
school:{
name:"xx教育",
mobile:"1001001"
},
//数组类型
names:["小斌","张百万","刘能"]
}
});
</script>
</html>
résultat de l'opération:
Quatrièmement, les avantages du rendu déclaratif
Avez-vous remarqué que le rendu déclaratif est mentionné dans le deuxième point "Pourquoi utiliser Vue?" Dans le contenu de cet article.
Alors, qu'est-ce que le rendu déclaratif?
Vue中的声明式渲染，简单理解就是我们声明数据，Vue帮我们将数据渲染到HTML.
Jetons un coup d'œil à un exemple de la différence entre l'utilisation de jQuery et Vue pour restituer des données html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{
{name}}</h2>
</div>
</body>
<!--
jQuery中，如果 DOM 发生变化, js代码也需要做相应的改变，高耦合 .
<script src="./js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function () {
$("#app").append("<h2>Hello Word! !</h2>");
});
</script> -->
<!-- 在用 Vue中，只需要定义好展示数据，并把它放在 DOM 合适的位置就可以. -->
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app", //挂载点
data: {
name: "Hello Word! !", },
});
</script>
</html>
- Comme vous pouvez le voir, jQuery natif, si vous souhaitez rendre des données html, vous devez obtenir l'objet dom dans le code JS, puis ajouter les données, et parfois vous devez incorporer des balises html. N'est-ce pas gênant et peu pratique de lire le code? De plus, l'opération dom réduira les performances et affectera l'expérience utilisateur.
- Dans la méthode Vue, définissez d'abord les données dans JS via Vue, puis lors de l'écriture html, vous pouvez directement écrire le nom de la variable sur la balise que vous souhaitez affecter, et les deux côtés sont dynamiquement liés par le nom d'attribut, qui est clair en un coup d'oeil!
O, ce qui précède est l'introduction à Vue.js, est-ce facile ~
astuces: Si vous souhaitez en savoir plus, vous pouvez vous rendre sur le site officiel. Le lien est donné
au début de l'article. En même temps, j'ai également téléchargé la démo de chaque point de connaissance de Vue vers la ressource. Les commentaires sont très détaillés. Les amis qui en ont besoin peuvent cliquer pour télécharger: Exemple de code Vue frontale