web-dev-qa-db-ja.com

vuejsでhtml <title>コンテンツをバインドするにはどうすればよいですか？

私はvuejsでデモを試しています。ここで、HTMLタイトルにvmフィールドをバインドする必要があります。

以下は私が試したものです：

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'
        }
    });
});

しかし、タイトルは制限されていないように見えました。

javascripthtmlmvvmfrontendvue.js
42
Alfred Huang

ビュー部分から<title>を設定したいので、それを解決する方法は基本的に2つあります。

既存のコンポーネントを使用する

たとえば、 vue-headful ：

インストール

npm i vue-headful

コンポーネントを登録します。

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

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

new Vue({
    // your configuration
});

そして、ビューのすべてでvue-headfulコンポーネントを使用します。

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

vue-headful は、タイトルだけでなく、いくつかのメタタグとドキュメント言語もサポートしていることに注意してください。

独自のコンポーネントを作成する

次を含むvueファイルを作成します。

<script>
    export default {
        name: 'vue-title',
        props: ['title'],
        watch: {
            title: {
                immediate: true,
                handler() {
                    document.title = this.title;
                }
            }
        },
        render () {
        },
    }
</script>

を使用してコンポーネントを登録する

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

次に、ビューでそれを使用できます。

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

次のように、App.vueファイルの1行で実行できます。

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

または、<title>のpublic/index.htmlタグの内容を変更します

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

この回答はvue 1.x用です

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>

ready関数を使用して初期値を設定し、データが変更されたときに更新を監視することで、このようにすることができます。

<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>

また、私はあなたの元のコードに基づいてこれを試しましたが、それは動作します

<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>
6
vbranden

タイトルとメタタグは、非同期で編集および更新できます。

状態管理を使用し、vuexを使用してSEO用のストアを作成し、それに応じて各部分を更新できます。

または、自分で簡単に要素を更新できます

created: function() {  

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

}
2
serkan

ここでチャイムするだけです。私は、VueJSがメタとは何の関係もないことを読みましたので、「VueJS」領域の外でそのようなことをするでしょう。

基本的に、次のような単純なVanilla jsサービスを作成します。ここで、Open Graphデータなどのメタデータを処理するすべての関数を追加できます。

meta.js

export setTitle(title) {
    document.title = title  
}

これで、メインにサービスをインポートし、それを必要とするアプリ内の任意のコンポーネントに提供できます。 ReactやAngularなどのさまざまなフレームワークを使用する他のプロジェクトでも、metaサービスを使用できます。移植性は非常にクールです！

main.js

import meta from './meta'
new Vue({
    router,
    render: h => h(App),
    provide: {
        meta: meta
    }
}).$mount('#app')

ここで、コンポーネントは使用したいメタサービスを注入します。

someView.vue

export default {
    name: 'someView',
    inject: ['meta'],
    data: function() {
        returns {
            title: 'Cool title'
        }
    },
    created: function() {
        this.meta.setTitle(this.title);
    }
}

このように、異なる親コンポーネントがprovide異なるバージョンのmetaサービスを使用できるため、メタサービスはアプリから分離されます。さまざまな戦略を実装して、どの戦略が適切か、またはコンポーネントごとに異なる戦略を検討することができます。

基本的に、注入はコンポーネント階層を上に向かって進み、それを提供する最初の親からmetaサービスを取得します。メタサービスが適切なインターフェイスに従う限り、あなたは最高です。

DIとのデカップリングはとてもクールですか????

0
mr haven