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

    Vue学习笔记

    在这里插入图片描述

    文章目录

    1. 学习vue的准备

    1.1. vue简介:

    Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

    说人话是就是为了帮助开发者动态构建页面的框架

    1.2. vue特点:

    1.2.1. 组件化：
       提高代码复用性，让代码更好维护。

    • 1
    1.2.1. 声明式：
       使开发者`无需操作dom`，提高开发效率。

    • 1

    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
    • 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
    • 28

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

    1.2.2. 脚手架构建vue项目：

    1： 安装脚手架
    在这里插入图片描述

    npm config set registry https://registry.npm.taobao.org #npm更换淘宝镜像

    • 1

    更换了淘宝镜像，npm下载相关会快一点

    npm install -g @vue/cli #安装vue指令

    • 1

    2：构建vue项目

    vue create 项目名

    • 1

    选择vue版本
    分别有 vue2和 vue3两个默认配置（我这里选择vue2·）
    在这里插入图片描述
    要是因为网络问题构建失败，建议。。建议多试几次，校园网不行就换手机热点试试。
    在这里插入图片描述
    构建成功！

    启动vue项目

    npm run serve  #启动vue开发服务器

    • 1

    在这里插入图片描述
    打开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
    • 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
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    1： 插值语法

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

    • 1

    主要用于指定标签体内容

    2： 指令语法

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

    • 1

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

    3： 双向绑定

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

    • 1

    在这里插入图片描述
    简写

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

    • 1

    2.2 vue的事件处理：

    1： 点击事件

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5

    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">

    • 1

    键盘事件缩写：

    <input @keyup.enter="testEnter">

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

    • 1
    • 2
    • 3

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    2.3 vue的计算属性：


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

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

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

    2.3.1 计算属性的简单写法：

    在这里插入图片描述

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
     computed:{
            biggerAge(){
                return this.age*10
            }
        }

    • 1
    • 2
    • 3
    • 4
    • 5

    2.4 vue的监视属性：

    1：监视属性的基本使用

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

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

    • 1
    watch : {
            testData:{
                immediate:true, 
                handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue)
                    }
            }
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这里插入图片描述
    2：深度监视

    1：Vue中的watch默认不监测对象内部值的改变（一层）

    2：在watch中配置deep:true可以监测对象内部值的改变（多层）

    这里我数据没有多层，就简单加上看看语法加在哪里（qaq）

    watch : {
            testData:{
                immediate:true, 
                deep:true, //深度监视
                handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue)
                    }
            }
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
  • 相关阅读:
    十大排序 —— 桶排序
    深入解析git、Gitee、GitHub与GitLab
    数据结构 栈与队列详解！！
    JS逆向之常见编码和混淆加密方式（二）
    实现自动化构建与集成：Jenkins与SVN整合的指南
    第2章 docker镜像管理
    VUE3 element-plus源码解析之- 001 dom aria.ts 文件解析
    SolidworksSimulation完成对压力容器的强度分析
    哪些问题会让企业申报不了高新技术企业?
    《opencv学习笔记》-- Harris角点检测
  • 原文地址：https://blog.csdn.net/faker1234546/article/details/127457403