创建一个一个Vue实例总共分为四步:
1.创建一个容器
2.引包:地址栏搜索v2.cn.vuejs.org这是vue2的官网地址,把2去掉就是vue3的官网地址,我们的包分为开发版本和生产版本,开发版本包含完整的警告和调试模式
生产版本删除了警告,37.70KB min+gzip
开发版本在线链接http://<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
3.创建实例:在<script>标签中new Vue()
4.创建配置=》渲染数据:el:用来指定容器,data:用来渲染数据
示例如下:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue1</title>
</head>
<body>
<div id="app">
<!-- 容器 -->
{{name}}
</div>
<!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
//创建vue实例
const app = new Vue({
el:'#app',//通过el配置选择器,即选择容器
data:{ //通过data提供渲染数据
name:'李明'
}
})
</script>
</body>
</html>