1, Vue Présentation
VSCode plug-in installé
derrière le développement du projet Vue, développé en utilisant le fichier unique .vue, vous avez besoin de plugins pour nous aider à identifier le fichier .vue. plug-in extension installée, le point d'ouvrir pour voir un bouton de recherche, vous pouvez entrer un mot - clé que vous voulez plug-ins.
raccourci VScode: https: //segmentfault.com/a/1190000007688656
Ici, nous vous recommandons le développement de plusieurs plug-ins Vue:
jshint: js vérifier les spécifications du code.
Embellir: une clé pour embellir le plug-in code.
Vetur: fiche d'identification de fichier .vue.
Javascript (ES6) extraits de code: ES6 conseils de grammaire.
Auto Renommer Tag: renommer automatiquement l' étiquette. Mots - clefs apparaissent par paires, modifier la balise de début, balise de fin suivra les modifications.
Auto Fermer Tag: balise de fermeture automatique. Pour quelques balises non standard, ce plug-in est encore très utile.
aide vue: Certains codes rapides Vue du code.
icônes vscode-: en option. Il offre de nombreux types d'icônes de dossiers, différents types de dossiers à l' aide d' une autre icône, faire de recherche de fichiers plus intuitive.
ouvrir dans le navigateur: en option. À droite , vous pouvez choisir d'ouvrir la page en cours dans votre navigateur par défaut.
Introduction Vue
Vue (prononciation / VJU /, similaire à la vue) est un cadre pour la construction séparés avant et arrière. Le début est un bon joueurs nationaux, en particulier la pluie Creek développé, maintenant cadre frontal populaire du monde. développement web Vue est très simple à utiliser, et d' améliorer l'environnement technique, des activistes communautaires, avant et après la fin des compétences nécessaires pour trouver un emploi!
l' installation et l' utilisation Vue
vue montage globalement divisés trois voies, le premier est référencé par une balise de script , le second est monté par npm (noeud gestionnaire de paquets), en troisième ligne de commande de vue-cli installer . En tant que débutant, il est recommandé d'installer directement via la première approche centrée son esprit sur l' apprentissage vue, plutôt que sur l'installation.
# 开发环境
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
# 或者是指定版本号
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
# 或者是下载代码保存到本地
<script src="lib/vue.js"></script>
# 生产环境，使用压缩后的文件
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
Utilisation de base
Pour utiliser d' abord besoin Vue, Vue pour créer un objet et transmettre des paramètres dans cet objet el, el paramètre signifie élément, utilisé pour trouver un élément racine pour rendre vue. Et nous pouvons transmettre des données de paramètres, toutes les valeurs de données peuvent être utilisées directement dans l'élément racine {} {} utilisé. Exemple de code est le suivant:
<!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">
username_1:<p>{{username}}</p>
password_1:<p>{{password}}</p>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
"username":"用户名",
"password":"用户密码"
}
})
</script>
D'autres méthodes peuvent également être ajoutés en vue objet, cette propriété conçu pour stocker des fonctions propres. Les méthodes de fonction peuvent également être utilisés dans le modèle, et la fonction dans les méthodes d'accès aux données de la valeur, il vous suffit d'accéder à la propriété par ce nom, pas this.data supplémentaires noms d'attributs d'accès .:
<!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">
username_1:<p>{{username}}</p>
password_1:<p>{{password}}</p>
<!--{{demo(username)}}-->
<button v-on:click="demo">按一下，名称改变</button>
<!-- <button @click="demo">按一下，名称改变</button> 和上句代码效果相同-->
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
"username":"用户名",
"password":"用户密码"
},
methods:{
// demo:function(name){
// return "晚上好， " + this.username + "*****"+name
//
// }
demo:function(){
this.username = "用户名称改变了"
}
}
})
</script>
2, la syntaxe du modèle Vue
Texte
en html par {} {} (accolades) peuvent Vue insérer des données dans un objet page web. Vue et aussi longtemps que la valeur de l' objet correspondant est modifiée, alors la valeur de la accolades html bis va changer immédiatement.
<div id="app">
<p>{{username}}</p>
<button v-on:click="change">点击修改</button>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
"username": "xxx"
},
methods: {
change: function(){
this.username = 'China';
}
}
});
</script>
Si dans le html {{}}, le premier rendu de temps est terminé, ne veulent pas suivre les données post-changement et le changement, vous pouvez utiliser le v-fois des instructions.
<p v-once>{{username}}</p>
Affichage HTML natif
Parfois , notre objet Vue, ou un code html de base est revenu pour nous un segment natif, nous avons besoin de rendre, alors si le rendu direct par {}, tout comme la chaîne de code html. Cette fois -ci, nous pouvons être réalisé par des instructions v-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">
username_1:<p>{{username}}</p>
password_1:<p>{{password}}</p>
<!--{{demo(username)}}-->
<button v-on:click="demo">按一下，名称改变</button>
<!-- <button @click="demo">按一下，名称改变</button> 和上句代码效果相同-->
<p v-html="code">{{code}}</p>
<div v-html="code">{{code}}</div>
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
"username":"用户名",
"password":"用户密码",
"code":"<a href='https://www.baidu.com'>百度</a>"
},
methods:{
demo:function(){
this.username = "用户名称改变了"
}
}
})
</script>
Attributs de liaison
si nous voulons lier nos variables d'objet Vue sur les propriétés de l'élément HTML, la nécessité de parvenir à v-bind, et la propriété est pas nécessaire dans le {{}}.
<!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">
username_1:<p>{{username}}</p>
password_1:<p>{{password}}</p>
<!--{{demo(username)}}-->
<button v-on:click="demo">按一下，名称改变</button>
<!-- <button @click="demo">按一下，名称改变</button> 和上句代码效果相同-->
<p v-html="code">{{code}}</p>
<div v-html="code">{{code}}</div>
<img v-bind:src="image" alt="">
<!-- 属性是不需要在{{}}中的-->
</div>
</body>
</html>
<!--vue引入 必须联网-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el:"#app",
data:{
"username":"用户名",
"password":"用户密码",
"code":"<a href='https://www.baidu.com'>百度</a>",
"image":"https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png"
},
methods:{
// demo:function(name){
// return "晚上好， " + this.username + "*****"+name
//
// }
demo:function(){
this.username = "用户名称改变了"
}
}
})
</script>
