Vue学习01——Vue初体验

灰色轨迹丶
23 阅读6分钟

初识Vue

简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的js框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合
Vue2官网：v2.cn.vuejs.org/

为什么要学习Vue.js

  1. 简单易学：Vue.js 的API简洁明了，易于理解和使用。它的学习曲线相对较低，开发者可以快速上手构建应用程序。
  2. 响应式数据绑定：Vue.js 提供了响应式数据绑定机制，这意味着当数据发生变化时，视图会自动更新。这大大简化了应用程序的开发过程。
  3. 组件化开发：Vue.js 采用了组件化的开发模式，可以将应用程序拆分为可重用的组件，提高了代码的可维护性和复用性。
  4. 可扩展性：Vue.js 提供了丰富的插件和指令，例如路由、状态管理等，可以满足各种复杂的应用程序需求。同时，Vue.js 也支持与其他流行的前端库和框架（如 Angular 和 React）进行集成。
  5. 社区支持：Vue.js 拥有庞大的开发者社区，提供了大量的教程、示例和第三方库。这使得开发者可以轻松找到所需资源，并快速解决问题。
  6. 性能优化：Vue.js 在运行时进行了优化，通过异步渲染和延迟加载等技术，提高了应用程序的性能和用户体验。
  7. 客户端路由：Vue.js 内置了客户端路由功能，支持单页应用的构建，使得页面之间的跳转和数据传递更加简单和流畅。

MVVM思想

MVVM（Model-View-ViewModel）是前端视图层的分层开发思想，本质上就是MVC（Model-View-Controller）的改进版，主要把每个页面分成了 M(Model)、V(View)、VM(ViewModel)。其中VM是MVVM模式的核心，VM是M和V之间的调度者。

  • Model：模型层，在这里表示 每个页面中展示的数据
  • View：视图层，在这里表示 DOM（HTML 操作的元素）
  • ViewModel：连接视图和数据的中间件，它是一个调度者，分割了 V 和 M，当View层需要获取数据或保存数据都需要VM做中间处理

在 MVVM 架构中，是不允许 数据 和 视图 直接通信的，只能通过 ViewModel 来进行交互，而 ViewModel 就是定义了一个 Observer 观察者

  • ViewModel 能够观察到数据的变化，并对视图下对应的内容进行更新
  • ViewModel 能够监听到视图的变化，并能够通知数据发生改变

Vue.js 是MVVM的实现者，其核心就是实现了 DOM 监听 与 数据绑定

image.png

Vue的两大核心要素

  • 数据驱动：是指Vue.js利用数据观测原理，通过getter和setter方法实现数据与视图的双向绑定。在技术实现上，Vue.js使用了ES5 Object.defineProperty和存储器属性：getter和setter，因此它只兼容IE9及以上的版本。这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。
    数据驱动的核心是VM，即ViewModel，它保证数据和视图的一致性。当数据变化时，视图会自动更新；当视图变化时，数据也会自动更新

  • 组件系统：Vue.js 采用了组件化开发模式，将应用分解为一系列可复用的组件，每个组件都具有特定的功能和作用。这种组件化的开发方式提高了代码的可维护性和复用性，使得应用更加易于扩展和迭代。每个组件都有自己的数据、行为和样式，可以独立地开发和测试，然后再组合到一起，构成完整的应用程序

image.png

Vue创建实例

  1. 准备容器

  2. 引包（官网） — 开发版本/生产版本： 1.通过cdn方式引入：<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    (注意：cdn是一种加速策略，能够快速的提供js文件)
    2.下载好官网下载好vue.js后再引入：<script src="../js/vue.js"></script>

  3. 创建Vue实例 new Vue()

  4. 指定配置项，渲染数据

    1. el:指定挂载点
    2. data提供数据

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
			初识Vue：
				1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
				2.app容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
				3.app容器里的代码被称为【Vue模板】；
				4.Vue实例和容器是一一对应的；
				5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
				6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
				7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
		
				注意区分：js表达式 和 js代码(语句)
						1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
									(1). a
									(2). a+b
									(3). demo(1)
									(4). x === y ? 'a' : 'b'
		
						2.js代码(语句)
									(1). if(){}
									(2). for(){}
		-->
		
		<!-- 准备好一个容器 -->
		<div id = "app">
			{{msg}} <!-- 插值表达式-->
		</div>
		<!-- 引包 -->
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			
			/* 创建Vue实例 new Vue() */
			const app = new Vue({
				/* 指定配置项，渲染数据 */
				el:"#app",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
				data:{		//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
					msg:"hello world"
				}
			})
		</script>
		
	</body>
</html>

浏览器中查看效果：

image.png

插值表达式

插值表达式是一种Vue的模板语法
我们可以用插值表达式渲染出Vue提供的数据

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

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

以下的情况都是表达式：

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

语法

插值表达式语法：{{ 表达式 }}

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<p>{{fn()}}</p>

错误用法

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错

2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>

3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

响应式特性

什么是响应式

简单理解就是数据变，视图对应变。

如何访问 和 修改 data中的数据（响应式演示）

data中的数据, 最终会被添加到实例上

① 访问数据： "实例.属性名"

② 修改数据： "实例.属性名"= "值"

image.png

示例：

<div id = "app">
    {{ {"name":"avgrado","age":20}.name }} <!-- 插值表达式-->
</div>

此时，页面上会显示“avgrado”，也就是对象中 name 属性的值 image.png

Vue 开发者工具安装

安装步骤：

1681889483446.png

1681889390406.png

安装后可以看到一个Vue的调试面板

image.png

avatar
文章
阅读
粉丝