<html> Comment puis-je lier le html <title> contenu dans vuejs? </html>

Question

<html> Comment puis-je lier le html <title> contenu dans vuejs? </html>

Demandé el 14 de Avril, 2016: Quand la question a-t-elle été
20361 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie une démo sur vuejs. Maintenant, je veux que le titre html lie un champ vm.

Voici ce que j'ai essayé:

index.html

 <!DOCTYPE html>
<html id="html">
<head>
    <title>{{ hello }}</title>
    <script src="lib/requirejs/require.min.js" data-main="app"></script>
</head>
<body>
{{ hello }}
<input v-model="hello" title="hello" />
</body>
</html>

app.js

 define([
    'jquery', 'vue'
], function ($, Vue) {
    var vm = new Vue({
        el: 'html',
        data: {
            hello: 'Hello world'
        }
    });
});

Mais le titre ne semblait pas limité, comment le faire fonctionner?

Demandé el 14 de Avril, 2016 par fish_ball

Answer 1

4 Réponses

Answer 2

99voto

str Points 2352

Je préfère le jeu de l' <title> à partir de la vue de la partie, il y a essentiellement deux façons de le résoudre.

L'utilisation d'un Composant existant

Par exemple, la vue-headful:

Installer

npm i vue-headful

Enregistrer le composant:

import Vue from 'vue';
import vueHeadful from 'vue-headful';

Vue.component('vue-headful', vueHeadful);

new Vue({
    // your configuration
});

Et puis utilisez la vue-headful composant de chaque de votre point de vue:

<template>
    <div>
        <vue-headful
            title="Title from vue-headful"
            description="Description from vue-headful"
        />
    </div>
</template>

Notez que la vue-headful ne soutient pas seulement le titre, mais aussi de plusieurs balises meta et de la langue du document.

Créez votre propre Composant

Créer une vue de fichier qui contient:

<script>
    export default {
        name: 'vue-title',
        props: ['title'],
        created () {
            document.title = this.title;
        },
        watch: {
            title () {
                // only used when the title changes after page load
                document.title = this.title;
            }
        },
        render () {
        },
    }
</script>

Enregistrer le composant à l'aide de

import titleComponent from './title.component.vue';
Vue.component('vue-title', titleComponent);

Ensuite, vous pouvez l'utiliser dans vos vues, par exemple

<vue-title title="Static Title"></vue-title>
<vue-title :title="dynamic.something + ' - Static'"></vue-title>

Répondu el 2 de Novembre, 2016 par str (2352 Points )

Answer 3

61voto

MonoThreaded Points 1745

Vous pouvez le faire avec 1 ligne dans le fichier App.vue, comme ceci:

 <script>
    export default {
        name: 'app',
        created () {
            document.title = "Look Ma!";
        }
    }
</script>

Ou modifiez le <title> contenu de balise dans public/index.html

 <!DOCTYPE html>
<html>
  <head>
    <title>Look Ma!</title> <!- ------ Here ->
  </head>
...

Répondu el 4 de Avril, 2018 par MonoThreaded (1745 Points )

Answer 4

6voto

vbranden Points 2710

Cette réponse est pour vue 1.x

à l'aide de requirejs.

define([
  'https://cdn.jsdelivr.net/vue/latest/vue.js'
], function(Vue) {
  var vm = new Vue({
    el: 'html',
    data: {
      hello: 'Hello world'
    }
  });
});

<!DOCTYPE html>
<html id="html">

<head>
  <title>{{ hello }}</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js" data-main="app"></script>
</head>

<body>
  {{ hello }}
  <input v-model="hello" title="hello" />
</body>

</html>

vous pouvez le faire comme ceci en utilisant la fonction ready pour définir la valeur initiale et de regarder pour mettre à jour lorsque des modifications de données.

<html>
<head>
<title>Replace Me</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <input v-model="title">
</div>


<script>
new Vue({
    el: '#app',
    ready: function () {
        document.title = this.title
    },
    data: {
        title: 'My Title'
    },
    watch: {
        title: function (val, old) {
            document.title = val
        }
    }
})
</script>

</body>
</html>

aussi, j'ai essayé ce basé sur l'original de votre code et il fonctionne

<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <input v-model="title">
</div>

<script>
new Vue({
    el: 'html',
    data: {
        title: 'My Title'
    }
})
</script>

</body>
</html>

Répondu el 14 de Avril, 2016 par vbranden (2710 Points )

Answer 5

3voto

serkan Points 2807

Les balises de titre et de métadonnées peuvent être modifiées et mises à jour de manière asynchrone.

Vous pouvez utiliser la gestion des états, créer un magasin pour le référencement en utilisant vuex et mettre à jour chaque partie en conséquence.

Ou vous pouvez facilement mettre à jour l'élément par vous-même

 created: function() {  

  ajax().then(function(data){
     document.title = data.title  
     document.head.querySelector('meta[name=description]').content = data.description
  })

}

Répondu el 2 de Avril, 2017 par serkan (2807 Points )

<html> Comment puis-je lier le html <title> contenu dans vuejs? </html>

Réponses

L'utilisation d'un Composant existant

Créez votre propre Composant

Questions en vedette

Top Tags

Prograide.com

Powered by:

<html> Comment puis-je lier le html <title> contenu dans vuejs? </html>

Réponses

L'utilisation d'un Composant existant

Créez votre propre Composant

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: