目录
一、vue的安装
CDN方式引入
下载包引入
二、案例
原生实现计数器
vue实现计数器
三、开发模式
MVC和MVVM
声明式和命令式
四、createApp对象参数
template属性
data属性
methods属性
五、vue源码
一、vue的安装
Vue是一个JavaScript的库，刚开始我们不需要把它想象的非常复杂，我们就把它理解成一个已经帮助我们封装好的库，在项目中可以引入并且使用它即可。
方式一：在页面中通过CDN的方式来引入；
方式二：下载Vue的JavaScript文件，并且自己手动引入；
方式三：通过npm包管理工具安装使用它（webpack再讲）；
方式四：直接通过Vue CLI创建项目，并且使用它；
CDN方式引入
什么是CDN呢？CDN称之为内容分发网络（Content Delivery Network或Content Distribution Network，缩写：CDN）
它是指通过相互连接的网络系统，利用最靠近每个用户的服务器；
更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户；
来提供高性能、可扩展性及低成本的网络内容传递给用户；
代码：
-
<div id="app"></div>
-
<script src="/vue@next"></script>
-
<script>
-
const App = {
-
template: '<h2>Hello World</h2>'
-
}
-
const app = Vue.createApp(App)
-
app.mount('#app')
-
</script>
下载包引入
下载Vue的源码，可以直接打开CDN的链接：/vue@next
打开链接，复制其中所有的代码；
创建一个新的文件夹，将代码复制到其中；
通过script标签，引入刚才的文件，
代码：
-
<body>
-
<div id="app"></div>
-
-
<script src="../js/"></script>
-
<script>
-
const app = Vue.createApp({
-
template: `<h2>你好啊, Vue3</h2>`
-
});
-
-
app.mount('#app');
-
</script>
-
</body>
二、案例
如果我们希望实现一个计数器的案例：
点击+1，那么内容会显示数字+1；
点击-1，那么内容会显示数字-1；
我们可以选择很多种方式来实现，在这里我们就对比原生和Vue的实现方式的不同
原生实现计数器
代码：
-
<body>
-
-
<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>
vue实现计数器
代码：
-
<div id="app">哈哈哈哈啊</div>
-
-
<script src="../js/"></script>
-
<script>
-
Vue.createApp({
-
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");
-
this.counter++;
-
},
-
decrement() {
-
console.log("点击了-1");
-
this.counter--;
-
}
-
}
-
}).mount('#app');
-
</script>
三、开发模式
MVC和MVVM
- MVC和MVVM都是一种软件的体系结构
MVC是Model – View –Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、前端；
MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式；
- 通常情况下，我们也经常称Vue是一个MVVM的框架。
Vue官方其实有说明，Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。
声明式和命令式
原生开发和Vue开发的模式和特点，我们会发现是完全不同的，这里其实涉及到两种不同的编程范式：
命令式编程和声明式编程；
命令式编程关注的是 “how to do”，声明式编程关注的是 “what to do”，由框架(机器)完成 “how”的过程；
在原生的实现过程中，我们是如何操作的呢？
我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令：
这样的编写代码的过程，我们称之为命令式编程；
在早期的原生JavaScript和jQuery开发的过程中，我们都是通过这种命令式的方式在编写代码的；
在Vue的实现过程中，我们是如何操作的呢？
我们会在createApp传入的对象中声明需要的内容，模板template、数据data、方法methods；
这样的编写代码的过程，我们称之为是声明式编程；
目前Vue、React、Angular的编程模式，我们称之为声明式编程；
四、createApp对象参数
template属性
template属性：表示的是Vue需要帮助我们渲染的模板信息：
目前我们看到它里面有很多的HTML标签，这些标签会替换掉我们挂载到的元素（比如id为app的div）的innerHTML；模板中有一些奇怪的语法，比如 {{}}，比如 @click，这些都是模板特有的语法，我们会在后面讲到；
但是这个模板的写法有点过于别扭了，并且IDE很有可能没有任何提示，阻碍我们编程的效率。
Vue提供了两种方式：
- 方式一：使用script标签，并且标记它的类型为 x-template；
- 方式二：使用任意标签（通常使用template标签，因为不会被浏览器渲染），设置id；emplate元素是一种用于保存客户端内容的机制，该内容再加载页面时不会被呈现，但随后可以在运行时使用JavaScript实例化；
data属性
data属性是传入一个函数，并且该函数需要返回一个对象：
- 在的时候，也可以传入一个对象（虽然官方推荐是一个函数）；
- 在的时候，必须传入一个函数，否则就会直接在浏览器中报错；
data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：
- 所以我们在template中通过 {{counter}} 访问counter，可以从对象中获取到数据；
- 所以我们修改counter的值时，template中的 {{counter}}也会发生改变；
methods属性
data属性是传入一个函数，并且该函数需要返回一个对象：
- 在的时候，也可以传入一个对象（虽然官方推荐是一个函数）；
- 在的时候，必须传入一个函数，否则就会直接在浏览器中报错；
data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理：
- 所以我们在template中通过 {{counter}} 访问counter，可以从对象中获取到数据；
- 所以我们修改counter的值时，template中的 {{counter}}也会发生改变；
五、vue源码
如果想要学习Vue的源码，比如看createApp的实现过程，应该怎么办呢？
- 第一步：在GitHub上搜索 vue-next，下载源代码；这里推荐通过 git clone 的方式下载；
- 第二步：安装Vue源码项目相关的依赖：执行 yarn install
- 第三步：对项目执行打包操作：执行yarn dev（执行前修改脚本）
- 第四步：通过 packages/vue/dist/ 调试代码