Premiers pas avec la version vue.js1.0

vue

　vue.js est une bibliothèque permettant de créer des interfaces Web interactives. Il fournit une liaison de données MVVM et un système de composants composables avec une API simple et flexible. Techniquement parlant, Vue.js se concentre sur la couche de modèle de vue sur le modèle MVVM et connecte la vue et le modèle via une liaison de données bidirectionnelle. La manipulation réelle du DOM et le formatage de sortie sont résumés dans des directives et des filtres. Comparé à d'autres frameworks MVVM, Vue.js est plus facile à démarrer.

Vue.js est une bibliothèque permettant de créer des interfaces Web interactives. Il vous permet de créer des composants d'interface utilisateur basés sur les données via une API simple et flexible.

 <br>

Syntaxe commune de Vue1.0

<span style="font-size: 18px"><code class="hljs oxygene"><span class="hljs-keyword">var vm = <span class="hljs-keyword">new Vue(<span class="hljs-comment">{

　　el: "选择器",  挂载到页面的那个元素里，即确定vue的作用范围  外部可通过vm.$el访问，得到的是一个原生dom元素，可进行对应操作

　　a: '',  //自定义属性  外部可通过vm.$options访问

　　data: { }, <span class="hljs-comment">//实例属性都在这里面，外部通过实例名,即vm.$data调用

　　computed: <span class="hljs-comment">{ }, <span class="hljs-comment">//计算属性，也是实例属性，只是以方法的形式存在，并可以有逻辑运算的属性

　　<span class="hljs-function"><span class="hljs-keyword">method: <span class="hljs-comment">{ }, <span class="hljs-comment">//实例方法都在这里

　　watch: <span class="hljs-comment">{ }, <span class="hljs-comment">//对data和computed的属性进行监听，当属性有变化时自动触发，以方法的形式存在 外部通过$.watch调用

　　<span class="hljs-comment">//注意：以上属性和方法，实例内部都通过this调用,外部则通过对应的实例方法访问

　　<span class="hljs-comment">//在vue的生命周期过程中，它自身还提供了一系列的钩子函数供我们使用，进行自定义逻辑的注入：　　　

　　created: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 实例已经创建 }

　　<span class="hljs-title">beforeCompile: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模块编译之前 }

　　<span class="hljs-title">compiled: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模块编译之后；即模板占位符被是内容替换}

　　<span class="hljs-title">ready: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模板插入到文档中了；相当于window.onload }//<span class="hljs-title">Vue2.0已改为<span class="hljs-title">mounted

　　注意： 以上4个方法在对象被实例化后即按顺序执行，以下2个方法需通过事件触发，并通过调用 实例名.$<span class="hljs-title">destory<span class="hljs-params">() 才执行

　　<span class="hljs-title">beforeDestroy: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 对象销毁之前 }

　　<span class="hljs-title">destroyed: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 对象销毁之后 }

});<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span>

Analyse d'objets Vue :

1, propriétés de l'objet

données, el, options, montre, calculées

2, méthode objet

Fonction de hook du cycle de vie

3, accès aux instances d'objet et propriétés et méthodes d'appel

A : Appel d'attribut d'instance : $options, $el, $data, $watch

Ici nous nous concentrons sur $watch, sa syntaxe générale est :

