Vue.js框架学习,创建第一个Vue实例_js怎样在vue.js里创建一个新的实例-CSDN博客

本文链接：https://blog.csdn.net/weixin_45237668/article/details/127013334

Vue.js框架学习,创建第一个Vue实例

一、引入Vue.js

通过script标签引入vue.js，可以引入本地的js文件，也可以引入网络上的js文件。

1、引入本地js文件

<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">
    <!-- 引入本地Vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>
    
</body>
</html>

2、引入网络js文件

<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">
    <!-- 引入网络Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
    
</body>
</html>

二、关闭Vue开发版本的productionTip提示

1、productionTip提示

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

2、关闭Vue的productionTip提示，需要在html里添加一段script标签

<body>
    <!-- 关闭productionTip提示 -->
    <script>
        Vue.config.productionTip=false
    </script>
</body>

三、创建第一个Vue实例

1、准备好一个模板容器

<div id="root">
    <h1>Hello,{{name}}</h1>
</div>

2、创建Vue实例并挂载到模板容器

new Vue({
    el:'#root',
    data:{
        name:'第一个Vue实例'
    }
})

3、页面效果

在这里插入图片描述