Как привязать содержимое html в vuejs?
Я пробую демо на 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'
}
});
});
но название казалось не ограниченным, как заставить его работать?
4 ответов
как я предпочитаю установить <title>
из части view есть, по существу, два способа ее решения.
использовать существующий компонент
например, 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>
этот ответ для 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>
вы можете сделать это с 1 строкой в приложении.файл vue, например:
<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>
...
теги Title и meta можно редактировать и обновлять асинхронно.
вы можете использовать управление состоянием, создать магазин для SEO с помощью vuex и обновить каждую часть соответственно.
или вы можете обновить элемент самостоятельно легко
created: function() {
ajax().then(function(data){
document.title = data.title
document.head.querySelector('meta[name=description]').content = data.description
})
}