Alf*_*ang 46 html javascript frontend mvvm vue.js
我正在尝试关于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'
}
});
});
但标题似乎没有限制,如何使它工作？
str*_*str 69
由于我更喜欢<title>从视图部分设置,因此基本上有两种方法可以解决它.
例如,vue-headful:
安装
Run Code Online (Sandbox Code Playgroud)npm i vue-headful注册组件:
Run Code Online (Sandbox Code Playgroud)import Vue from 'vue'; import vueHeadful from 'vue-headful'; Vue.component('vue-headful', vueHeadful); new Vue({ // your configuration });然后在每个视图中使用vue-headful组件:
Run Code Online (Sandbox Code Playgroud)<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>
Mon*_*ded 29
您可以在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>