Vue实例学习

vue的学习

1.初始化渲染

第一步构建用户界面，第二步创建vue实例初始化渲染

核心步骤分为4步：

1.准备容器，假设这个容器的唯一id是app

2.引包（vue的版本），vue有两种版本开发版本/生产版本

开发版本有完整的警告和调试模式，生产版本就没有完整的警告同时也没有调试模式

3.创建vue实际例，假设实例为new Vue()

4.指定配置项来渲染数据：

配置项中el指定挂载点（挂载点就是容器的id），data提供数据也就是给挂载点的数据

例子代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实例</title>
</head>
<body>
<!---创建Vue实例，初始化渲染
    1.准备容器(Vue所管理的范围)
    2.引包（开发版本包/生产版本包）
    3.创建实例
    4.添加配置项=>完成渲染
-->
    <!---1.准备容器-->
    <div id="app">
        <h2>{{msg}}</h2>
        <h3>{{shuju_one}}</h3>
        <h4>{{shuju_two}}</h4>
    </div>
    <!--2.引入开发版本包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        //引入核心包以后，在全局环境中就有了Vue构造函数
        //3.创建实例
        const app = new Vue({
            //这里通过el配置标签 
            el:'#app',
            //通过data提供数据来渲染标签
            data:{
                msg:'Hello Word',
                shuju_one:66666,
                shuju_two:77777
            }
        })
    </script>
</body>
</html>

效果图如下：

vue_one

posted @ 2025-11-12 19:49  scxlzb  阅读(4)  评论(0)    收藏  举报