Vue 概念

Vue (读音 /vjuː/ ) 是一套 构建用户界面 的 渐进式 框架

构建用户界面：

基于数据渲染出用户可以看见的界面

1681875887026.png

渐进式：

就是循序渐进，不一定非要把Vue所以的API学完才能开发Vue，可以层层递进

Vue开发的两种方式：

  • Vue核心包开发：局部模块改造
  • Vue核心包&Vue插件&工程化：整站开发

image.png

框架：

框架就是一套完整的解决方案，相当于实现了大部分的功能，然后按照指定的规则进行编写内容

优点：大大提升开发效率 (70%↑)

缺点：需要理解和记忆规则，官网

创建Vue实例

通过CDN使用 Vue2&Vue3 ：

1
2
3
4
5
6
<!--对于制作原型或学习，你可以这样使用最新版本：-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<!--对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
<!--Vue3-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

核心步骤4步：

  1. 准备容器
  2. 引包（官网） — 开发版本/生产版本
  3. 创建Vue实例 new Vue()
  4. 指定配置项，渲染数据
  • el：指定挂载点
  • data：提供数据
1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
	{{ msg }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			msg: 'Hello Vue'
		}
	})
</script>

插值表达式

插值表达式是一种Vue的模板语法

作用：利用表达式进行插值，渲染到页面中

表达式：是可以被求值的代码，JS引擎会将其计算出一个结果

1
2
3
4
5
6
7
8
9
10
// 例如：
money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

语法：{{ 表达式 }}

1
2
3
4
5
<div id="app">
	{{ msg }}
</div>
<p id="lang"> {{ language ? '中文' : 'English' }} </p>
<p>{{ fn() }}</p>

注意点：

  1. 使用的数据必须存在 （data）
  2. 支持的是表达式，而非语句，比如：if for …
  3. 不能在标签属性中使用 {{ }} 插值

响应式特性

数据的响应式处理：数据变化，视图自动更新

方法：

  1. 访问数据： “实例.属性名”
  2. 修改数据： “实例.属性名”= “值”

1681888539340.png

  • 聚焦于数据 → 数据驱动视图
  • 使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可

Vue开发者工具

调试Vue应用插件：Vue Devtools

下载地址：

image.png

image.png