vue学习笔记——简单入门总结(一)

news2025/1/13 13:46:08

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. 直接引入：

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</title>
</head>
<body>
<div id="root">
   Hello{{test01}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
//关闭生产提示
 Vue.config.productionTip=false </script>
<script type="text/javascript">
    const  x = new Vue({
    	//绑定dom
        el : "#root",
        data : {
            test01 : "这是一个测试参数"
        }
    })
    console.log(x)
</script>
</body>

</html>

实际上直接引用基本不在项目中使用，仅仅用于初步的学习。

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的模板语法：

准备的代码块：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</title>
</head>
<body>
<div id="root">
   Hello{{test01}}
   <a :href="url">这是一个链接</a>
   <input type="text" id="text01" v-model="testData">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
//关闭生产提示
 Vue.config.productionTip=false </script>
<script type="text/javascript">
    const  x = new Vue({
    	//绑定dom
        el : "#root",
        data : {
            test01 : "这是一个测试参数",
            url : "https://www.baidu.com",
            testData : ""
        }
    })
    console.log(x)

</script>
</body>

</html>

1：插值语法

{{test01}} #双括号内可直接读取vue管理的data数据

主要用于指定标签体内容

2：指令语法

<a :href="url">这是一个链接</a>

全写为 v-bind ，用于解析标签，即可以动态调整url变量控制a标签的src属性

3：双向绑定

<input type="text" id="text01" v-model:value="testData">

在这里插入图片描述
简写

<input type="text" id="text01" v-model="testData">

2.2 vue的事件处理：

1：点击事件

v-on:click 简写：@click = ""

<button v-on:click="testInput">测试按钮</button>

methods : {
            testInput(){
                console.log("这是一个测试按钮")
            }
        }

2：事件修饰符

1： @click.stop
阻止事件冒泡

2： @click.once
事件只触发一次

3 @click.capture
使用事件的捕获模式

4 @click.self
只有event.target是当前操作的元素时才触发事件

5 @wheel.passive
事件的默认行为立即执行，无需等待事件回调执行完毕

3：键盘事件

触发enter（回车）键盘事件

根据键值创建键盘事件，

<input v-on:keyup.13="testEnter">

键盘事件缩写：

<input @keyup.enter="testEnter">

testEnter(){
                alert("这是enter测试")
            }

在这里插入图片描述
什么？你说你记不住这么多键值？

还好vue给咱们把常用的键值给了几个别名。通过别名可以替代键值进行操作。

回车：enter
删除：delete (捕获“删除”和“退格”键)
退出：esc
空格：space
换行：tab (特殊，必须配合keydown去使用)
上：up
下：down
左：left
右：right

2.3 vue的计算属性：

2.3.1 计算属性与方法的区别：

用法上：计算属性一般用于加工原数据，方法的作用范畴要大得多

原理上：计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值，如果相关依赖数据没发生改变，则会直接返回上次已经缓存的值，而方法则会重新计算

2.3.1 计算属性的简单写法：

在这里插入图片描述

<h1>这是一个计算属性{{biggerAge}}</h1>

  data : {
            age : 1,
            test01 : "这是一个测试参数",
            url : "https://www.baidu.com",
            testData : ""
        }

 computed:{
            biggerAge(){
                return this.age*10
            }
        }

2.4 vue的监视属性：

1：监视属性的基本使用

监视时可以拿到修改前的值和修改后的值 newValue,oldValue

<input type="text" id="text01" v-model="testData">

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)
                    }
            }
        }