Points de connaissances sur les entretiens Vue

Cette fois, je vais vous apporter quelques points de connaissances sur l'interview de Vue. Les amis qui en ont besoin peuvent y prêter attention pour l'apprendre.

[Recommandations associées : questions d'entretien avec vue (2020)]

1 Introduction à vue

vue est une version. user Le cadre de l'interface. Il s'agit d'un framework mvv léger, comme Angular, il s'agit de ce que l'on appelle la liaison de données bidirectionnelle, le développement frontal basé sur les données et basé sur les composants. Il implémente la liaison de données réactive et la combinaison de composants de vue via une simple API. est facile à utiliser et compact.

2. Installez le plug-in vue-devtools pour faciliter le débogage de vue dans Chrome. Configurez si vue-devtools est autorisé à vérifier le code pour faciliter le débogage. L'environnement de production est défini sur false, vue.config. devtools = false;

vue.config.productionTip=false; Empêche le démarrage des messages de production.

3. Commandes communes.

Liaison de données bidirectionnelle selon le modèle V, généralement utilisée pour les éléments de formulaire.

v-for effectue des opérations de boucle sur des tableaux ou des objets. Utilisez v-for au lieu de v-repeat

v-on est utilisé. pour lier Définir l'heure, utilisation : v-on : time = 'function'

v-show/v-if est utilisé pour afficher ou masquer des éléments, v-show est implémenté via l'affichage , v- if est créé après chaque suppression

4 Événements et attributs

v-on:click = "Abréviation @click=". "

Objet d'événement $event, qui comprend des informations relatives à l'événement, telles que la source de l'événement, le type d'heure, le décalage, etc.

Événement bouillonnant, La méthode native js s'appuie sur des objets événement, tandis que la méthode vue ne s'appuie pas sur des objets événement. @click.stop empêche les événements de bouillonner

Événements de clavier : @keydown.13 ; ou keydown, entrez

Le modificateur d'événement .stop appelle event.stopPropagation();

v-bind est utilisé pour la liaison d'attribut, utilisation v. -bind :Attribute="" Exemple v-bind:src="" Abréviation : src=""

5. Modèle

vue. .js En utilisant la syntaxe de modèle basée sur HTML, le modèle de données qui lie dom à l'instance de vue est {{}} utilisé pour lier les données et les afficher sur la page

liaison bidirectionnelle v- model

La liaison unique {{}} peut avoir des problèmes de scintillement, vous pouvez également utiliser v-text v-html

Autres instructions v -once les données sont liées une fois que v-pre ne mute pas et est affiché directement tel quel

6. Le filtre

est utilisé pour filtrer les données du modèle. Traiter et filtrer les paires de données avant d'afficher

Syntaxe : {{data | filter (parameter) |filter (parameter)}}

Les filtres intégrés seront supprimés après la version 2.0. Si vous les utilisez, vous pouvez utiliser des bibliothèques tierces telles que lodash data-fns, le formatage de la date, la comptabilité.js, le formatage et la personnalisation des devises

7. Envoyer une requête ajax

Vue lui-même ne prend pas en charge l'envoi de requêtes ajax. Vous devez utiliser des plug-ins tels que vue-resource axios pour l'implémenter. utiliser axios

axios est un client de requêtes http basé sur des promesses, utilisé pour envoyer des requêtes

Utilisation de base :

axios.get(url[,options]);  传参方式，url或者params传参
axios.post(url,data,[options]);

Remarque : lorsqu'axios envoie des données par défaut, le format des données est la charge utile de la demande, et non le format de données du formulaire que nous utilisons, les paramètres doivent donc être transmis en tant qu'objets clé-valeur

, les paramètres ne peuvent pas être transmis sous la forme de json

Méthodes de transmission des paramètres : épissez vous-même les paires clé-valeur, utilisez transformrequst pour convertir les données de la requête avant d'envoyer la requête, ou utilisez le qs Le module de conversion

axios ne prend pas en charge les requêtes inter-domaines. Vous pouvez utiliser vue-resource pour envoyer des requêtes inter-domaines.

Envoyer une demande sur plusieurs domaines : this.$http.get(url,[options]); this.$http.post(url,[options]);

Cycle de vie 8.vue

Le processus de la création à la destruction de l'instance vue devient le cycle de vie

9. Attributs calculés

Les attributs calculés sont également utilisés pour stocker des données. Ils ont ces deux caractéristiques : les données peuvent être traitées logiquement et les données des attributs calculés peuvent être surveillées.

Propriétés et méthodes de l'instance 10.vue

Propriétés vm.$el vm.$data vm.$options vm.$refs

Méthode vm.$mount() vm.$destroy vm.$nextTick(callback) vm.$set(object,key,vlaue) vm.$delete(object,key) vm. $watch(data,callback)

11, instruction personnalisée

instruction globale personnalisée vue.directive (identifiant d'instruction, objet de définition)

12. Transition (animation)

Vue propose une variété de façons différentes d'appliquer le processus lors de l'insertion de mises à jour ou d'un dom. L'essence est toujours d'utiliser une animation CSS,

Utilisation de base : utilisez le composant de transition et placez l'élément à animer dans le composant

Utilisez-le avec la bibliothèque d'animation tierce animater.css

 <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
        <p v-show="flag">显示内容</p>
    </transition>

13 Le composant .Component

est l'une des fonctions les plus puissantes de vue. Les composants peuvent combattre sauvagement les éléments HTML, encapsuler le code réutilisé et les composants sont des objets d'élément personnalisés.

Définissez la méthode du composant, a> créez d'abord un constructeur de composant, puis utilisez le constructeur de composant pour créer le composant. b>Créer directement

Pour référencer le modèle, le contenu du composant est référencé dans le modèle d477f9ce7bf77f53fbcf36bec1b69b7a. Les données dans la fonction data du composant sont différentes des données stockées dans la fonction. vue instance

componect :is="" composant, plusieurs composants utilisent le même point d'accroche, commutation dynamique,

composant de cache keep-alive , éviter la recréation, comparaison d'efficacité Élevé

Utilisation 7c9485ff8c3cba5ae9343ed63c2dc3f795543a64d6150a5d6f46db7704427e2a Transfert de données : composant parent-enfant, dans Un composant définit un autre composant à l'intérieur, appelé composant parent-enfant.

       子组件只能在付组件中使用，默认情况下，子组件不能访问付组件数据。每个组件的作用域是独立的。

       组件间数据的通信：在调用组件时，绑定想要获取的付组件的数据，在子组件内部，使用props选项来生命获取

的数据，接收来自付组件的数据。例子：props:['msg']   props可以是数组，也可以是对象props:{} 允许配置高级设计比如类型判断

数据的校验，设置默认值 props:{messge:String,age:Number,name:{type:String,rquired:true,default:19,validator:function(){}}},对象做数组的默认值，

对象必须使用函数返回。

组件中的数据有三种形式：data  props computed 

付组件访问子组件数据方式：

a.在子组件中使用vm.$emit（事件名，数据） 出发一个自定义事件，事件名自定义

b.付组件在使用子组件的地方监听子组件出发事件，并在付组件中定义方法，用来获取数据

单项数据流：

props是单项绑定的，当付组件的属性变化时，将传导给子组件，但是不会反过来，而且不允许子组件直接

修改付组件中的数据

解决方案： a.如果子组件享把他作为局部数据来使用，可以将数据存入另一个变量在操作

b.如果子组件想修改数据并同步付组件，使用.sync  2.3开始支持，或者将付组件数据包装成udixiang，

然后在子组件中修改对象的属性。

非父子组件间通信：

可以通过一个空的vue实例来作为中央事件总线，用他来出发事件或监控事件

var Event = new Vue();    空对象

Event.$emit(事件名，数据)；  发送数据

Event.$on(事件名，data=>{})  监听接收数据

slot内容分发：

用来获取组件中的元内容，就是组件标签中的内容；

获得指定标签内容可以给标签定义  slot="s1"   获取  f995f70ae2091cccd4738847b20f1f7b

14.vue-router 路由

使用vue.js 开发spa 单页面应用，根绝不同url地址，显示不同内容，但实现在统一页面红，称单页面应用。

bower info vue-router    cnpm install vue-router -S

<p id="itany">
<p>
<!-- 使用router-link组件来定义导航，to属性指定链接url -->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</p>
<p>
<!-- router-view用来显示路由内容 -->
<router-view></router-view>
</p>
</p>

<script>
//1.定义组件
var Home={
template:&#39;<h3>我是主页</h3>&#39;
}
var News={
template:&#39;<h3>我是新闻</h3>&#39;
}

//2.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news/:username/:password'',component:News},
{path:'*',redirect:'/home'} //重定向
]

//3.创建路由实例
const router=new VueRouter({
routes, //简写，相当于routes:routes
// mode:'history', //更改模式
linkActiveClass:'active' //更新活动链接的class类名
});

//4.创建根实例并将路由挂载到Vue实例上
new Vue({
el:'#itany',
router //注入路由
});
</script>

知识点：30e8033e360bcffb1ce9b4703e10b64c /* scoped表示该样式只在当前组件中有效 */

路由嵌套和参数传递：

a.查询字符串   login?name=tome&pwd=123     显示  {{$route.query}}

b。rest风格url       regist/alice/324    显示获取 {{$router.params}}

Méthode d'instance de route :

router.push(); Ajouter une route, la fonction est la même que 6a078d9a0c4b84a49fc544194c8dfb2b, ce sont toutes des pages de saut

router.replace() remplace la route, identique à la fonction ci-dessus, aucun enregistrement d'historique n'est généré

Composant de fichier unique :

Nom du fichier .vue Le composant de fichier est un format de fichier personnalisé de vue.js. Un fichier .vue est une flèche empoisonnée distincte, qui encapsule

js css html distinct

Le fichier .vue se compose de trois parties de style de script

vue-loader Le navigateur lui-même ne reconnaît pas votre fichier .vue, il doit donc charger et analyser le fichier .vue. Dans ce cas, chargerhaiyou de vue-. loaderleisi est requis

Beaucoup, html-loader css-loader style-loader babel-loader Il est à noter que vue-loader est prévu pour webpack

webpack est un chargeur modulaire de ressources front-end et outil d'empaquetage,

Installer les modèles associés :

cnpm install vue-template-compiler -D //Modèle précompilé Fusionner : cnpm install -D webpack webpack-dev- serveur vue-loader vue- html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler

Exécutez le test : npm run dev

15. Scaffolding vue-cli

vue-cli est un échafaudage de vue qui peut rapidement construire le structure du projet,

Modèles de projet courants : webpack garantit la vérification des spécifications de code EsLint et les tests unitaires,

webpack-simple n'a pas de vérification de code et les tests unitaires

browserify est également couramment utilisé

browserigy-simple

Installez vue-cli et configurez l'environnement de commande vue

cnpm install vue-cli -g
vue --version
vue list
Initialisez le projet et générez le modèle de projet
Syntaxe : vue init nom du modèle nom du projet
Saisissez le nom généré répertoire du projet et installez le package du module
cd vue-cli-demo
cnpm install
Run
npm run dev //Démarrez le service de test
npm run build //Emballez le projet et la sortie le répertoire dist. Si le projet est en ligne, copiez le répertoire dist sur le serveur
Utiliser le modèle webpack
vue init webpack vue-cli-demo2
ESLint est un outil utilisé pour unifier les spécifications et les styles de code, tels que comme l'indentation, les espaces, les symboles, etc., et les exigences sont relativement strictes

16. Développement modulaire

Créez d'abord un projet dans un répertoire vue init webpack-simple vue-cli. -demo

Entrez dans le répertoire cd vue-cli-demo cmpn install puis npm run dev Exécutez test

cmpn install vue-router -S -S signifie dépendance de production

Modifier main.js importer VueRouter form ''vue-router' vue.use(Vue/ router); Après utilisation, vous pouvez utiliser

pour modifier app.vue et modifier router.config, js

cnpm install axios -S

Il existe deux façons d'utiliser axios :

a. Dans les composants qui utilisent axios, axios doit être introduit import axios from 'axios' axios.get('url').then(resp ->{resp.data}); catch(eorr->){}

b. Introduisez globalement import axios from 'axios' dans main.js et ajoutez-le au prototype de vue vue.prototype.$http=axios; 🎜>

vue.$http.get(); ou this.$http.get();

Ajouter des événements pour les composants personnalisés :

Par exemple , si vous personnalisez l'enregistrement d'une vue de bouton, @click=send ne peut pas être lié par défaut. Si vous écrivez @click.ntaive=send comme ceci, vous pouvez

17ui library element ui<.> est une ui La bibliothèque de composants est un ensemble de bibliothèques de composants basés sur vue 2.0 fourni par Ele.me. Il peut développer rapidement des URL et améliorer l'efficacité

élément ui côté PC élément du site officiel mintui mobile. .eleme.io

cnpm install element-ui -S

npm run dev

Introduire et utiliser ce composant dans main.js import ElementUI à partir de l'importation 'elemtn-ui' element-ui/lib/eheme=default/ index.css

vue.use(ElementUI); Cette méthode d'introduction consiste à introduire tout le contenu du composant

Ajouter un chargeur dans le test webpack.confgi.js :/.css$/,loader :'style-loader!css-loader'

cnpm install style-loader -D Configuration du chargeur de polices

Redémarrer les modifications de configuration du webpack

Le style dynamique consiste à utiliser less

Utiliser less pour installer le chargeur less less-loader configurer test:/.less$/,loader:less-loader Spécifier le style l ang=less Le style doit être spécifié

Composant global personnalisé :

Composant global : vous pouvez utiliser vue.use dans main.js pour entrer dans l'importation globale, puis utiliser

de le créer dans d'autres composants. composant vue, créer un fichier index.js importer Connexion à partir de './Login.vue'export par défaut {

install:function(Vue){
Vue .component('Login',Login);
}}

