计数器案例(体验Vue)
<div id="app"></div>
<script src="../vue3/vue3.js"></script>
<script>
Vue.createApp({
template: `
<div>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click='increment'>+</button>
<button @click='decrement'>-</button>
</div>
`,
// 数据
data() {
return {
message: 'hello Vue3!',
counter: 0
}
},
// 方法
methods: {
increment() {
this.counter++;
},
decrement() {
this.counter--;
}
}
}).mount('#app')
</script>
Vue的特点
声明式和命令式
原生开发和Vue开发的模式和特点,我们会发现是完全不同的,这里其实涉及到两种不同的编程范式:
命令式编程和声明式编程;
命令式编程关注的是 “how to do”,声明式编程关注的是 “what to do”,由框架(机器)完成 “how”的过程;
在原生的实现过程中,我们是如何操作的呢?
- 我们每完成一个操作,都需要通过JavaScript编写一条代码,来给浏览器一个指令;
- 这样的编写代码的过程,我们称之为命令式编程;
- 在早期的原生JavaScript和jQuery开发的过程中,我们都是通过这种命令式的方式在编写代码的;
在Vue的实现过程中,我们是如何操作的呢?
- 我们会在createApp传入的对象中声明需要的内容,模板template、数据data、方法methods;
- 这样的编写代码的过程,我们称之为是声明式编程;
- 目前Vue、React、Angular的编程模式,我们称之为声明式编程。
MVVM 模型
MVC和MVVM都是一种软件的体系结构
MVC是Model – View –Controller的简称,是在前期被使用非常框架的架构模式,比如iOS、前端;
MVVM是Model-View-ViewModel的简称,是目前非常流行的架构模式;
通常情况下,我们也经常称Vue是一个MVVM的框架
Vue官方其实有说明,Vue虽然并没有完全遵守MVVM的模型,但是整个设计是受到它的启发的。
template属性
template属性概念
在使用createApp的时候,我们传入了一个对象,接下来我们详细解析一下之前传入的属性分别代表什么含义。
template属性:表示的是Vue需要帮助我们渲染的模板信息:
- 目前我们看到它里面有很多的HTML标签,这些标签会替换掉我们挂载到的元素(比如id为app的div)的 innerHTML;
- 模板中有一些奇怪的语法,比如 {{}},比如 @click,这些都是模板特有的语法,我们会在后面讲到;
- 但是这个模板的写法有点过于别扭了,并且IDE很有可能没有任何提示,阻碍我们编程的效率。
Vue提供了两种方式:
方式一:使用script标签,并且标记它的类型为 x-template
方式二:使用任意标签(通常使用template标签,因为不会被浏览器渲染),设置id。template元素是一种用于保存客户端内容的机制,该内容再加载页面时不会被呈现,但随后可以在运行时使 用JavaScript实例化;
template写法
**注意:**在createApp的对象中,我们需要传入的template以 # 开头:
如果字符串是以 # 开始,那么它将被用作 querySelector,并且使用匹配元素的 innerHTML 作为模板字符串;
1. 使用script标签
<!-- template 模板写法一 -->
<!-- 使用script进行模板的书写,需要指定type属性为 x-template -->
<script type="x-template" id="mao">
<div>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click='increment'>+</button>
<button @click='decrement'>-</button>
</div>
</script>
<script>
// 模板template的使用
Vue.createApp({
template:'#mao'
})
</script>
2. 使用template标签
注意:<template>
标签并不是Vue独有的。这个标签是html本身已经定义过的,也就是说浏览器本身就支持。
**特点:**template标签内的标签和数据,并不会被浏览器解析到页面上。(浏览器会处理这个标签内的内容,但是不会进行渲染)
<!-- template 模板写法二 -->
<!-- 直接在 template标签内书写模板 -->
<template id="mao">
<div>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click='increment'>+</button>
<button @click='decrement'>-</button>
</div>
</template>
data属性
概念
data属性是传入一个函数,并且该函数需要返回一个对象:
在Vue2.x的时候,也可以传入一个对象(虽然官方推荐是一个函数)
在Vue3.x的时候,必须传入一个函数,否则就会直接在浏览器中报错;
data中返回的对象会被Vue的响应式系统劫持,之后对该对象的修改或者访问都会在劫持中被处理:
- 所以我们在template中通过 {{counter}} 访问counter,可以从对象中获取到数据;
- 所以我们修改counter的值时,template中的 {{counter}}也会发生改变
具体这种响应式的原理,将会在后面的学习中讲到
methods属性
methods属性是一个对象,通常我们会在这个对象中定义很多的方法:
这些方法可以被绑定到 template 模板中;
在该方法中,我们可以使用this关键字来直接访问到data中返回的对象的属性;
对于有经验的同学,在这里我提一个问题,官方文档有这么一段描述:
问题一:为什么不能使用箭头函数(官方文档有给出解释)?
问题二:不使用箭头函数的情况下,this到底指向的是什么?(可以作为一道面试题)
其他属性
当然,这里还可以定义很多其他的属性,我们会在后续进行深入学习。比如:
- 比如props、computed、watch、emits、setup等等;
- 也包括很多的生命周期函数
Vue3的源码
如果想要学习Vue的源码,比如看createApp的实现过程,应该怎么办呢
注意:Vue3的源代码是通过yarn包管理工具进行管理的。我们可以通过npm全局安装 yarn。npm install -g yarn
-
在GitHub上搜索 vue-next,下载源代码;这里推荐通过 git clone 的方式下载;
git clone https://github.com/vuejs/vue-next.git
-
安装Vue源码项目相关的依赖;
- 执行 yarn install
-
对项目执行打包操作
-
执行yarn dev(执行前修改脚本)(sourcemap也就是代码映射,可以映射当前调试的打包之后的代码具体来自哪一个源文件)
"script": { "dev":"node scripts/dev.js --sourcemap" }
-
-
通过 packages/vue/dist/vue.global.js 调试代码