Я пробую демо на vuejs. Теперь я хочу, чтобы заголовок html связывал поле vm.Как связать содержимое html <title> в vuejs?

Ниже то, что я пробовал:

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

Но название, казалось, не ограничено, как заставить его работать?

источник

2016-04-14 Alfred Huang

Try 'эль: document.documentElement' –

Я всегда связан Vue к телу, а затем установить' document.title', когда мне нужно обновить Это. Концептуально это кажется возможным, но я никогда не видел его таким образом. – Jeff

@str спасибо, теперь его твоя. –

Я предпочитаю, чтобы установить <title> с точки зрения части, существует два пути ее решения.

Использование существующего компонента

Например, 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'], 
     created() { 
      document.title = this.title; 
     }, 
     watch: { 
      title() { 
       // only used when the title changes after page load 
       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>

источник

2016-11-02 19:23:41 str

Хорошая идея, я никогда не думал об этом. –

+1 Я бы пошел с этим, так как считается, что плохая практика монтирует ваш экземпляр Vue тегу html (вместо изолированной обертки в теле). – Kano

В vue 2 он «установлен» вместо 'created' – Jared

Этот ответ для vue 1.x

с использованием требований.

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>

вы можете сделать это так, используя готовую функцию, чтобы установить начальное значение и следить, чтобы обновить, когда изменения данных.

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

источник

2016-04-14 05:55:42 vbranden

Молодец, спасибо, и я наконец обнаружил, что я потерпел неудачу, потому что элемент 'el' установлен неправильно (я установил его на« тело »на самом деле). Поэтому привязка vm к элементу 'html' может работать хорошо! –

Вы можете также использовать только элемент , выполнив команду el: 'title' – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+2</span></div> <div class="col-lg-11"> <p class="commenttext">Вы получите предупреждение в Vue 2.4.2: '[Vue warn]: не монтировать Vue в <html> или <body> - вместо этого монтировать на обычные элементы.' – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/1571426/">user9645</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">2<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>Заголовок и метатеги могут быть отредактированы и обновлены асинхронно.</p> <p>Вы можете использовать управление государством, создать магазин для SEO с помощью vuex и соответствующим образом обновить каждую часть.</p> <p>Или вы можете обновить элемент самостоятельно легко</p> <pre><code class="prettyprint-override">created: function() { ajax().then(function(data){ document.title = data.title document.head.querySelector('meta[name=description]').content = data.description }) } </code></pre> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/43168530">источник</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2017-04-02 12:49:40</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/703529/">serkan</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div> </div> </article> </div> <div class="clearfix"> </div> <div class="relative-box"> <div class="relative">Смежные вопросы</div> <ul class="relative_list"> <li> 1. <a href="http://ru.voidcc.com/question/p-xplggede-bab.html" target="_blank" title="Как связать содержимое html"> Как связать содержимое html </a> </li> <li> 2. <a href="http://ru.voidcc.com/question/p-ncsadnmt-hh.html" target="_blank" title="Как связать отсортированный список с vuejs?"> Как связать отсортированный список с vuejs? </a> </li> <li> 3. <a href="http://ru.voidcc.com/question/p-etclvelj-to.html" target="_blank" title="Маршрутизатор не отображает содержимое VueJS"> Маршрутизатор не отображает содержимое VueJS </a> </li> <li> 4. <a href="http://ru.voidcc.com/question/p-aordtdze-nd.html" target="_blank" title="Vuejs как движок HTML-шаблонов"> Vuejs как движок HTML-шаблонов </a> </li> <li> 5. <a href="http://ru.voidcc.com/question/p-ztlinhgu-zq.html" target="_blank" title="Как связать поведение в новых элементах в блоке повтора vuejs?"> Как связать поведение в новых элементах в блоке повтора vuejs? </a> </li> <li> 6. <a href="http://ru.voidcc.com/question/p-wbjlnnwy-bba.html" target="_blank" title="vuejs variable в атрибуте html"> vuejs variable в атрибуте html </a> </li> <li> 7. <a href="http://ru.voidcc.com/question/p-qhplsmkm-bne.html" target="_blank" title="Как восстановить содержимое html в java?"> Как восстановить содержимое html в java? </a> </li> <li> 8. <a href="http://ru.voidcc.com/question/p-qtdddzqd-bmq.html" target="_blank" title="Как связать директивы с пользовательскими компонентами в VueJS?"> Как связать директивы с пользовательскими компонентами в VueJS? </a> </li> <li> 9. <a href="http://ru.voidcc.com/question/p-qjfpjzqv-su.html" target="_blank" title="vuejs, как связать динамический класс в цикле v-for"> vuejs, как связать динамический класс в цикле v-for </a> </li> <li> 10. <a href="http://ru.voidcc.com/question/p-oiqihsta-da.html" target="_blank" title="Как связать содержимое Html с помощью метода Navigatetostring?"> Как связать содержимое Html с помощью метода Navigatetostring? </a> </li> <li> 11. <a href="http://ru.voidcc.com/question/p-owjebhzp-ps.html" target="_blank" title="Как преобразовать преобразованные теги HTML обратно в фактическое содержимое HTML"> Как преобразовать преобразованные теги HTML обратно в фактическое содержимое HTML </a> </li> <li> 12. <a href="http://ru.voidcc.com/question/p-efavctta-bby.html" target="_blank" title="VueJS Печать HTML на страницу"> VueJS Печать HTML на страницу </a> </li> <li> 13. <a href="http://ru.voidcc.com/question/p-gmmkmtik-zc.html" target="_blank" title="Равномерно связать содержимое ячеек"> Равномерно связать содержимое ячеек </a> </li> <li> 14. <a href="http://ru.voidcc.com/question/p-bdbezmkk-su.html" target="_blank" title="Как связать содержимое выпадающего списка в xaml"> Как связать содержимое выпадающего списка в xaml </a> </li> <li> 15. <a href="http://ru.voidcc.com/question/p-gulfqzmk-bsd.html" target="_blank" title="Невозможно связать содержимое contentPresenter"> Невозможно связать содержимое contentPresenter </a> </li> <li> 16. <a href="http://ru.voidcc.com/question/p-wreoqhuk-bng.html" target="_blank" title="Невозможно связать html с angularJS и tinymce"> Невозможно связать html с angularJS и tinymce </a> </li> <li> 17. <a href="http://ru.voidcc.com/question/p-bvcvdvro-bpt.html" target="_blank" title="Как связать .html() в jquery"> Как связать .html() в jquery </a> </li> <li> 18. <a href="http://ru.voidcc.com/question/p-mqjialza-kp.html" target="_blank" title="Как связать разделы HTML?"> Как связать разделы HTML? </a> </li> <li> 19. <a href="http://ru.voidcc.com/question/p-qvsymgbi-bdg.html" target="_blank" title="Как связать динамические поля с сервером с помощью vuejs"> Как связать динамические поля с сервером с помощью vuejs </a> </li> <li> 20. <a href="http://ru.voidcc.com/question/p-amvvutuz-bnw.html" target="_blank" title="Как связать HTML <select> список с кнопкой отправки"> Как связать HTML <select> список с кнопкой отправки </a> </li> <li> 21. <a href="http://ru.voidcc.com/question/p-qeptsodn-bgb.html" target="_blank" title="Как поместить HTML в содержимое кнопки?"> Как поместить HTML в содержимое кнопки? </a> </li> <li> 22. <a href="http://ru.voidcc.com/question/p-wgihgfrr-bnc.html" target="_blank" title="Связать входной лоток в одну сторону с другой в VueJS"> Связать входной лоток в одну сторону с другой в VueJS </a> </li> <li> 23. <a href="http://ru.voidcc.com/question/p-elnlntpc-za.html" target="_blank" title="Простой дампинг в VueJS"> Простой дампинг в VueJS </a> </li> <li> 24. <a href="http://ru.voidcc.com/question/p-saarjtry-tz.html" target="_blank" title="Как связать objectdatasource с html select <tag>?"> Как связать objectdatasource с html select <tag>? </a> </li> <li> 25. <a href="http://ru.voidcc.com/question/p-zvxuqqzt-bct.html" target="_blank" title="JSON.parse Содержимое html"> JSON.parse Содержимое html </a> </li> <li> 26. <a href="http://ru.voidcc.com/question/p-kvnnikaj-pk.html" target="_blank" title="Python: Преобразование цитаты в HTML-содержимое не HTML теги"> Python: Преобразование цитаты в HTML-содержимое не HTML теги </a> </li> <li> 27. <a href="http://ru.voidcc.com/question/p-eszqzsjz-dd.html" target="_blank" title="jQuery Datatables показать содержимое html"> jQuery Datatables показать содержимое html </a> </li> <li> 28. <a href="http://ru.voidcc.com/question/p-ttcnjeej-uu.html" target="_blank" title="Компоненты VueJS"> Компоненты VueJS </a> </li> <li> 29. <a href="http://ru.voidcc.com/question/p-fpfbxysw-ee.html" target="_blank" title="Как я могу получить содержимое HTML <body>"> Как я могу получить содержимое HTML <body> </a> </li> <li> 30. <a href="http://ru.voidcc.com/question/p-cxqinfem-bgb.html" target="_blank" title="Как выровнять содержимое в html?"> Как выровнять содержимое в html? </a> </li> </ul> </div> <div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3534119089"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img2.voidcc.com/voidso/script/side.js?t=1652515422009"></script> <script type="text/javascript" src="http://img2.voidcc.com/voidso/plugin/highlight/highlight.pack.js"></script> <link href="http://img2.voidcc.com/voidso/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="3862022848" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> Последний вопрос </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://ru.voidcc.com/question/p-uumcmwkg-pr.html" target="_blank" title="Как найти точность поплавка, если n бит повреждены или потеряны"> Как найти точность поплавка, если n бит повреждены или потеряны </a> </li> <li class="side_article_list_item"> 2. <a href="http://ru.voidcc.com/question/p-dquhhjqw-qg.html" target="_blank" title="URL с параметрами в выражении SSRS"> URL с параметрами в выражении SSRS </a> </li> <li class="side_article_list_item"> 3. <a href="http://ru.voidcc.com/question/p-tsgpjlet-oe.html" target="_blank" title="Outlook сканировать определенную папку и сохранять все вложения с электронной почты"> Outlook сканировать определенную папку и сохранять все вложения с электронной почты </a> </li> <li class="side_article_list_item"> 4. <a href="http://ru.voidcc.com/question/p-zftrvxef-or.html" target="_blank" title="Преобразование java.sql.date в java.time.LocalDateTime"> Преобразование java.sql.date в java.time.LocalDateTime </a> </li> <li class="side_article_list_item"> 5. <a href="http://ru.voidcc.com/question/p-pkclwuqx-mq.html" target="_blank" title="Как отправить args из одного файла python в sys.argv другого"> Как отправить args из одного файла python в sys.argv другого </a> </li> <li class="side_article_list_item"> 6. <a href="http://ru.voidcc.com/question/p-kgxsaqjn-ky.html" target="_blank" title="Как указать пользовательские пути для ec2.py и ec2.ini?"> Как указать пользовательские пути для ec2.py и ec2.ini? </a> </li> <li class="side_article_list_item"> 7. <a href="http://ru.voidcc.com/question/p-vlzynpyv-kc.html" target="_blank" title="Sugar CRM: добавить задачу проверки перед слиянием контактов"> Sugar CRM: добавить задачу проверки перед слиянием контактов </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> Смежные вопросы</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://ru.voidcc.com/question/p-xplggede-bab.html" target="_blank" title="Как связать содержимое html"> Как связать содержимое html </a> </li> <li class="side_article_list_item"> 2. <a href="http://ru.voidcc.com/question/p-ncsadnmt-hh.html" target="_blank" title="Как связать отсортированный список с vuejs?"> Как связать отсортированный список с vuejs? </a> </li> <li class="side_article_list_item"> 3. <a href="http://ru.voidcc.com/question/p-etclvelj-to.html" target="_blank" title="Маршрутизатор не отображает содержимое VueJS"> Маршрутизатор не отображает содержимое VueJS </a> </li> <li class="side_article_list_item"> 4. <a href="http://ru.voidcc.com/question/p-aordtdze-nd.html" target="_blank" title="Vuejs как движок HTML-шаблонов"> Vuejs как движок HTML-шаблонов </a> </li> <li class="side_article_list_item"> 5. <a href="http://ru.voidcc.com/question/p-ztlinhgu-zq.html" target="_blank" title="Как связать поведение в новых элементах в блоке повтора vuejs?"> Как связать поведение в новых элементах в блоке повтора vuejs? </a> </li> <li class="side_article_list_item"> 6. <a href="http://ru.voidcc.com/question/p-wbjlnnwy-bba.html" target="_blank" title="vuejs variable в атрибуте html"> vuejs variable в атрибуте html </a> </li> <li class="side_article_list_item"> 7. <a href="http://ru.voidcc.com/question/p-qhplsmkm-bne.html" target="_blank" title="Как восстановить содержимое html в java?"> Как восстановить содержимое html в java? </a> </li> <li class="side_article_list_item"> 8. <a href="http://ru.voidcc.com/question/p-qtdddzqd-bmq.html" target="_blank" title="Как связать директивы с пользовательскими компонентами в VueJS?"> Как связать директивы с пользовательскими компонентами в VueJS? </a> </li> <li class="side_article_list_item"> 9. <a href="http://ru.voidcc.com/question/p-qjfpjzqv-su.html" target="_blank" title="vuejs, как связать динамический класс в цикле v-for"> vuejs, как связать динамический класс в цикле v-for </a> </li> <li class="side_article_list_item"> 10. <a href="http://ru.voidcc.com/question/p-oiqihsta-da.html" target="_blank" title="Как связать содержимое Html с помощью метода Navigatetostring?"> Как связать содержимое Html с помощью метода Navigatetostring? </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div>  <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://ru.voidcc.com/contact">Свяжитесь с нами</a></li> <li>© 2020 RU.VOIDCC.COM</li> <li><a rel="nofollow" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备13005482号-13</a></li> <li><script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1280098168&web_id=1280098168"></script></li> <li><a href="http://cn.voidcc.com/" target="_blank" title="程序问答园区">简体中文</a></li> <li><a href="http://hk.voidcc.com/" target="_blank" title="程序問答園區">繁體中文</a></li> <li><a href="http://ru.voidcc.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.voidcc.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.voidcc.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.voidcc.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.voidcc.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.voidcc.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.voidcc.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.voidcc.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.voidcc.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.voidcc.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.voidcc.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-77509369-5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-77509369-5'); </script> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?67d4731349f0b00136755b80364ce381"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>