-
Vue2 零基础入门 Vue2 零基础入门第二天 2.1 vue简介 && 2.2 vue的基本使用 && 2.3 vue的调试工具
Vue2 零基础入门
Vue2 零基础入门第二天
老师：黑马程序员
2 Vue基础入门
2.1 vue简介
2.1.1 什么是vue
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。
2.1.2 vue的特性
vue 框架的特性，主要体现在如下两方面：
① 数据驱动视图
② 双向数据绑定
【数据驱动视图】
在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。
好处：当页面数据发生变化时，页面会自动重新渲染
数据驱动视图是单向的数据绑定。
【双向数据绑定】
在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。
好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值
【MVVM】
MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分
Model 表示当前页面渲染时所依赖的数据源。View 表示当前页面所渲染的 DOM 结构。ViewModel 表示 vue 的实例，它是 MVVM 的核心。
【MVVM的工作原理】
ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。
当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中
2.1.3 vue的版本
当前，vue 共有 3 个大版本，其中：
- 2.x 版本的 vue 是目前企业级项目开发中的主流版本
- 3.x 版本的 vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广
- 1.x 版本的 vue 几乎被淘汰，不再建议学习与使用
3.x是未来趋势
2.2 vue的基本使用
2.2.1 基本使用步骤
① 导入 vue.js 的 script 脚本文件
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象（vue 实例对象）
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <div id="app"> {{username}} div> <script src="./lib/vue.js">script> <script> //创建vm实例对象 const vm = new Vue({ //指定控制区域 el : '#app', //指定model数据源 data :{ username : 'dingjiaxiong' } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
笔者这里用的是从官方下的vue.js
直接查看页面
2.2.2 基本代码与MVVM的对应关系
2.3 vue的调试工具
2.3.1 安装vue-devtools调试工具
vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。
Chrome 浏览器在线安装 vue-devtools ：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpdFireFox 浏览器在线安装 vue-devtools ：
https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/
2.3.2 配置Chrome浏览器中的vue-devtools
重启浏览器
2.3.3 使用vue-devtools调试vue页面
-
相关阅读:
[读后感-Cayden原创] 读《1-2年纪，塑造孩子一生的关键》有感
微软允许OEM对Win10不提供关闭Secure Boot
OFD查验~看OFD 用超阅
人力物力和时间资源有限？守住1个原则，精准覆盖所有兼容性测试！
Explain执行计划字段解释说明---type字段说明（02）
GO 的 Web 开发系列（八）—— Gin 自定义 Html 渲染实现多租户的模板设计
浅谈督查督办管理系统在企业管理中起到的作用
2023年优化算法之之霸王龙优化算法(TROA)，原理公式详解，附matlab代码
解析：hyperf 官方骨架包的 Dockerfile
3C数字钥匙技术规范解读
- 原文地址：https://blog.csdn.net/weixin_44226181/article/details/126775993
