我正在尝试在 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'
}
});
});
但是标题似乎没有界限，如何使它起作用？
基本上有两种方法可以解决它。
例如，vue-meta：
<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App', metaInfo: { // if no subcomponents specify a metaInfo.title, this title will be used title: 'Default Title', // all titles will be injected into this template titleTemplate: '%s | My Awesome Webapp' } } </script>
创建一个包含以下内容的 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>
您可以使用 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>
...
此答案适用于 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>
只是想在这里插话。我已经读到 VueJS 不想与元数据有任何关系，所以我会在“VueJS”领域之外做这样的事情。
基本上制作一个普通的 vanilla js 服务，如下所示。在这里，您可以添加所有函数来处理元数据内容，例如 Open Graph 数据。
meta.js
export setTitle(title) {
document.title = title
}
现在我们可以在 main 中导入服务，然后将它提供给应用程序中需要它的任何组件。我什至可以meta在其他项目中使用我的服务，这些项目使用不同的框架，如 React 或 Angular。便携性超爽！
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 解耦超级酷😃
标题和元标记可以异步编辑和更新。
您可以使用状态管理，使用 vuex 为 SEO 创建一个商店并相应地更新每个部分。
或者您可以轻松地自己更新元素
created: function() {
ajax().then(function(data){
document.title = data.title
document.head.querySelector('meta[name=description]').content = data.description
})
}