--- el option to specify a template using the template / template option to specify the use of inline template / template using the option to specify a separate template / use render option to specify a template to be mounted

Use el option to specify a template

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <h1>{{greeting}}</h1>
        <input type="text" v-model="greeting">
    </div>


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

       
        const app = new Vue({
            el: '#app',
            data: {
                greeting: 'Hello Vuejs'
            }
        });

        /* 
            el 选项只是用来指定模板的挂载点
            template 选项用来指定要挂载的模板。
            如果没有指定（template 选项）要挂载的模板，则使用挂载点内部的HTML作为实例的模板。
        
        */



    </script>
</body>

</html>

Use template option to specify a template to be mounted - inline template

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

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

       
        const app = new Vue({
            el: '#app',
            template: '<div><h1>{{greeting}}</h1></div>',
            data: {
                greeting: 'Hello Vuejs'
            }
        });

        /* 
            el 选项只是用来指定模板的挂载点
            template 选项用来指定要挂载的模板。
            如果指定了 template 选项，则会将模板内容挂载到 el 选项指定的挂载点，此时，挂载点会被模板内容替换掉。
        
        */



    </script>
</body>

</html>

Use template option to specify a template to be mounted - separate template

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="./vue.js"></script>
    <!-- 独立模板 -->
    <script id="mytemplate" type="x-template">
        <section>
            <h1>{{greeting}}</h1>
            <h1>{{greeting}}</h1>
        </section>
    </script>

    <script>

        const app = new Vue({
            el: '#app',
            template: '#mytemplate',
            data: {
                greeting: 'Hello Vuejs'
            }
        });

        /*

            template 选项指定指定模板内容时，除了写在行内，还可以单独写到一个 type 属性为 x-template 的 <script> 元素中。

            然后 <script> 元素的 id 与 template 选项关联起来。

            注意，模板内容必须要有一个根元素

        */

    </script>
</body>

</html>

Use template render option to specify mount

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

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

        const app = new Vue({
            el: '#app',
            render: function (createElement) {
                return createElement('h1', this.greeting)
            },
            data: {
                greeting: 'Hello Vuejs'
            }
        });

        /*

            除了使用 template 选项指定指定模板内容以为，还可以使用 render() 方法动态地创建模板内容。

        */

       

    </script>
</body>

</html>

Top upup

Published 151 original articles · won praise 1 · views 1880

Private letter concerns

--- el option to specify a template using the template / template option to specify the use of inline template / template using the option to specify a separate template / use render option to specify a template to be mounted

Use el option to specify a template

Use template option to specify a template to be mounted - inline template

Use template option to specify a template to be mounted - separate template

Use template render option to specify mount

Guess you like