Tutoriel Vue pour novices

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>Cette fois je vous propose un tutoriel d'introduction à vue. Quelles sont les précautions pour les novices en vue ? Voici des cas pratiques, jetons un oeil.

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>Apprentissage recommandé :

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>" Tutoriel vidéo Vue Framework "

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>《 Tutoriel vidéo d'introduction à vue.js 》

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>《 Vue2.0 Démarrage et apprentissage du didacticiel vidéo de projet pratique 》

<p style='margin: 0px; padding: 0px; font-weight: 500; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif; line-height: 1.1; color: rgb(0, 0, 0); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;'>《 Tutoriel vidéo Vue.js de la Mai Zi Academy 》

1. Qu'est-ce que vue

Vue est un framework progressif pour créer des interfaces utilisateur.

Seulement 17 Ko après compression

2. Construction de l'environnement Vue

. Si vous le téléchargez directement et l'importez à l'aide de la balise , Vue sera enregistrée en tant que variable globale.

Cependant, il est recommandé d'utiliser l'installation NPM lors de la création de grandes applications avec Vue.

La recommandation ici est d'utiliser le cnpm de Taobao, qui est très rapide

npm install -g cnpm --registry=https://registry.npm.taobao.org Installez ensuite

# 全局安装 vue-cli npm install --g vue-cli # 创建一个基于 webpack 模板的新项目 vue init webpack my-project # 安装依赖，走你 cd my-project npm run dev 3. La première application Vue

单击事件 今年{{age}}

Lorsque chaque instance de Vue est créée, elle passera par une série de processus d'initialisation et appellera également les hooks de cycle de vie correspondants. Nous pouvons utiliser ces hooks pour exécuter notre logique métier au moment approprié.

Le cycle de vie général est : créé---monté---détruire

Les hooks de cycle de vie les plus couramment utilisés de Vue sont :

• Create est appelé après la création de l'instance. À ce stade, l'observation des données, etc. est terminée, mais elle n'a pas encore été montée et $el n'est pas encore disponible. Cela sera plus utile lorsque vous devrez initialiser et traiter certaines données.

• Mounted el est appelé après le montage sur l'instance. Généralement, notre première logique métier commencera ici.

• beforeDestroy est appelé avant que l'instance ne soit détruite. Dissocie principalement certains événements surveillés à l'aide de addEventListener.

var app =new Vue({ el: '# app', data: { a: 2 } , created: function () { console.log(this.a); //2 }, mounted: function () { console.log(this.el); //

} }); Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de la méthode automatisée de build mobile rem de webpack

Comment empaqueter les projets Vue par environnement