[vue入门教程]渲染页面的几种方式

渲染页面的几种方式直接方式&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;&

姜小衰

4303人浏览 · 2018-12-14 13:49:35

姜小衰 · 2018-12-14 13:49:35 发布

渲染页面的几种方式

直接方式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div><span>{{ msg }}</span></div>
</div>
</body>

<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        }
    });
</script>
</html>

template方式

https://cn.vuejs.org/v2/api/#template

一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type=“x-template”> 包含模板。

出于安全考虑，你应该只使用你信任的 Vue 模板。避免使用其他人生成的内容作为你的模板。

如果 Vue 选项中包含渲染函数，该模板将被忽略。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>
</body>

<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        },
        template: '<div id="ccc"><span>aaa{{ msg }}</span></div>',
    });
</script>
</html>

render方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>
</body>
<script src="vue.js"></script>
<script>

    var res = Vue.compile('<div><span>compile{{ msg }}</span></div>');

    new Vue({
        el: '#app',
        data: {
            msg: 'hello'
        },
        render: res.render
    });
</script>
</html>

$mout挂载方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>

<script src="vue.js"></script>
<script>
    var app2 = document.createElement("div");
    var msg = document.createTextNode("{{msg}}");
    app2.id = "app2";
    app2.appendChild(msg);
    document.body.appendChild(app2);
    new Vue({
        // el: '#app',
        data: {
            msg: 'hello'
        },
    }).$mount(app2);
</script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^