如何在vuejs中绑定html 内容？

时间：2022-10-20 21:11:58

I'm trying a demo on vuejs. Now I want the html title to bind a vm field.

我正在尝试关于vuejs的演示。现在我希望html标题绑定一个vm字段。

The below is what I tried:

以下是我的尝试：

index.html

的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

app.js

define([
    'jquery', 'vue'
], function ($, Vue) {
    var vm = new Vue({
        el: 'html',
        data: {
            hello: 'Hello world'
        }
    });
});

But the title seemed not bounded, how to make it work?

但标题似乎没有限制，如何使它工作？

4 个解决方案

#1

34  

As I prefer to set the <title> from the view part, there are essentially two ways to solve it.

由于我更喜欢​​从视图部分设置

，因此基本上有两种方法可以解决它。</p>

Use an existing Component

For example, vue-headful:

例如，vue-headful：

Install

安装

npm i vue-headful

Register the component:

注册组件：

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

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

new Vue({
    // your configuration
});

And then use the vue-headful component in every of your views:

然后在每个视图中使用vue-headful组件：

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

Note that vue-headful not only supports the title, but also several meta tags and the document language.

请注意，vue-headful不仅支持标题，还支持多个元标记和文档语言。

Create your own Component

Create a vue file containing:

创建一个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>

Register the component using

使用注册组件

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

Then you can use it in your views, e.g.

然后，您可以在自己的观看中使用它，例如

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

#2

6  

This answer is for vue 1.x

这个答案适用于vue 1.x.

using requirejs.

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

you can do it like this using the ready function to set the initial value and watch to update when the data changes.

你可以这样做，使用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>

also i tried this based on your original code and it works

我也根据你的原始代码尝试了这个，它的工作原理

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

#3

4  

You can do it with 1 line in the App.vue file, like this:

您可以在App.vue文件中使用1行执行此操作，如下所示：

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

Or change the <title> tag content in public/index.html

或者更改public / index.html中的

标记内容</p> 
<!DOCTYPE html>
<html>
  <head>
    <title>Look Ma!</title> <!- ------ Here ->
  </head>
...

#4

2  

Title and meta tags can be edited and updated asynchronously.

可以异步编辑和更新标题和元标记。

You can use state management, create a store for SEO using vuex and update each part accordingly.

您可以使用状态管理，使用vuex为SEO创建商店并相应地更新每个部分。

Or you can update the element by yourself easily

或者您可以轻松地自行更新元素

created: function() {  

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

}

#1

34  

As I prefer to set the <title> from the view part, there are essentially two ways to solve it.

由于我更喜欢​​从视图部分设置

，因此基本上有两种方法可以解决它。</p>

Use an existing Component

For example, vue-headful:

例如，vue-headful：

Install

安装

npm i vue-headful

Register the component:

注册组件：

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

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

new Vue({
    // your configuration
});

And then use the vue-headful component in every of your views:

然后在每个视图中使用vue-headful组件：

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

Note that vue-headful not only supports the title, but also several meta tags and the document language.

请注意，vue-headful不仅支持标题，还支持多个元标记和文档语言。

Create your own Component

Create a vue file containing:

创建一个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>

Register the component using

使用注册组件

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

Then you can use it in your views, e.g.

然后，您可以在自己的观看中使用它，例如

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

#2

6  

This answer is for vue 1.x

这个答案适用于vue 1.x.

using requirejs.

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

you can do it like this using the ready function to set the initial value and watch to update when the data changes.

你可以这样做，使用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>

also i tried this based on your original code and it works

我也根据你的原始代码尝试了这个，它的工作原理

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

#3

4  

You can do it with 1 line in the App.vue file, like this:

您可以在App.vue文件中使用1行执行此操作，如下所示：

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

Or change the <title> tag content in public/index.html

或者更改public / index.html中的

标记内容</p> 
<!DOCTYPE html>
<html>
  <head>
    <title>Look Ma!</title> <!- ------ Here ->
  </head>
...

#4

2  

Title and meta tags can be edited and updated asynchronously.

可以异步编辑和更新标题和元标记。

You can use state management, create a store for SEO using vuex and update each part accordingly.

您可以使用状态管理，使用vuex为SEO创建商店并相应地更新每个部分。

Or you can update the element by yourself easily

或者您可以轻松地自行更新元素

created: function() {  

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

}
标签：

相关文章