• 2-2 挂载点,模板与实例


    Vue之中挂载点,模板与Vue实例的关系。

    div标签是Vue实例的挂载点。因为el(element元素)正好和你的标签的id对应的上。那么这个div标签就叫做Vue实例的挂载点。Vue只会去处理挂载点下面的内容。

    msg并不在挂载点之下。这个Vue实例只会去处理挂载点下面的内容。挂载点指的是Vue实例里面的这个el属性对应的后面的id所对应的这个DOM节点。

    什么叫做模板呢?挂载点里面你可以去写一些属性或者标签。在挂载点内部的这些内容,我们都把它叫做模板内容。模板并不一定要写在挂载点,我们还有另一种编写的方式。可以把模板写在Vue实例里面,那么就不需要在挂载点之下去写这个模板了,把模板写在了实例里面。

    模板就是挂载点内部的内容。模板你可以写在挂载点内部,也可以写在Vue实例的template属性里面。template这块内容就是我们模板的内容。

    实例你只需要指定一个挂载点。然后把模板template写上。Vue自动地结合你的模板和你的数据,生成最终要展示的内容,然后会把这个内容放在挂载点之中。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue入门</title>
    
        <!--这个库要放在head部分去引入,这样做会避免页面出现抖屏的一个情况-->
        <script type="text/javascript" src="./vue.js"></script>
    </head>
    <body>
        <!--挂载点,模板,实例之间的关系-->
    
    
        <div id="root">
             <!--
             <h1>hello {{msg}}</h1>
             -->
        </div>
        <!--引入了vue.js这个库,还没有真正使用这个库-->
    
        <script type="text/javascript">
            new Vue({
               // 创建一个Vue的实例,创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例
               // el:"" 我让Vue这个实例去接管页面上的哪一个element(元素)
                 el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div>
               // el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素
               // 创建Vue实例的时候,传递了一个大的参数进去,这个大的参数里面有一个el参数:挂载点,它让这个Vue实例去处理id=root这块区
               // 域的内容,所以这个实例的挂载点就是id=root的这个标签
           
                 template: '<h1>hello {{msg}}</h1>',
                 data: {//这个Vue实例里面会有一些数据
                     msg: "hello world3" //Vue实例已经接管了这个标签的内容,或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去
                        //使用这个Vue实例里面的这个msg数据了。
                 }
            })
            //在没有Vue之前我们写原生或者jquery的时候都是这样去写代码的,我们手动的去处理DOM
            //var dom = document.getElementById("root")
            //dom.innerHTML = "hello world"
            //在Vue里面写代码和以前不一样
            //在div标签里面声明需要使用一个msg的数据,创建一个Vue的实例,定义好了这个msg的数据,然后让这个Vue的实例通过el把Vue实例和
            //这个标签做一个绑定,那么msg的数据就会自动显示到这个div的标签里面
        </script>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue入门</title>
    
        <!--这个库要放在head部分去引入,这样做会避免页面出现抖屏的一个情况-->
        <script type="text/javascript" src="./vue.js"></script>
    </head>
    <body>
        <!--挂载点,模板,实例之间的关系-->
    
    
        <div id="root">
             <!--
             <h1>hello {{msg}}</h1>
             -->
        </div>
        <!--引入了vue.js这个库,还没有真正使用这个库-->
    
        <script type="text/javascript">
            new Vue({
               // 创建一个Vue的实例,创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例
               // el:"" 我让Vue这个实例去接管页面上的哪一个element(元素)
                 el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div>
               // el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素
               // 创建Vue实例的时候,传递了一个大的参数进去,这个大的参数里面有一个el参数:挂载点,它让这个Vue实例去处理id=root这块区
               // 域的内容,所以这个实例的挂载点就是id=root的这个标签
           
                 template: '<h1>hello {{msg}}</h1>',
                 data: {//这个Vue实例里面会有一些数据
                     msg: "hello world3" //Vue实例已经接管了这个标签的内容,或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去
                        //使用这个Vue实例里面的这个msg数据了。
                 }
            })
            //在没有Vue之前我们写原生或者jquery的时候都是这样去写代码的,我们手动的去处理DOM
            //var dom = document.getElementById("root")
            //dom.innerHTML = "hello world"
            //在Vue里面写代码和以前不一样
            //在div标签里面声明需要使用一个msg的数据,创建一个Vue的实例,定义好了这个msg的数据,然后让这个Vue的实例通过el把Vue实例和
            //这个标签做一个绑定,那么msg的数据就会自动显示到这个div的标签里面
        </script>
    </body>
    </html>
  • 相关阅读:
    软件测试技术实战 设计、工具及管理(51Testing软件测试网作品系列)
    MATLAB智能算法超级学习手册
    HTML与CSS入门经典(第9版)
    深入理解Android 5 源代码
    中文版Dreamweaver CS6基础培训教程(第2版)
    可用性测试手册(第2版)
    网络综合布线系统与施工技术第4版
    PHP核心技术与最佳实践(第2版)
    [OC Foundation框架
    [OC Foundation框架
  • 原文地址:https://www.cnblogs.com/ZHONGZHENHUA/p/9174061.html
Copyright © 2020-2023  润新知