vue学习笔记——简单入门总结(一)
Vue学习笔记
文章目录
- Vue学习笔记
- 1. 学习vue的准备
- 1.1. vue简介:
- 1.2. vue特点:
- 1.2.1. 组件化：
- 1.2.1. 声明式：
- 1.2. vue的引入
- 1.2.1. 直接引入：
- 1.2.2. 脚手架构建vue项目：
- 1.2.3：vue开发插件安装：
- 2. vue的简单使用
- 2.1 vue的模板语法：
- 2.2 vue的事件处理：
- 2.3 vue的计算属性：
- 2.3.1 计算属性与方法的区别：
- 2.3.1 计算属性的简单写法：
- 2.4 vue的监视属性：
1. 学习vue的准备
1.1. vue简介:
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
说人话是就是为了帮助开发者动态构建页面的框架
1.2. vue特点:
1.2.1. 组件化：
提高代码复用性，让代码更好维护。
1.2.1. 声明式：
使开发者`无需操作dom`，提高开发效率。
1.2. vue的引入
1.2.1. 直接引入：
测试
Hello{{test01}}
实际上直接引用基本不在项目中使用，仅仅用于初步的学习。
1.2.2. 脚手架构建vue项目：
1： 安装脚手架
npm config set registry https://registry.npm.taobao.org #npm更换淘宝镜像
更换了淘宝镜像，npm下载相关会快一点
npm install -g @vue/cli #安装vue指令
2：构建vue项目
vue create 项目名
选择vue版本
分别有 vue2和 vue3两个默认配置（我这里选择vue2·）
要是因为网络问题构建失败，建议。。建议多试几次，校园网不行就换手机热点试试。
构建成功！
启动vue项目
npm run serve #启动vue开发服务器
打开vue欢迎页面
1.2.3：vue开发插件安装：
官方插件地址
edge是可以直接打开的。
2. vue的简单使用
2.1 vue的模板语法：
准备的代码块：
测试
Hello{{test01}}这是一个链接
1： 插值语法
{{test01}} #双括号内可直接读取vue管理的data数据
主要用于指定标签体内容
2： 指令语法
这是一个链接
全写为 v-bind ，用于解析标签，即可以动态调整url变量控制a标签的src属性
3： 双向绑定
简写
2.2 vue的事件处理：
1： 点击事件
v-on:click 简写：@click = ""
methods : {testInput(){console.log("这是一个测试按钮")}}
2：事件修饰符
1： @click.stop
阻止事件冒泡
2： @click.once
事件只触发一次
3 @click.capture
使用事件的捕获模式
4 @click.self
只有event.target是当前操作的元素时才触发事件
5 @wheel.passive
事件的默认行为立即执行，无需等待事件回调执行完毕
3：键盘事件
触发enter（回车）键盘事件
根据键值创建键盘事件，
键盘事件缩写：
testEnter(){alert("这是enter测试")}
什么？你说你记不住这么多键值？
还好vue给咱们把常用的键值给了几个别名。通过别名可以替代键值进行操作。
回车：enter
删除：delete (捕获“删除”和“退格”键)
退出：esc
空格：space
换行：tab (特殊，必须配合keydown去使用)
上：up
下：down
左：left
右：right
2.3 vue的计算属性：
2.3.1 计算属性与方法的区别：
用法上：计算属性一般用于加工原数据，方法的作用范畴要大得多
原理上：计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值，如果相关依赖数据没发生改变，则会直接返回上次已经缓存的值，而方法则会重新计算
2.3.1 计算属性的简单写法：
这是一个计算属性{{biggerAge}}
data : {age : 1,test01 : "这是一个测试参数",url : "https://www.baidu.com",testData : ""}
computed:{biggerAge(){return this.age*10}}
2.4 vue的监视属性：
1：监视属性的基本使用
监视时可以拿到修改前的值和修改后的值 newValue,oldValue
watch : {testData:{immediate:true, handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}}}
2：深度监视
1：Vue中的watch默认不监测对象内部值的改变（一层）
2：在watch中配置deep:true可以监测对象内部值的改变（多层）
这里我数据没有多层，就简单加上看看语法加在哪里（qaq）
watch : {testData:{immediate:true, deep:true, //深度监视handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}}}