vm.$watch("监听的实例属性名",function() { // 对于监听数据变化后的业务处理代码 });     --浅度监听

Si l'attribut surveillé est un type de données de base, il n'y a aucun problème avec l'utilisation ci-dessus. Cependant, si l'attribut surveillé est un objet, les données à l'intérieur de l'objet ont changé, et ce qui précède. La méthode ne peut pas être surveillée. Oui, un paramètre est requis pour une surveillance approfondie. La syntaxe spécifique est la suivante :

vm.$watch("监听的实例属性名",function() { // 对于监听数据变化后的业务处理代码 },{deep: true});　　--深度监听

B : Appel de méthode d'instance : $mount(), $log(), $destroy()

4, filtres intégrés et filtres personnalisés

A : Les filtres intégrés de Vue sont :

Capitalize (mettre la première lettre en majuscule), majuscule, devise, json (équivalent à JSON.Stringify()), anti-rebond (suivi du nombre de secondes , événements correspondants, exécution retardée)

　 limitBy(paramètre 1, paramètre 2) Expressions couramment utilisées v-pour tableau, limiter le nombre de sorties et où sortir le paramètre 1 représente le nombre ; de sorties, le paramètre 2 représente le nombre de sorties

filterBy (paramètre) filtre les données, filtre les données contenant des paramètres et coopère avec la zone de saisie d'entrée pour filtrer les variables d'entrée afin d'obtenir l'effet de recherche à chaud

orderBy (Paramètre) Trier les données Lorsque le paramètre est 1, il est dans l'ordre positif, et lorsqu'il est -1, il est dans l'ordre inverse. les paramètres sont là ? Donc 1 et -1 sont fondamentalement des situations courantes

　B : Syntaxe de filtre personnalisé (pour le traitement de l'horodatage, il s'agit d'un filtre personnalisé courant)

<span style="font-size: 18px"><code class="hljs actionscript">Vue.filter(<span class="hljs-string">"过滤器名称",<span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(参数<span class="hljs-rest_arg">...){

　　　　...  //业务处理

　　　　return <span class="hljs-rest_arg">...;

　　});<br></span></span></span></span></span></span></code></span>

5, instructions intégrées et instructions personnalisées

Les instructions sont une extension de la syntaxe HTML et doivent commencer par v-. Généralement, les instructions dans notre bouche font en fait référence. à l'instruction d'attribut. L'élément utilisant cette instruction d'attribut a la fonction d'attribut correspondante. Le C suivant fait référence à l'instruction d'élément, qui est différente de l'instruction d'attribut

A : Livré avec des instructions. : v-if, v-show, v-else, v-module, v-text, v-html, v-bind, v-on, v-el, v-cloak...

Ici, nous nous concentrons sur v-text et v-cloak : lorsque nous appelons des données d'attribut d'instance dans le modèle, nous faisons généralement ceci {{ attribut d'instance}}, de sorte que lorsque la vitesse du réseau est relativement lente, la page clignotera. Afficher les accolades et le contenu original à l'intérieur, ce qui n'offrira pas une bonne expérience utilisateur. Il existe deux façons de gérer cette situation :

　1. Utilisez v-clock activé. directive d'éléments de paragraphe plus grands et définissez le CSS de l'élément : display:none

　　　 2. Utilisez v-text/v-html au lieu des accolades, Vue2.0 prend également en charge cela, et cela prend La méthode bracket peut être annulée

B : Syntaxe de directive personnalisée :

　Vue.directive("指令名称",function(..){
　　　　this.el.style.background = 'red';   //这里的this代表new出来的实例，this.el代表原生的dom元素
　　});

Utilisez le nom de la directive v dans le template, ou v-command name="parameter", vous pouvez passer des paramètres lors de l'appel de la commande

N'ajoutez pas v- lors de la définition du nom de la commande, ajoutez v-

lors de l'utilisation du modèle

C : commande d'élément personnalisé (on dit qu'elle n'est pas très utile et peut être ignorée. L'effet qu'elle souhaite obtenir a été dépassé par le composant)

 Vue.elementDirective("自定义元素名称",{
　　　　bind: function() {};
　　});

Il ne prend pas en charge la syntaxe B-case, mais la syntaxe B-case est par défaut bind

6, clavier personnalisé informations

Vue.directive('on'),keyCodes.ctrl = 17;  //17是ctrl的键码  等号前的ctrl是定义ctrl的别名，可以随便取，实际绑定的就是键盘上的ctrl键

Appel du modèle @keydown.ctrl="Méthode personnalisée"

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!