Vue3+Ts（coderwhy）超详细学习笔记（⼆）邂逅Vue3开发
⼀. 认识Vue.js
1.1. 认识Vue
Vue (读⾳ /vjuː/，类似于 view) 是⼀套⽤于构建⽤户界⾯的渐进式框架。
全称是Vue.js或者Vuejs；
什么是渐进式框架呢？表⽰我们可以在项⽬中⼀点点来引⼊和使⽤Vue，⽽不⼀定需要全部使⽤Vue来开发整个项⽬；
1.2. Vue的安装
Vue是⼀个JavaScript的库，刚开始我们不需要把它想象的⾮常复杂，我们就把它理解成⼀个已经帮助我们封装好的库，在项⽬中可以引⼊并且使⽤它即可。
那么安装和使⽤Vue这个JavaScript库有哪些⽅式呢？
⽅式⼀：在页⾯中通过CDN的⽅式来引⼊；
⽅式⼆：下载Vue的JavaScript⽂件，并且⾃⼰⼿动引⼊；
⽅式三：通过npm包管理⼯具安装使⽤它（webpack再讲）；
⽅式四：直接通过Vue CLI创建项⽬，并且使⽤它；
1.2.1. CDN⽅式引⼊
什么是CDN呢？CDN称之为内容分发⽹络（Content Delivery Network或Content Distribution Network，缩写：CDN）
它是指通过相互连接的⽹络系统，利⽤最靠近每个⽤户的服务器；
更快、更可靠地将⾳乐、图⽚、视频、应⽤程序及其他⽂件发送给⽤户；
来提供⾼性能、可扩展性及低成本的⽹络内容传递给⽤户；
常⽤的CDN服务器可以⼤致分为两种：
⾃⼰的CDN服务器：需要购买⾃⼰的CDN服务器，⽬前阿⾥、腾讯、亚马逊、Google等都可以购买CDN服务器；
开源的CDN服务器：国际上使⽤⽐较多的是unpkg、JSDelivr、cdnjs；
Vue的CDN引⼊：
<script src="unpkg/vue@next"></script>
Hello Vue案例的实现：
<div id="app"></div>
<script src="unpkg/vue@next"></script>
<script>
// Vue相关的代码
const app = ateApp({
template:'<h2>Hello Vue3</h2>'
});
// 将app挂载到id为app的div上
</script>
</body>
1.2.2. 下载并且引⼊
下载Vue的源码，可以直接打开CDN的链接：
打开链接，复制其中所有的代码；
创建⼀个新的⽂件，⽐如vue.js，将代码复制到其中；
通过script标签，引⼊刚才的⽂件：
<script src="../js/vue.js"></script>
你好啊，Vuejs案例的实现：
<body>
<div id="app"></div>
<script src="../js/vue.js"></script>
<script>
const app = ateApp({
template:`<h2>你好啊, Vue3</h2>`
});
</script>
</body>
1.3. 计数器案例
如果我们希望实现⼀个计数器的案例：
点击+1，那么内容会显⽰数字+1；
点击-1，那么内容会显⽰数字-1；
我们可以选择很多种⽅式来实现，在这⾥我们就对⽐原⽣和Vue的实现⽅式的不同。
1.3.1. 原⽣实现计数器
原⽣的实现代码如下：
<h2 class="title"></h2>
<button class="increment">+1</button>
<button class="decrement">-1</button>
<script>
// 1.获取DOM原⽣
const titleEl = document.querySelector(".title");
const btnInEl = document.querySelector('.increment'); const btnDeEl = document.querySelector('.decrement');
// 2.默认设置的是Hello World
let counter =0
// 3.设置titleEl的内容
titleEl.innerHTML = counter;
// 4.监听按钮的点击
btnInEl.addEventListener('click',()=>{
counter +=1;
titleEl.innerHTML = counter;
})
btnDeEl.addEventListener('click',()=>{
counter -=1;
titleEl.innerHTML = counter;
})
</script>
</body>
1.3.
2. Vue实现计数器
Vue的实现代码如下：
<!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>Document</title>
</head>
<body>
<div id="app">哈哈哈哈啊</div>
<script src="../js/vue.js"></script>
<script>
template:`
<div>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click='increment'>+1</button>
<button @click='decrement'>-1</button>
</div>
`,
data:function(){// Vue3中data必须是⼀个函数，⽽不能是对象
return{
message:"Hello World",
counter:100
}
},
// 定义各种各样的⽅法
methods:{
increment(){
console.log("点击了+1");
},
decrement(){
console.log("点击了-1");
}
}
}).mount('#app');
</script>
</body>
</html>
1.3.3. 声明式和命令式
原⽣开发和Vue开发的模式和特点，我们会发现是完全不同的，这⾥其实涉及到两种不同的编程范式：命令式编程和声明式编程；
命令式编程关注的是 “how to do”，声明式编程关注的是 “what to do”，由框架(机器)完成 “how”的过程；在原⽣的实现过程中，我们是如何操作的呢？
我们每完成⼀个操作，都需要通过JavaScript编写⼀条代码，来给浏览器⼀个指令：
这样的编写代码的过程，我们称之为命令式编程；
在早期的原⽣JavaScript和jQuery开发的过程中，我们都是通过这种命令式的⽅式在编写代码的；
在Vue的实现过程中，我们是如何操作的呢？
我们会在createApp传⼊的对象中声明需要的内容，模板template、数据data、⽅法methods；
学javascript前要学什么这样的编写代码的过程，我们称之为是声明式编程；
⽬前Vue、React、Angular的编程模式，我们称之为声明式编程；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。