Composants ordinaires : doivent être introduits à chaque fois, comme axios

Mode de gestion de l'état 18.vuex

Utilise le stockage centralisé pour gérer l'état de tous les composants de l'application En termes simples, la gestion centralisée des données est similaire au redux en réaction, basé sur le cadre de gestion de l'état frontal du flux.

Utilisation de base : nmp install vuex -S

Créer le fichier store.js, configuration liée à vuex. Importez dans main.js, importez le magasin depuis './store.js main.js configurez les options du magasin, sous-groupez this.$store

import vue depuis vue import vuex from vuex vue.use(vuex); >

Le magasin principal Vuex est équivalent à un conteneur. Une instance de magasin contient les attributs et méthodes suivants :

getters Obtenir les attributs

actions Définir des méthodes Actions, telles que le jugement de processus Requêtes asynchrones const action={method name (context){})} l'objet contextuel a un état de répartition comit

commit signifie soumission, le seul moyen de modifier les données, conmit('add) soumet une modification appelée add

les mutations définissent les changements

var state= { count:6} //Créer un objet de magasin const store=new Vuex.Store{{state}} ; exporter le magasin par défaut ;

Modifier l'application. js edit store, en tant qu'attribut calculé : calculated:(){return this.$store.state.count};

Méthode un this.#store access Méthode deux mapGetters mapActios access

mapGetter get Attribute

mapActions Get method

Import auxiliaire function import {mapGetter} from vuex

computed:mapGetters{('count')}

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!