下载对应的Vue.js
打开vue官网,找到直接用 <script> 引入板块,如图所示:
点击开发版本进行下载,将该
vue.js移动到对应的目录下,然后就可以通过<script>标签进行引入了。
创建一个html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建一个VUE实例</title>
</head>
<body>
</body>
</html>
创建完成后,首先设置好盒子,例如我们创建一个id为app的盒子。
<!-- 此时我们创建了一个名为app的盒子,并在盒子中写入了对应的要渲染的数据 -->
<div id = "app">
<p>{{ msg }}</p>
<a href="#">{{ href }}</a>
</div>
盒子创建好之后,就要编写我们的js代码了,在编写之前,我们需要先引入对应的vue.js,有两种方式,CDN和本地
<!-- 通过CDN引入,优点是更方便,缺点是网络慢的时候可能加载不成功 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<!-- 通过本地引入,缺点是要下载文件和保存,有点是不受网络影响 -->
<script src="../vue.js"></script>
引入完成后,我们就可以正式编写我们的js代码块了。
<script>
// 创建一个Vue实例
const app = new Vue(
{
// 通过el配置选择器,指定Vue管理的是那个盒子
el: "#app",
// data里面存放的是要渲染的数据
data:{
msg : "Hello, World",
href : "你好"
}
}
)
</script>
完整版的html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建一个VUE实例</title>
</head>
<body>
<div id = "app">
<p>{{ msg }}</p>
<a href="#">{{ href }}</a>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue(
{
// 通过el配置选择器,指定Vue管理的是那个盒子
el: "#app",
data:{
msg : "Hello, World",
href : "你好"
}
}
)
</script>
</body>
</html>
