一、认识Vue.js
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
1.1 Vue 的安装
安装方式:
-
CDN引入;
-
下载Vue的js文件,并手动引入;
-
通过npm包管理工具安装使用;(webpack)
-
直接Vue CLI创建项目,并使用
1.1.1 CDN引入:
内容分发网络 (Content Delivery Network / Content Distribution Network)
-
通过相互连接的网络系统,利用最靠近每个用户的服务器;
-
更快、更可靠的将音乐、图片、视频、应用程序及其他文件发送给用户;
-
来提供高性能、可扩展性及低成本的网络内容传递给用户;
常见的CDN服务器大致分为两种:
-
自己的CDN服务器:目前阿里、腾讯、亚马逊、Goolgle都可以购买CDN服务器;
-
开源的CDN服务器:国际上使用较多的是unpkg、JSDelivr、cdnjs;
Vue的CDN引入:
<script src="https://unpkg.com/vue@next"></script>
案例的实现:
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
template: '<h2>hello Vue3</h2>'
})
app.mount("#app"); // 将app挂载到id为app的div上
</script>
1.1.2 下载和引入
下载Vue的源码,可以直接打开CDN的链接:
-
打开链接,复制其中所有的代码;
-
创建一个新的文件,比如vue.js,将代码复制到其中;
通过script标签,引入刚才的文件:
<script src="../js/vue.js"></script>
案例的实现:
<div id="app"></div>
<script src="../js/vue.js"></script>
<script>
const app = Vue.createApp({
template: '<h2>hello Vue3</h2>'
})
app.mount("#app");
</script>
1.2 计数器案例
如果我们希望实现一个计数器的案例:
-
点