vue.js
- Qu'est-ce que Vue?
- Un cadre progressif
JavaScript
- À quoi sert Vue?
- L'effet est
构建用户界面
- Quelles sont les caractéristiques?
- Les caractéristiques sont:,
渐进式il suffit de prêter attention aux données
Utilisation basique
Point de vue du mont
- 1. Fonction de point de montage el: indiquez à l'instance de vue vers laquelle vous voulez rendre les données dans les données
- 2. Précautions
- (1) Le point de montage peut utiliser le sélecteur d'id (vue recommandée), le sélecteur de classe, le sélecteur d'étiquette
- Fondamentalement, les sélecteurs d'identifiants sont utilisés dans le développement pour garantir l'unicité des balises HTML
- Si vous voulez que les données dans data soient efficaces pour plusieurs éléments, vous pouvez monter l'instance vue sur l'élément parent
- (2) Si le sélecteur sélectionne plusieurs éléments, seul le premier élément sera sélectionné (la couche inférieure est queryselector)
- (3) Le point de montage ne peut pas être défini comme étiquette
htmletbody(le programme signale une erreur)
- (1) Le point de montage peut utiliser le sélecteur d'id (vue recommandée), le sélecteur de classe, le sélecteur d'étiquette
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1.导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.HTML结构 -->
<div id="app">
<div id="app">
{
{
message }}
</div>
<hr>
<div id="box" class="container">
{
{
message }}
</div>
<hr>
<div class="container">
{
{
message }}
</div>
</div>
<script>
/* 3.初始化配置 */
/*
(1)Vue是导入vue.js之后得到的一个全局构造函数
(2)调用Vue构造函数 创建一个vue实例对象
*/
let app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
- el : element est utilisé pour définir le point de montage de l'instance vue (vers quel élément rendre les données)
- data : les données à rendre
- Basé sur les données: Vue rendra automatiquement la page en fonction des données dans les données (aucune opération DOM requise)
- méthodes : enregistrez les méthodes en vue
Expression d'interpolation
Expression d'interpolation (syntaxe du modèle) Portail de documents du site Web officiel
- Vue rendra automatiquement les données de l'objet de données dans la vue
- Remarque:
(1) { {}}: Expression d'interpolation, également appelée syntaxe de barbe
(2) Fonction de l'expression d'interpolation: Rendre les données sur la page
(3) Prise en charge de l'opération binaire { {age + 1}}
(4) Prise en charge Arithmétique ternaire { {age> 30? 'Old man': '小 鲜肉'}}
(5) Prend en charge la syntaxe de valeur des tableaux et des objets
(6) Ne prend pas en charge la syntaxe de branche et la syntaxe de boucle
Vue instructions communes
Portail de documents du site Web officiel de Vue Command
L'essence des instructions Vue est la suivante: Vue ajoute des attributs aux balises HTML
Chaque instruction dans Vue commence par v- (utilisé pour distinguer les attributs natifs des balises HTML)
