阅读文章可以收获:
1. 明白什么是vue
2. 如何创建一个vue实例
3. vue中的插值表达式如何使用
4. 如何安装vue的开发者工具
-
Vue 概念
什么是vue?
Vue 是一个用于 构建用户界面 的 渐进式 框架
框架优点:大大提升开发效率 (70%↑)
缺点:需要理解记忆规则
官网文档地址:
vue2: https://v2.cn.vuejs.org/v2/guide/installation.html
vue3: https://vuejs.org/
Vue 的两种使用方式:
① Vue 核心包开发
- 场景:局部 模块改造
② Vue 核心包 & Vue 插件 工程化开发
- 场景:整站 开发
总结:
Vue是什么?
Vue 是一个用于 构建用户界面 的 渐进式 框架
1. 构建用户界面:基于 数据 动态 渲染 页面
2. 渐进式:循序渐进的学习
3. 框架:一套完整的项目解决方案,提升开发效率
-
创建实例
步骤:
1. 准备容器
2. 引包 (官网) - 开发版本 / 生产版本
在线引入:
本地引入:
3. 创建 Vue 实例 new Vue()
4. 指定配置项 → 渲染数据
- ① el 指定挂载点
- ② data 提供数据
总结:这是一整个使用vue的流程,其实使用vue就是类似与引入js一样的,vue就是前人帮我们封装好的前端的框架,使用vue就必须遵守它指定的规则。
完整案例:
-
插值表达式
插值表达式是一种 Vue 的模板语法
作用: 利用表达式进行插值,渲染到页面中
表达式:是可以被求值的代码,JS引擎会将其计算出一个结果
语法:{{ 表达式 }}
注意点:
(1)使用的数据必须存在 (data)
(2)支持的是表达式,而非语句,比如:if for ...
(3)不能在标签属性中使用 {{ }} 插值
总结:
1. 插值表达式的作用是什么?
- 利用表达式进行插值,将数据渲染页面中
2. 语法格式?
- {{ 表达式 }}
3. 插值表达式的注意点:
- ① 使用的数据要存在 (data)
- ② 支持的是表达式,而非语句 if ... for
- ③ 不能在标签属性里面
-
响应式特性
响应式特性是vue的核心特性
-
什么是响应式特性呢?
数据改变,视图会自动更新
响应式数据和传统的数据有很明显的区别,比如我们修改一个数组(传统数据)的内容后,需要重新自己在渲染一遍数据,然后视图才会改变,但在vue中这个数组的数据是响应式的,如果数据中的内容改变,视图会自动渲染
聚焦于数据 → 数据驱动视图
使用 Vue 开发,关注业务的核心逻辑,根据业务修改数据即可
总结:
1. 什么是响应式呢?
- 数据改变,视图自动更新
- 使用 Vue 开发 → 专注于业务核心逻辑 即可
2. 如何访问或修改数据呢?
- data中的数据, 最终会被添加到实例上
- ① 访问数据: "实例.属性名"
- ② 修改数据: "实例.属性名" = "
-
开发者工具
为什么要装vue的开发中工具?
原因:为了更好的调试代码,查看页面数据
安装方式:
(1)通过谷歌应用商店安装 (国外网站)
(2)极简插件: 下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件
地址:https://chrome.zzzmh.cn/index
使用:打开 Vue 运行的页面,调试工具中 Vue 栏,即可查看修改数据,进行调试